Dark Mode Palette
Builds a 50–950 ramp from one colour and mirrors it into a dark one, so each token pair keeps its contrast.
Derives a dark scale from a light one by mirroring it: step 50 becomes 950, 100 becomes 900, and so on. That is the only derivation that keeps the *contract* of the token names, so a pair that passed WCAG in light mode passes with the same ratio in dark mode and a component written against the scale needs no change. This is the same page as the tint and shade scale, opened on the dark tab.
Base colour
Its hue and chroma seed the ramp; its lightness decides which step is marked as the one you picked.
Ramp
The lightness targets are the mean of Tailwind's own chromatic families, measured from the installed package rather than chosen here.
Dark mode
Step 50 becomes step 950, 100 becomes 900, and so on. The token names keep their meaning — 500 is still the mid-tone — and a component written against the scale needs no change at all.
Light
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Dark
50
100
200
300
400
500
600
700
800
900
950
Why mirroring: the contrast of a token pair is preserved
- 50 on 900: light 8.93 · dark 12.73
- 100 on 800: light 6.68 · dark 7.19
- 200 on 950: light 11.16 · dark 7.19
The token names keep their meaning, so a component written against the scale needs no change at all.
Export
Looking for a set of hues rather than one hue's ramp? The palette generator builds harmonies. To find the closest Tailwind token to any of these, the nearest-colour lookup measures it in ΔE.
How to use it
Put the base colour in
One colour. The light ramp is built first and the dark one is derived from it, so both come out of the same seed rather than being maintained separately.
Choose the strategy
Mirror is the default and the one with the contrast argument behind it. Shift darker moves every step down three positions instead, which keeps the ordering so a light-to-dark gradient does not reverse, at the cost of the darkest steps. Mirror and mute is mirroring with the chroma pulled further down.
Damp the chroma for large fills
Saturated colour on a dark surface glows and vibrates, and the effect gets worse the larger the area. Pulling chroma down is the conservative call; leave it near 100% if the scale is only used for small accents and text.
Read the proof panel
With mirroring on, it prints the WCAG ratio of three token pairs in both modes side by side. That is the claim being checked in front of you rather than asserted.
Export both scales at once
The CSS forms emit the light scale in `:root` and the dark one inside a `prefers-color-scheme: dark` block, so the whole theme is one paste.
Common questions
Can I paste in the light palette I already have?
Not as a set. This page takes one colour and builds both ramps from it, so an existing palette with hand-tuned steps will not survive being fed in one colour at a time — you would get eleven regular steps, not your eleven. Where the existing palette matters more than the regularity, convert it a token at a time and check each pair in the contrast checker.
Does mirroring preserve contrast exactly?
Closely, not exactly. The ramp is symmetric in OKLCH lightness, and WCAG contrast is computed on relative luminance, which is not a linear function of it — so the ratios come out near each other rather than identical. The proof panel prints both numbers so you can see the gap for your colour instead of taking the claim on trust.
Should I use pure black as the dark background?
Usually not. Pure black against light text maximises the contrast, and on an LCD the halation that produces makes small type harder to read, not easier. The dark strip here is previewed on a very dark grey for that reason. An OLED phone is the one case where true black buys something real, in power.
Why is this a separate page from the tint and shade scale?
It is not — it is the same tool with the dark tab already on, because "make me a dark palette" and "make me a 50-950 ramp" arrive as different questions from different people. Everything on one page is on the other.
Feed it from
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.
Tint & Shade Scale
Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.
CSS Token Extractor
Pulls colours, spacings, radii and fonts out of a stylesheet and proposes a custom-property set.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Next
These accept what this tool produces, so the result can go straight in.
Tint & Shade Scale
Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.
CSS Token Extractor
Pulls colours, spacings, radii and fonts out of a stylesheet and proposes a custom-property set.
Palette Generator
Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.