One brand color.
A complete UI palette.

Scales, semantic roles and contrast-checked light and dark themes — calculated in your browser, delivered as CSS, Tailwind v4 or shadcn.

Start from a brand color Open the converterLocal calculations. No color uploads.

01 · Your brand color

Brand color

Nearest CSS name: royalblue · approximate

Or start from a template

02 · Palette and scales6 families · 11 steps · OKLCH

brand

50100200300400500600700800900950

neutral

success

warning

danger

info

03 · Light and dark

Ship your next idea.

Light · 13/13 passed · button text 5.17:1

Ship your next idea.

Dark · 13/13 passed · button text 5.17:1

Continue in workspace

How it flows

Every step reads the same project.

Choose a color once. Palettes, scales, contrast checks, themes and code update from that one source — and locked colors stay exactly where you put them.

Palette

Brand, neutral and four status colors derived from one source in OKLCH.

Palette generator

Scales

5 to 21 steps per family, four curves, hue shift and contrast targets.

Shade generator

Check

Aa2.72:1fails

Aa4.51:1AA

WCAG 2.2 and APCA for any pair, plus the nearest passing color at the same hue.

Contrast checker

Theme

lightButton

darkButton

Light and dark tokens from the same palette, each checked across 13 role pairs.

Theme generator

Export

--primary: #2563EB--primary-foreground: #FFFFFF--ring: #2563EB

CSS variables, Tailwind v4 and shadcn theme CSS are free. Structured formats are Pro.

Export panel

Light and dark

Your brand stays. Every role clears contrast.

The brand source is kept as its own token. Text, borders, focus rings and status colors are adjusted per mode, then checked as real role pairs.

brand #2563EB · preserved

Example interface

A place for your next idea.

Keep your brand. Make every interaction readable.

Project name

Your changes are ready.

Button state preview

Light · 13/13 passed · button text 5.17:1

foreground / background17.35:1
card-foreground / card18.12:1
muted-foreground / background4.63:1

Example interface

A place for your next idea.

Keep your brand. Make every interaction readable.

Project name

Your changes are ready.

Button state preview

Dark · 13/13 passed · button text 5.17:1

foreground / background16.26:1
card-foreground / card14.88:1
muted-foreground / background4.51:1

Checks cover the listed color pairs, not complete website accessibility.

Delivery

Paste it into the stack you already use.

Preview, copy and download read the same project object, so what you check is what you ship.

CSS and Tailwind exportFree
Structured exports and optionsPro
Read-only snapshot linksFree

:root {
  --brand: #2563EB;
  --neutral: #363B43;
  --success: #3A9742;
  --warning: #E9AB2B;
  --danger: #DB4241;
  --info: #2784D5;
  --brand-50: #F0F5FF;
  --brand-100: #E5EEFF;
  --brand-200: #C8DBFF;
  --brand-300: #9DBFFF;
  --brand-400: #699BFF;
  --brand-500: #3170F9;
  --brand-600: #114CCD;
  --brand-700: #002E9D;
  --brand-800: #001D6D;
  --brand-900: #00124E;
  --brand-950: #051434;
  --neutral-50: #F3F5F8;
  --neutral-100: #EBEEF4;
  --neutral-200: #D6DBE2;
  --neutral-300: #BABFC8;
  --neutral-400: #999EA8;
  --neutral-500: #767C85;
  --neutral-600: #565B64;
  --neutral-700: #3B3F46;
  --neutral-800: #26292F;
  --neutral-900: #191B1F;
  --neutral-950: #151618;
  --success-50: #E3FEE2;
  --success-100: #CDFDCD;
  --success-200: #ADEEAE;
  --success-300: #86D589;
  --success-400: #5DB562;
  --success-500: #34923D;
  --success-600: #066F1C;
  --success-700: #004D0F;
  --success-800: #003307;
  --success-900: #002303;
  --success-950: #071B08;
  --warning-50: #FFF4E1;
  --warning-100: #FFEBCB;
  --warning-200: #FFD48A;
  --warning-300: #EBB551;
  --warning-400: #CD9200;
  --warning-500: #A17200;
  --warning-600: #775400;
  --warning-700: #533900;
  --warning-800: #382500;
  --warning-900: #261800;
  --warning-950: #201300;
  --danger-50: #FFF2F0;
  --danger-100: #FFE8E5;
  --danger-200: #FFCDC7;
  --danger-300: #FFA29A;
  --danger-400: #FC6660;
  --danger-500: #D53C3C;
  --danger-600: #AB0E1D;
  --danger-700: #7B000E;
  --danger-800: #540006;
  --danger-900: #3B0003;
  --danger-950: #2B0808;
  --info-50: #EEF6FF;
  --info-100: #E1F0FF;
  --info-200: #BFDEFF;
  --info-300: #8BC4FF;
  --info-400: #4EA3F4;
  --info-500: #207FD0;
  --info-600: #005DA1;
  --info-700: #004072;
  --info-800: #002A4E;
  --info-900: #001C37;
  --info-950: #04172A;
}

Why OKLCH

Every rainbow you have ever shipped is uneven.

Both color rows sweep the same 25 hues. Under each is that row converted to perceptual lightness.

2.1×

How much brighter HSL yellow is than HSL blue at the same stated 50% lightness.

0.00

Lightness variation across the OKLCH row, so a 500 in teal weighs the same as a 500 in red.

sRGB

Steps whose chroma had to be reduced to fit sRGB are flagged, never silently clipped.

HSL rainbowhsl(h 100% 50%)

Its lightness0.452 → 0.968

OKLCH, evenoklch(.72 .16 h)

Its lightnessflat at 0.72

Plans

Free covers the whole path.

Pro actions are labeled where they appear. Calculated results are never blurred or hidden behind them.

Free

Projects and cloud syncGuest: 1 local · Free: 3 cloud
Scale controls5–21 steps
WCAG + APCA and theme role checksIncluded
CSS and Tailwind exportCSS, Tailwind v4, shadcn
Complete backup and restoreIncluded

Pro

Projects and cloud sync100 projects
Cell editing, curves and alignmentIncluded
Contrast matrixIncluded
Color vision simulationIncluded
Structured exports and optionsJSON, DTCG, Style Dictionary, JS/TS
Manual role mappingIncluded

Compare plans

Do my colors leave this browser?

Calculations run in your browser. Guest projects stay local; account projects sync to the cloud and your other devices.

What happens at three free projects?

Nothing is deleted. Keep working in an editable project, back up your data, or view plans for more projects.

Does passing every check make my site accessible?

Checks cover the listed role pairs. APCA is shown as experimental guidance, not a WCAG verdict.

Can I bring an existing palette?

Paste CSS variables or JSON. Every parsed color is previewed before it is added, and locked colors are never overwritten.

Bring the brand color you have.
Leave with a theme you can ship.

Free, no sign-up, and no color uploads.

Start from a brand color/workspace

One brand color.A complete UI palette.

Ship your next idea.

Ship your next idea.

Every step reads the same project.

Palette

Scales

Check

Theme

Export

Your brand stays. Every role clears contrast.

A place for your next idea.

A place for your next idea.

Paste it into the stack you already use.

Every rainbow you have ever shipped is uneven.

Free covers the whole path.

Bring the brand color you have.Leave with a theme you can ship.

One brand color.
A complete UI palette.

Bring the brand color you have.
Leave with a theme you can ship.