Generate a UI colour scale

From one HEX colour: eleven shades (50–950), light and dark preview, contrast check, and Tailwind v4 / CSS / JSON export.

Base colour

Pick base colour

HEX

Colour scale

Shade 500 is the base colour.

50
#F5F9FF
100
#D8E7FF
200
#B9D4FF
300
#94BDFE
400
#6AA0F7
500Base
#3B82F6
600
#1F5DC1
700
#073B89
800
#001D50
900
#00071F
950
#000104

Export

Token name

Export format

Tailwind v4CSS variablesJSON

@theme {
    --color-brand-50: #F5F9FF;
    --color-brand-100: #D8E7FF;
    --color-brand-200: #B9D4FF;
    --color-brand-300: #94BDFE;
    --color-brand-400: #6AA0F7;
    --color-brand-500: #3B82F6;
    --color-brand-600: #1F5DC1;
    --color-brand-700: #073B89;
    --color-brand-800: #001D50;
    --color-brand-900: #00071F;
    --color-brand-950: #000104;
}

brand-theme.css

UI preview

Light · background 50

Heading 900

Body 700 on a card with border 200.

Dark · background 900

Heading 50

Body 200 on a card with border 700.

Shades used are labelled. This preview is not a contrast certificate.

Contrast

One pair, not the scale.

ForegroundForeground HEX

BackgroundBackground HEX

The quick brown fox

Ratio 18.93:1

AA normal Pass
AA large Pass
AAA normal Pass
AAA large Pass

This check is for the selected pair only. It does not mean the whole colour scale is accessible.

How the scale works

Shade 500 is your base colour. Lighter shades step toward white; darker shades toward black. Hue is held in OKLCH. Check contrast for the pairs you actually ship.

Frequently asked questions

What is shade 500?

The anchor. It matches the base HEX exactly.

Why didn’t the palette change when I typed?

Invalid HEX keeps the last valid colour scale so a typo cannot wipe it.

Which export should I use?

Tailwind v4 for @theme tokens, CSS variables for any stack, JSON for design tools. Switching format never changes the colours.

Does a Pass mean my UI is accessible?

No. It means that one pair meets that threshold. Layout, size and other WCAG criteria are on you.