Color Palette Generator
Harmonies that are balanced, not just rotated.
Harmonies that are balanced, not just rotated.
How to use it
- Enter a base color. Hex, rgb(), hsl(), oklch() or a CSS name like tomato. With or without the hash.
- Pick the relationship. Complementary for a two color contrast, analogous for a quiet set, triadic for three that stay distinct.
- Take the values. Copy the hex codes from under the swatches, or download the palette as an SVG.
When you would use this
A palette generator is only as good as the space it does its arithmetic in. Most of them rotate hue in HSL, which is quick and gives sets where one swatch glares and another disappears, because HSL lightness is not lightness. Pure yellow and pure blue both sit at fifty percent, and one of them is obviously brighter than the other. This works in OKLCH, the perceptual space CSS Color 4 added, so a triadic set has three colors of equal weight rather than two and a weak link. The second thing that goes wrong is gamut. A saturated hue rotated to a new angle very often falls outside what an sRGB screen can show. Clipping the channels there shifts the hue, and you get back a color you did not ask for. This lowers the chroma until it fits and leaves the hue where it is. Pick a base, pick a relationship, take the hex or the SVG. Nothing is uploaded and there is no cap.
Questions
- Why do the colors differ from other palette tools?
- Because the hue rotation happens in OKLCH rather than HSL. In HSL a rotated set comes back with some swatches much brighter than others, since HSL lightness does not match what the eye sees. Rotating at a fixed perceptual lightness gives a set with even weight.
- Why is one swatch less saturated than the base?
- Because that hue cannot be that saturated at that lightness on an sRGB screen. Rather than clip it, which would change the hue into something else, the chroma is lowered until it fits and the hue is kept.
- Which relationship should I use?
- Complementary for a single accent against a main color. Analogous when nothing should compete. Triadic for three that need to stay apart, like categories in a chart. Monochromatic when you want one color at several strengths.