Color Palette Generator

Fewer than five, usually. A working interface tends to run on one dominant colour, one or two neutrals covering most of the surface area, and a single accent held back for the thing you want clicked. The often-quoted 60-30-10 split — sixty per cent dominant, thirty supporting, ten accent — is a rule of thumb rather than a law, but it captures the important part: the proportions matter more than the hues do. Treat a row of five as a pool to choose from rather than a specification to fill. Two of them going unused is a normal outcome, not waste.

They describe the same sRGB colours, so the choice is about editing rather than output. Hex is compact and copies cleanly, which is why tools hand you hex. HSL is far easier to reason about by hand, because hue, saturation and lightness are separate numbers — making a colour ten per cent darker is one edit rather than three. RGB sits between them and is what you want when an alpha channel needs spelling out. Modern CSS accepts all three, plus newer spaces such as oklch that behave more predictably when you lighten and darken. Pick one per project and stay with it.

Work outwards from it rather than around it. The first move is usually vertical rather than sideways: take the single hex and derive tints and shades of it, so you have a light surface, a mid tone and something dark enough for text. That covers most of an interface before a second hue is involved at all. Then add one accent, chosen for contrast against the family you have just built. There are separate tools here for generating shades from one colour and for moving a value between hex, RGB and HSL, which helps when the brand guide is written in one notation and your stylesheet in another.

Assume not, and check. Contrast is a ratio between two specific colours, so a palette on its own cannot pass or fail anything — the pairing is what gets tested. WCAG asks for 4.5:1 on normal body text and 3:1 on large text and the visual boundaries of controls, and mid-lightness colours are exactly the ones that miss: too dark for white text, too light for black. The hex label sitting on each swatch picks its own dark or light type from an old weighted brightness sum with a fixed threshold, not from a contrast ratio, so it is readable in practice but is not evidence of anything. Test the real pairing in a contrast checker.

They are positions on the hue circle. Complementary is two hues opposite each other, roughly 180 degrees apart, which gives maximum tension and is easy to overdo at full saturation. Analogous is three or four neighbours within about thirty degrees, which reads calm and coherent and can end up flat. Triadic is three hues spaced evenly at 120 degrees, lively and hard to balance without letting one dominate. Split-complementary takes a hue plus the two neighbours of its opposite, keeping the contrast while softening the clash. None of these schemes is applied here — hues are drawn independently, so any harmony in a roll is coincidence.

No. This tool makes no network request of any kind — there is no palette service behind it, no call carrying the hex values away, nothing fetched per roll. The colours are produced by arithmetic running in the tab, and the five hex strings with their lock flags sit in ordinary component state, which is memory that vanishes when the page unloads. The only thing that leaves the page is what you copy, and that goes to your system clipboard under your browser's permission rules rather than ours — if the browser refuses, you are told so, rather than being left to paste whatever was on the clipboard before.

Two separate reasons. On screens, a hex value is interpreted as sRGB, and displays vary in calibration, brightness, colour profile and whether the operating system is applying a warming filter — the same hex honestly looks different on a cheap monitor at night than on a calibrated one at noon. Print is the bigger problem, because printing is subtractive CMYK and a good part of the vivid mid-saturation range has no ink equivalent. Bright cyans, oranges and pure greens are the usual casualties and come back duller than the version everyone approved. If the palette is heading for print, get it converted and proofed before sign-off.

Name them once and refer to the name everywhere. In CSS that means custom properties on the root element, and the useful discipline is naming by role rather than by appearance — a variable called brand-accent survives the day the colour changes from orange to green, while one called orange becomes a lie. Design tools have the same idea under the name styles or tokens. One small thing to watch when copying from here: the hex labels are shown in capitals by a styling rule, while the value written to your clipboard is lowercase, so a strict string comparison between what you read and what you pasted will not match.

Because the relationships invert while the colours stay put. A mid-saturation hue that reads as confident on white tends to glow on a near-black surface, and an accent that stood out against a pale page gets lost against a dark one. The usual corrections are to desaturate slightly and lighten the accent for the dark theme rather than reusing the identical hex, and to avoid pure black as a background, since a very dark grey reduces the halation around bright text. In practice it is a second palette derived from the first, which is the moment role-based variable names start paying for themselves.