Color palette generator
- oklch(22.2% 0.0346 212.9)
- oklch(34.5% 0.1543 264.4)
- oklch(52.2% 0.1551 28.2)
- oklch(73.3% 0.1271 15.7)
- oklch(85.9% 0.2145 135.2)
A color palette generator that works in OKLCH
Most palette generators pick colours in HSL or straight RGB, which is why their triads look balanced on blue and lopsided on yellow, and why the same lightness slider makes one hue glow and another go muddy. This one computes every harmony in OKLCH, the perceptual colour space, so a 120° step is the same visual step wherever you start and a lightness of 60% looks like 60% for every hue.
The wheel is the model, not a picture. Its angle is hue and its radius is chroma as a fraction of the most that hue can hold at that lightness, which is why the disc is a full circle with no dead zones: every pixel on it is a colour a screen can actually show. Drag a handle and the swatch follows; pick a harmony and the guides appear; drag the base and the whole set rotates around it.
Nothing is hidden and nothing is uploaded. A colour that falls outside sRGB is flagged rather than silently clipped, two swatches close enough to read as one colour are named, and every palette lives in the URL, so a link is a save.
How to use it
- Press Space to generate, or choose a harmony — analogous, complementary, triadic, split or tetradic — and the palette re-fits to it on the spot.
- Lock the swatches you want to keep, then generate again. Drag a wheel handle to move a hue, or open a swatch for lightness, chroma and hue sliders.
- Reorder by dragging a column, insert the perceptual midpoint between two colours with the +, and remove down to two.
- Export as HEX, CSS variables, SCSS, Tailwind or JSON, or copy the URL — the palette is in it.
Questions
- Is this colour palette generator free?
- Yes. There is no account, no sign-up and no paywall. Every tool in Color Lab runs entirely in your browser.
- What is OKLCH, and why does it matter for a palette?
- OKLCH is a perceptual colour space: its lightness axis matches how light a colour looks, and its hue angle stays put as chroma changes. Palettes built in HSL or RGB inherit those spaces' unevenness — equal steps that do not look equal. Building in OKLCH is what makes a harmony hold at every hue.
- Why is a swatch labelled P3?
- That colour is outside the sRGB gamut. The hex shown is the nearest colour an ordinary display can produce, with the same lightness and hue and less chroma. A Display-P3 screen can show the colour that was actually asked for. Most palette tools clip silently; this one says so.
- Can I export the palette to Tailwind or CSS?
- Yes — as CSS custom properties, a Tailwind v4 theme block, SCSS variables, plain HEX or JSON. The CSS and Tailwind exports use oklch() values, which every current browser accepts.
- Does pressing Space throw my palette away?
- No. Every palette you move away from is kept in the history rail, undo and redo work throughout, and the URL always holds the current one.
More free colour tools
- ExtractPull dominant, highlight, midtone and shadow colours from a frame.
- InspectEvery value for one colour, with its tints, shades and harmonies.
- ContrastWCAG contrast, with the nearest accessible colour when it fails.
- ScalesPerceptually even 50–950 ramps for a design system.
All of Color Lab runs in your browser. Nothing is uploaded and no account is needed.