Color Palette Generator

How to use

1. Set Your colour whichever way suits you: type any CSS color into the field, drag the swatch, or drop a photo under it, which sets the color at once and leaves its six chips there to choose from.
2. Pick a destination under Copy as, then take it with the copy button, which names what it writes, or save it with the download beside it. The copy on any color cell takes that one hex.

About this tool

Pick the one color you are sure about and let the wheel supply the rest. The page opens on a sample, #3b82f6, and the line at the head of the palette says so, because a palette nobody asked for should announce itself. Replace it in the Your colour field beside the answer, where hex, a CSS name, rgb(), hsl() and oklch() all read, drag the swatch, or drop a photo under it; on Chrome and Edge a pipette also shows up for lifting a color straight off your screen. Whichever way it arrives, that line names the color the palette was built from and where it came from.

Under More from, five hues go with it. The Opposite sits 180° round the wheel, which is the complement, the two Neighbours sit 30° either side, the analogous pair, and the two Thirds 120° either side, the triadic pair. The turning happens in OKLCH, a space built so that equal numbers look equally light, at the base's own lightness. Chroma the screen cannot show is trimmed back until the color fits sRGB, so from #3b82f6 all five land within a fifth of a point of one another: #af7d00, #0094c3, #886cee, #e24956 and #3ba01b.

The ladder works on a different axis. Hue and saturation are pinned and lightness steps through 90, 70, 50, 30 and 10 percent, with the base slotted in wherever its own lightness puts it. The six are labelled 50 to 950 in that order, so from #3b82f6 you get #cee0fd at 50, #6da2f8 at 300, the base at 500, #0b64f4 at 600, #073c92 at 800 and #021431 at 950. A darker base such as #8c5a3c lands at 600 instead, and a grey that matches a step takes its place.

If your starting point is a photo or a logo rather than a code, drop it into the photo field. The picture is redrawn at no more than 240 pixels on its longest side, sampled, then median-cut into six boxes whose average colors become chips under the drop, most common first. One of them is used at once: the first whose five hues all land, so a wall of beige that only turns into greys is passed over for the brick beside it. Click any of the six to make it the base instead. Pixels under roughly half opacity are ignored, so a logo on a transparent background contributes only its artwork.

The answer is five colors named for their jobs, Background, Text, Primary, Secondary and Accent, each painted as itself. Aa sits on every one in whichever of the palette's own Text or Background reads better on it, with the ratio of that pair graded on the raw number rather than a rounded one, so the darkest step is never marked down for failing against itself. Copy as sits just above the copy button and decides what leaves the page: those roles as custom properties, the 50–950 scale, a Tailwind v4 @theme block or a plain HEX list. The button takes its name from the pick, Copy CSS variables, Copy Tailwind @theme or Copy HEX list, the download beside it saves the same text, and every color cell carries its own copy for a single hex.

Good to know

• Rotating a hue is arithmetic, and arithmetic has no taste. Holding the lightness level stops a yellow looking washed out beside a navy, but the complement of a dull base is still a dull color, and a near-grey has no hue worth turning, so those cells are left empty and say so. Each grade reads a color against the palette's own Text or Background only, whichever is better; a pairing you invent yourself still wants the WCAG Contrast Checker.
• The image path reads your picture at 240 pixels on its longest side. A small but important accent, a logo mark sitting on a busy photograph say, can be averaged away before the quantizer ever sees it. Crop to the region you care about and drop that in instead.