Runs in your browser · nothing is uploaded
Color Palette Generator
Press Space for a new palette, lock the colours you like and export them as CSS, Tailwind or JSON — with harmonies built in OKLCH, image colour extraction and WCAG text contrast on every swatch.
Light muted pink
- White text: 1.95:1Fails
- Black text: 10.76:1AA
Dark green
- White text: 8.29:1AA
- Black text: 2.53:1Fails
Very light muted blue
- White text: 1.40:1Fails
- Black text: 14.97:1AA
Dark brown
- White text: 7.02:1AA
- Black text: 2.98:1Fails
Light teal
- White text: 1.45:1Fails
- Black text: 14.44:1AA
Drag swatches (or use the arrows) to reorder. Click a code to copy it. “AA” means normal-size text in that colour passes WCAG 2.2 AA (4.5:1); “AA large” passes only for large text (3:1).
How the colours are made
Harmonies in OKLCH
A base hue is picked at random (or taken from your first locked colour). Each harmony adds fixed hue angles to it; lightness is spread from light to dark so neighbouring colours differ, and colours outside the sRGB range lose chroma — never hue or lightness — until they fit.
| Harmony | Hue offsets from the base |
|---|---|
| Random pleasing | +137.5° each (golden angle) |
| Analogous | +0°, +30°, -30°, +60°, -60° |
| Complementary | +0°, +180° |
| Split-complementary | +0°, +150°, +210° |
| Triadic | +0°, +120°, +240° |
| Tetradic (square) | +0°, +90°, +180°, +270° |
| Monochromatic | 0° (lightness and chroma vary) |
| Shades | 0° (lightness and chroma vary) |
Worked example: a 50–950 scale
#3b82f6 is oklch(62.3% 0.188 259.8). Its lightness (62.3%) is closest to step 500, so it stays there unchanged; the other steps keep hue 259.8° and move to fixed lightness targets, with chroma tapering towards the very light and very dark ends.
- 50f0f6ff
- 100deeaff
- 200c4dbff
- 3009dc2ff
- 40067a0ff
- 5003b82f6
- 600286cd9
- 7001d58b7
- 800154694
- 900133a79
- 950082451
Exported for Tailwind v4 (three colours, prefix “brand”):
@theme {
--color-brand-1: #264653;
--color-brand-2: #2a9d8f;
--color-brand-3: #e9c46a;
}
Colour codes and text contrast
The same conversions the swatches show. Contrast uses the WCAG 2.2 relative-luminance formula; ratios are rounded down so a failing value never displays as passing.
| Colour | RGB | HSL | OKLCH | White text | Black text |
|---|---|---|---|---|---|
| #264653Dark muted blue | rgb(38 70 83) | hsl(197 37% 24%) | oklch(37.5% 0.044 226.2) | 10.07:1 AA | 2.08:1 fail |
| #2a9d8fMedium teal | rgb(42 157 143) | hsl(173 58% 39%) | oklch(63% 0.101 183) | 3.32:1 AA large | 6.31:1 AA |
| #e9c46aLight yellow | rgb(233 196 106) | hsl(43 74% 66%) | oklch(83.4% 0.117 87.4) | 1.67:1 fail | 12.56:1 AA |
| #f4a261Light orange | rgb(244 162 97) | hsl(27 87% 67%) | oklch(78.1% 0.127 57.9) | 2.06:1 fail | 10.18:1 AA |
| #e76f51Medium red | rgb(231 111 81) | hsl(12 76% 61%) | oklch(67.8% 0.156 35.2) | 3.09:1 AA large | 6.79:1 AA |
| #767676Medium grey | rgb(118 118 118) | hsl(0 0% 46%) | oklch(56.6% 0 0) | 4.54:1 AA | 4.62:1 AA |
Sources (checked 7 October 2026): OKLab and its matrices from Björn Ottosson, “A perceptual color space for image processing”, as used by CSS Color Module Level 4; contrast thresholds from WCAG 2.2; @theme variables from the Tailwind CSS docs. Colour descriptions such as “Dark muted blue” are generated from OKLCH values, not taken from a colour-name list.
Frequently asked questions
How do I generate a colour palette?+
Press Space (or the Generate button) for a new set of colours. Lock any colour you like and it stays put while the others change; the first locked colour also sets the base hue, so the new colours are built around it. Pick a harmony (analogous, complementary, triadic and so on), choose 2 to 10 colours, drag swatches to reorder them and use Undo if you went one step too far.
What is OKLCH, and why not just use HSL?+
OKLCH is a perceptual colour space: equal changes in its lightness look like equal changes to the eye. HSL isn't — hsl(60 100% 50%) (pure yellow) and hsl(240 100% 50%) (pure blue) share 50% "lightness", yet their OKLCH lightness is 96.8% and 45.2%. Generating in OKLCH keeps hue steps and light-to-dark scales visually even. Every swatch shows its oklch() value, which modern browsers accept directly in CSS.
How do I get a colour palette from an image?+
Choose or drop an image in the 'Palette from an image' panel. It's shrunk to at most 200 pixels on its longest side in your browser, then the pixels are grouped with k-means clustering in OKLab colour space into 3 to 10 colours, shown light to dark with each colour's share of the image. Press 'Use these colours' to load them into the palette. The image is never uploaded.
How do I use the palette in Tailwind CSS?+
For Tailwind v4, copy the @theme block into your main CSS file: a variable like --color-brand-1 creates utilities such as bg-brand-1 and text-brand-1. For Tailwind v3, copy the config export into tailwind.config.js, which adds the colours under theme.extend.colors. The 50–950 scale panel exports a whole tint/shade ramp the same way.
Should I put white or black text on each colour?+
Each swatch shows the WCAG 2.2 contrast of white and of black text on it. AA needs 4.5:1 for normal text and 3:1 for large text. For example, white on #3b82f6 is 3.67:1 — fine for large headings but not body text — while black on it is 5.70:1. Use the Contrast Checker for any other pair.
How do I save or share a palette?+
The colours are kept in the page address after the # sign, for example palette.northlane.live/#264653-2a9d8f-e9c46a. Bookmark it or press Copy link and send it; opening the link loads the same colours. Nothing is stored on a server, and locks and history aren't part of the link.