Runs in your browser · nothing is uploaded

Color Palette Generator

This color palette generator gives you a new palette with each press of Space — lock the colors you like and export them as CSS, Tailwind or JSON, with harmonies built in OKLCH, image color extraction and WCAG text contrast on every swatch.

Harmony

Colors

Hues spaced by the golden angle (≈137.5°) from a random start, with balanced lightness and moderate chroma. Lock colors to keep them; the first locked color sets the base hue.

Pick color 1
Light muted pink
Hex for color 1
- White text: 1.95:1Fails
- Black text: 10.76:1AA
Pick color 2
Dark green
Hex for color 2
- White text: 8.29:1AA
- Black text: 2.53:1Fails
Pick color 3
Very light muted blue
Hex for color 3
- White text: 1.40:1Fails
- Black text: 14.97:1AA
Pick color 4
Dark brown
Hex for color 4
- White text: 7.02:1AA
- Black text: 2.98:1Fails
Pick color 5
Light teal
Hex for color 5
- 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 color passes WCAG 2.2 AA (4.5:1); “AA large” passes only for large text (3:1).

Export

Format

Name prefix

:root {
  --palette-1: #d8aec3;
  --palette-2: #44541d;
  --palette-3: #c6dbff;
  --palette-4: #a13300;
  --palette-5: #76eacf;
}

Palette from an image

The image is shrunk to at most 200 px, then its pixels are grouped with k-means clustering in OKLab. Percentages are each color's share of the opaque pixels.

Tints and shades: color 1

50–950 in OKLCH, same hue; your color sits at the step closest to its lightness (marked •).

Scale name

How the colors are made

Harmonies in OKLCH

A base hue is picked at random (or taken from your first locked color). Each harmony adds fixed hue angles to it; lightness is spread from light to dark so neighbouring colors differ, and colors 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 colors, prefix “brand”):

@theme {
  --color-brand-1: #264653;
  --color-brand-2: #2a9d8f;
  --color-brand-3: #e9c46a;
}

Color 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.

Color	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. Color descriptions such as “Dark muted blue” are generated from OKLCH values, not taken from a color-name list.

Frequently asked questions

How do I generate a color palette?+

Press Space (or the Generate button) for a new set of colors. Lock any color you like and it stays put while the others change; the first locked color also sets the base hue, so the new colors are built around it. Pick a harmony (analogous, complementary, triadic and so on), choose 2 to 10 colors, 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 color 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 color 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 color space into 3 to 10 colors, shown light to dark with each color's share of the image. Press 'Use these colors' 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 colors 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 color?+

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.

What's the difference between analogous, complementary and triadic colors?+

They're ways of choosing hues around the color wheel. Analogous colors sit next to each other (30° apart here), so they feel calm and unified; complementary colors are opposite (180°) and give the strongest contrast; triadic colors are three hues evenly spaced (120° apart) for a lively but balanced mix. The generator has 8 options in all, including split-complementary, tetradic, monochromatic and shades.

How many colors should a palette have?+

For most websites and brands, three to five: a main color, one or two accents and a couple of neutrals for text and backgrounds. A common rule of thumb is 60-30-10 — about 60% dominant color, 30% secondary and 10% accent. This generator makes palettes of 2 to 10 colors.

How do I build a palette around my brand color?+

Type your color into one of the swatches — hex, rgb() and hsl() values all work — and lock it. Pick a harmony and generate: the new colors are built around your locked color's hue. Then press “Show 50–950 scale” under it to get lighter and darker versions for backgrounds, borders and hover states.

What is a 50–950 color scale?+

It's a set of 11 tints and shades of one color, numbered 50 (lightest) to 950 (darkest), the naming Tailwind CSS uses. Your color keeps its exact value at the step closest to its lightness — #3b82f6 lands on 500 — and the other steps use the same hue at set OKLCH lightness levels close to Tailwind's own palettes.

Which export formats are available?+

CSS custom properties, SCSS variables, a Tailwind v4 @theme block, a Tailwind v3 config and JSON (with hex, RGB, HSL and OKLCH for every color). You can also download the palette as an SVG or PNG image of the swatches.

How do I save or share a palette?+

The colors 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 colors. Nothing is stored on a server, and locks and history aren't part of the link.