Create

Color Palette

Build a palette from one color.

Palette

Export

CSS custom properties
JSON
Plain list

Saved palettes

    Nothing saved yet.

    Harmony
    How this works

    The first swatch is your base color. Pick a harmony and Generate builds the other four from it: analogous colors sit up to 60 degrees either side of the base on the color wheel, complementary ones opposite it, triadic ones a third of the way round, split complementary ones either side of its opposite, and monochrome ones share its hue. Random draws a new base each time as well. Space generates too, unless you are typing in a field.

    Colors are worked out in OKLCH, a color space where equal steps look equal, so the five spread from dark to light and none of them glares. Its color wheel is close to, but not quite the same as, the HSL one most tools show, so a hue may be a few degrees off what HSL would say.

    Lock a swatch to keep it when you generate. Tap a swatch to copy its hex code. Undo steps back through your last 20 palettes. Contrast is the WCAG 2 ratio of each color against white and black text: 4.5 to 1 passes AA for body text, 3 to 1 passes AA for large text, and 7 to 1 passes AAA. Each swatch labels itself in whichever of the two reads better.

    Your palette, locks, the last 20 palettes and the ones you save stay on this device only.

    Saved on this device only. Nothing is sent anywhere.