CSS Variables Generator
Turn one brand colour into a full 50–950 shade scale that keeps your exact colour, spaced evenly in OKLCH, with text contrast for every shade, a live UI preview and CSS, SCSS, Tailwind or JSON to copy.
How to Use
- Enter your brand colour in any CSS format. It is placed at the step that matches its lightness and kept exactly.
- Choose the number of steps (5, 9, 10 or 11; 11 gives Tailwind’s 50–950) and the name used for the variables.
- Adjust the lightest and darkest lightness if you want paler tints or deeper shades.
- Each shade shows whether white or black text reads better on it, with the contrast ratio. The preview card uses the scale the way an interface would.
- Copy the scale as CSS custom properties (hex or oklch values), SCSS, a Tailwind colours block, JSON or a hex list.
Worked Example
An 11-step scale from #3B82F6, whose OKLCH lightness is 62.3%.
The default lightness curve runs from 97% (step 50) to 28% (step 950). Step 500 sits closest to 62.3%, so it becomes exactly #3B82F6. Steps 50–400 are spread between 97% and 62.3% on the curve, and steps 600–950 between 62.3% and 28%.
Chroma is the base’s 0.188, tapered towards both ends, so step 50 is a pale #EFF6FF rather than a garish one, and step 950 a deep #0D2752. White text first reaches 4.5:1 at step 600 (#256AD8), so that is the lightest shade to use for a primary button with white text.
Show Work
Formulas
Numbered Colour Scales
Google’s Material Design (2014) popularised numbering colour shades from 50 to 900, like font weights, so designers could say “blue 700” instead of inventing names. Tailwind CSS adopted the convention in 2017 and added 950 in 2022; most component libraries now use it.
CSS custom properties (variables), supported in all browsers since 2017, made such scales live tokens rather than copy-pasted values: change --brand-600 once and every button follows. Tailwind’s version 4 (2025) defines its palette in OKLCH for the same reason this tool uses it — even perceived steps across every hue.
About This Tool
This tool builds a 5- to 11-step shade scale from any CSS colour, keeping that colour exactly at the step that matches its lightness and spacing the other steps along a curve in OKLCH (or HSL). Chroma tapers towards the light and dark ends and is reduced further wherever a shade would fall outside sRGB.
Each step shows its best text colour and contrast ratio, a preview card shows the scale in use, and the scale copies as CSS custom properties in hex or oklch, SCSS, Tailwind, JSON or a hex list. Everything runs in your browser.
Related tools: Tailwind CSS Colors, Color Palette Generator, and Contrast Checker.
Frequently Asked Questions
Why generate a shade scale instead of picking colours by hand?
Consistency. A hand-picked scale almost always has one step that jumps or stalls. A computed scale steps lightness evenly, so --brand-200 and --brand-300 relate the same way as --brand-700 and --brand-800, and components built on the tokens look balanced everywhere.
Why OKLCH instead of HSL?
HSL lightness does not match how bright a colour looks: an HSL scale for yellow looks far lighter than one for blue at the same numbers, and its steps are uneven. OKLCH lightness is perceptual, so equal steps look equal and a blue scale and a yellow scale line up. HSL is offered for comparison and for matching older systems.
Is my exact colour kept?
Yes. The tool finds the step whose lightness is closest to your colour (often 500 or 600) and uses your colour unchanged there. The lighter steps are spaced between it and the lightest value, the darker ones between it and the darkest, so the scale always passes through your brand colour.
Why do the lightest and darkest shades look less colourful?
On purpose. Very light and very dark colours cannot hold much chroma on a screen, and fully saturated tints look garish. The tool reduces chroma towards both ends, as hand-tuned scales such as Tailwind’s do, and lowers it further if a shade would fall outside the sRGB gamut.
How do I use the variables?
Paste the :root block into your stylesheet and use var(--brand-600) wherever you need the colour. A common pattern: 50 for page tints, 100–200 for borders and badges, 500–600 for buttons and links, 700–900 for text on light backgrounds. In Tailwind, put the block under theme.extend.colors and write bg-brand-600.
How do I use the CSS Variables Generator?
Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Design systems
Make an 11-step brand scale from one logo colour such as #3B82F6, kept exactly at step 500.
Tailwind themes
Paste the generated block into theme.extend.colors and use bg-brand-50 to bg-brand-950 like the built-in colours.
Accessible buttons
Read off which shade first gives 4.5:1 contrast with white text: that is the lightest shade you can use for a primary button.
Dark mode
Reuse the same scale reversed: 900 for backgrounds, 300 for accents, 50 for text.
Last updated: