Home Tools Product designAccessible palette generator

Accessible color palette generator from one brand color

Enter a brand color and get a ten-step scale from 50 to 900 built in the perceptual OKLCH space. Every step shows its contrast with white and black text, the palette lists which step pairs pass WCAG AA, and the result exports as CSS custom properties, Tailwind colors or design tokens.

● Free, no sign-upUpdated: September 16, 2026

—

Brand step—

AA with white text—

AA with black text—

AA pairs inside—

Palette steps with contrast against white and black
Token	Color	OKLCH	White text	Black text	APCA Lc W / B

Text and background pairs that pass AA (4.5:1)

Background step → text steps from the same palette that can sit on it.

Method. Steps are spaced evenly in OKLCH lightness between the brand color and the ends of the scale (L ≈ 97.5 % for 50, ≈ 25 % for 900); hue stays fixed, chroma fades towards white, out-of-gamut colors lose chroma until they fit sRGB. Contrast: WCAG 2.2 ratio, never rounded up.

Everything is calculated in your browser — nothing you enter is sent anywhere.

How to use it

Enter your brand colorPaste the HEX from your brand guide or pick it. The generator finds the step whose lightness matches it and builds lighter tints above and darker shades below.
Check the contrast tableEvery step shows its ratio with white and with black text. "AA" means 4.5:1 for normal text, "Large" means only 3:1 for large text and UI components.
Pick text and background pairsThe pairs list shows which steps can be used as text on each background step — for example, 700 text on a 50 background for an info banner.
ExportChoose CSS variables, Tailwind config, JSON or W3C design tokens, name the palette and copy the code into your project.

Why generate tints and shades in OKLCH

The simplest way to make a lighter or darker version of a color is to mix it with white or black in sRGB, or to change the L in HSL. Both produce uneven scales. HSL lightness is not perceptual: yellow at 50 % looks far brighter than blue at 50 %, so the "same" step has very different contrast from hue to hue. Mixing with white in sRGB shifts hue — blues turn purple, reds turn pink.

OKLCH, a cylindrical form of the OKLab color space published by Björn Ottosson in 2020 and now part of CSS Color Level 4, separates the three things designers care about:

oklch(L C H) L — perceptual lightness, 0 % (black) to 100 % (white) C — chroma, colorfulness (0 = grey, sRGB colors reach about 0.32) H — hue angle in degrees

Because L tracks how light a color looks, equal steps in L give scales that feel even across hues, and contrast with white or black changes predictably from step to step. That is why Tailwind CSS v4 defines its default palette in OKLCH.

How this generator builds the scale

The brand color is converted to OKLCH and placed at the step whose reference lightness is closest (or at the step you choose). It keeps its exact HEX value.
Lighter steps are spaced evenly in L between the brand color and L ≈ 97.5 % (step 50); darker steps between the brand color and L ≈ 25 % (step 900).
Hue stays the same. Chroma fades towards the light end — very light tints with full chroma look neon — and eases by up to a third towards the dark end.
Any color outside the sRGB gamut is mapped back by reducing chroma while keeping L and H, as CSS Color 4 recommends.
Each HEX is rounded to 8 bits per channel, and contrast is computed from the rounded value that you will actually ship.

Reading the contrast columns

For each step the table shows the WCAG 2.2 contrast ratio with pure white (#fff) and pure black (#000) text:

AA — at least 4.5:1: safe for body text, labels and links.
Large — between 3:1 and 4.5:1: only for text from 24px (18.66px bold) and for non-text elements such as icons, borders and focus rings (WCAG 1.4.11).
No — below 3:1: decoration only, never text.

L = 0.2126 · R_lin + 0.7152 · G_lin + 0.0722 · B_lin ratio = (L_lighter + 0.05) / (L_darker + 0.05)

Because the steps are spaced by perceptual lightness, the result is similar for most hues: white text passes AA on 600–900 and black text on 50–500. Practically no color passes with both: 4.5:1 with white and with black at once is only possible in a very narrow band of relative luminance (0.175–0.183). That is why design systems use 600 or 700 for primary buttons with white labels, and keep 400–500 for fills, charts and large text.

The APCA column shows the WCAG 3 draft lightness contrast (Lc) for white and black text. Values above 75 are comfortable for body text, above 60 for UI labels, above 45 for headings. APCA is not yet a standard; use it to choose between options that already pass WCAG 2.2.

Pairs inside the palette

Tinted interfaces — info banners, selected rows, tags, onboarding hints — put a dark step on a light step of the same hue. The pairs list shows, for each background step, which text steps reach 4.5:1. As a rule of thumb, pairs that are five or more steps apart (50 with 600, 100 with 700) usually pass; neighbors never do.

Using the palette in a design system

Name by role, not by value. Export the scale as --brand-50 … --brand-900, then map roles on top: --color-primary: var(--brand-600), --color-primary-text: var(--brand-700), --color-info-bg: var(--brand-50). Changing the brand later touches one list.
Write down the approved pairs. Document which text step goes on which background step so that nobody puts 400 text on 100 in a hurry.
Dark theme is a separate mapping. Reuse the same scale in reverse — light steps for text, dark steps for surfaces — and check the pairs again: dark pairs that pass WCAG 2 can still feel low-contrast, which APCA shows better.
States need contrast too. Hover and pressed states usually move one step darker; focus rings need 3:1 against the surrounding background.
Semantic colors (success, warning, danger) can be generated the same way from one base color each. Yellow and light green are recognizable only at light steps, where white text fails — put dark text on them.

To check a single pair, including colors outside the palette or semi-transparent overlays, use the color contrast checker.

Sources

Ottosson B. A perceptual color space for image processing, 2020 — OKLab and OKLCH, conversion matrices.
W3C. CSS Color Module Level 4 — oklch() notation and gamut mapping by chroma reduction.
W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — success criteria 1.4.3, 1.4.6 and 1.4.11, relative luminance and contrast ratio.
Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — Lc values.
W3C Design Tokens Community Group. Design Tokens Format Module, draft — $type and $value structure used in the tokens export.

FAQ

What do the numbers 50 to 900 mean in a color palette?

They are lightness steps of one hue, popularized by Material Design and Tailwind CSS: 50 is the lightest tint, 900 the darkest shade, and 500 or 600 is usually close to the brand color. The numbers are names, not measurements, so any step can be adjusted.

Why use OKLCH instead of HSL to generate shades?

OKLCH lightness matches perceived brightness, while HSL lightness does not: a yellow and a blue with the same HSL lightness look very different and have very different contrast. Equal OKLCH steps give scales that look even across hues and do not drift in hue when lightened.

Which palette step should I use for text on white?

The first step with at least 4.5:1 against white in the table. In palettes from this generator that is usually 600, because steps follow perceptual lightness; in HSL-based palettes yellow, lime and cyan often need 800 or darker. For large text and icons 3:1 is enough, so one step lighter may work.

Why does no step pass with both white and black text?

To reach 4.5:1 with white and with black at the same time, a color needs a relative luminance between 0.175 and 0.183 — a band so narrow that almost no palette step lands in it. That is expected. Use darker steps with white text and lighter steps with dark text.

Will my exact brand color be in the palette?

Yes. The brand color keeps its exact HEX at the step where its lightness fits best, or at the step you choose, and the other steps are built around it.

How do I use the export in Tailwind CSS?

For Tailwind v3, paste the Tailwind export into theme.extend.colors in tailwind.config.js and use classes like bg-brand-600. For Tailwind v4, export CSS variables and rename them to --color-brand-600 inside an @theme block.