Why use this tool?
- Build light and dark variants with consistent token names.
- Choose an anchor step for an existing brand color.
- Compare black and white text contrast before assigning a step to a component.
Color Scale Generator
Build an 11-step color scale from a brand color using OKLCH. Compare contrast against black and white, then export CSS, Tailwind v3/v4, SCSS, or JSON.
Runs locally in your browser
Base color
Saturation 69 percent, brightness 90 percent, hue 243 degrees.
Scale settings
Base color reads as OKLCH lightness 51.1% with chroma 0.230.
Scale
50
100
200
300
400
500
600
700
800
900
950
| Step | HEX | On white | On black | Text on it |
|---|---|---|---|---|
| brand-50 | #F2F6FF | 1.08 | 19.40AA | Black · 19.4:1 |
| brand-100 | #E5EDFF | 1.17 | 17.89AA | Black · 17.9:1 |
| brand-200 | #CFDCFF | 1.37 | 15.33AA | Black · 15.3:1 |
| brand-300 | #B3C2FF | 1.74 | 12.08AA | Black · 12.1:1 |
| brand-400 | #929BFF | 2.51 | 8.35AA | Black · 8.4:1 |
| brand-500 | #7677FF | 3.59 | 5.85AA | Black · 5.9:1 |
| brand-600 | #6159FF | 4.79AA | 4.38 | White · 4.8:1 |
| brand-700Base | #4F46E5 | 6.29AA | 3.34 | White · 6.3:1 |
| brand-800 | #3D34B7 | 8.85AA | 2.37 | White · 8.8:1 |
| brand-900 | #2F2892 | 11.42AA | 1.84 | White · 11.4:1 |
| brand-950 | #161154 | 16.90AA | 1.24 | White · 16.9:1 |
In context
The same steps used the way a design system would.
Tinted panel
Background brand-50, border brand-200, text brand-900.
Dark surface
Background brand-950, heading brand-50, body brand-300.
Export tokens
@theme {
--color-brand-50: #F2F6FF;
--color-brand-100: #E5EDFF;
--color-brand-200: #CFDCFF;
--color-brand-300: #B3C2FF;
--color-brand-400: #929BFF;
--color-brand-500: #7677FF;
--color-brand-600: #6159FF;
--color-brand-700: #4F46E5;
--color-brand-800: #3D34B7;
--color-brand-900: #2F2892;
--color-brand-950: #161154;
}Complete tool guide
Color Scale Generator guide
Create an 11-step color scale from one brand color, with steps from 50 through 950. The generator uses an OKLCH lightness and chroma curve, then converts the results into sRGB for preview and export. Use the ramp as a starting point for interface tokens.
Your input is processed in the current browser tab and is not sent to the application server.
Common use cases
- Expanding a single brand color into a full design-system ramp
- Producing Tailwind or CSS custom-property tokens for a new theme
- Checking which steps are safe for text before assigning roles
- Matching an existing palette by locking its value into the ramp
How to use it
- 1
Set the base color with the picker, or paste an existing brand value.
- 2
Name the scale, and choose which step the base color should occupy.
- 3
Adjust the hue shift and chroma if the light or dark end needs warming.
- 4
Copy the export format your project uses.
Controls and results explained
Anchor step
Auto selects the step closest to the base color’s lightness. With hue shift at 0 and chroma at 100%, the anchor preserves the exact base value.
Hue shift and chroma
Hue shift rotates colors across the ramp, and chroma changes color intensity. These adjustments can also change the anchor color; compare its value after editing.
Export format
Choose CSS variables, SCSS, JSON, Tailwind v4 @theme, or the Tailwind v3 configuration snippet. Previewed OKLCH values describe the resulting colors; the token exports use HEX.
Worked examples
Preserve a brand color at step 500
Start with: #4F46E5, scale name brand
- Set the base to #4F46E5 and the anchor to 500.
- Keep hue shift at 0 and chroma at 100%; export CSS variables.
--brand-500: #4F46E5;The output is one declaration from the generated scale. Changing hue shift or chroma removes the exact-value guarantee.
Export a Tailwind v4 color
Start with: #4F46E5 anchored at 500, name brand
- Keep hue shift 0 and chroma 100%.
- Choose Tailwind v4 in the output panel.
@theme {
--color-brand-500: #4F46E5;
}This excerpt registers a theme color usable through utilities such as bg-brand-500. The full output also includes the other ten steps.
Interpreting 50–950
Numbers order a ramp from light to dark. They are naming conventions, not contrast grades. A 500 step in one hue can have very different contrast from a 500 step in another.
How the ramp is generated
A fixed lightness and chroma curve is adjusted around the selected base. Hue and chroma controls tune the results. This is a generated starting point, not an exact copy of every Tailwind color family.
Using the contrast columns
Each row compares the color against white and black. Read the applicable ratio rather than selecting text color by step number. Test other backgrounds with the contrast checker.
Practical tips for better results
- Start with hue shift 0 and chroma 100% if preserving an approved HEX value matters.
- Try light steps as surfaces and darker steps as text, then validate the pair.
- Check the exported Tailwind version against the project where you will paste it.
Frequently asked questions
Why does my brand color change after adjusting the controls?
Exact preservation applies at the anchor when hue shift is 0 and chroma is 100%. Other settings modify generated colors, including the anchor.
Can I export OKLCH tokens?
The current token exports use HEX. The preview shows OKLCH values for inspection; convert a selected step with the Color Converter if you need its OKLCH notation.
Is every 500 step suitable for a white button label?
No. Step numbers do not establish contrast. Use the white-text ratio for that specific color and the threshold required by your text size.
What to check before using the result
- Some generated OKLCH colors exceed sRGB; conversion can reduce or alter the intended color separation.
- The preview is a sample interface. It does not validate all semantic combinations in your design.
References and further reading
Keep working
Related color & design
Continue with another focused tool from the same collection.
Color Palette GeneratorGenerate coordinated palettes from harmony rules, then lock and export them.Image Color ExtractorPull a dominant color palette out of any photo, screenshot, or logo.Color Picker and ConverterPick a color visually and convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.Color Contrast CheckerCheck WCAG 2.1 and 2.2 text contrast, explore suggested fixes, and view a separate APCA estimate.