OKLCH Scale Generator
Generate production-ready 50-950 OKLCH color scales with export options for CSS variables, Tailwind, and design tokens.
How to use
Pick a base tone
Adjust the OKLCH lightness, chroma, and hue values to define the middle of your color scale.
Choose a scale style
Switch between balanced, soft, vivid, and neutral presets depending on whether you are building a brand scale, interface scale, or muted system.
Review the 50-950 steps
Inspect every generated shade, copy individual values, and quickly spot colors that would fall outside the sRGB gamut.
Export with your token prefix
Set a prefix and export the full scale as CSS custom properties, Tailwind v4 theme variables, or JSON design tokens.
Ship with confidence
Use the built-in preview and workflow notes to turn a single base color into a usable product-ready color system.
Live system preview
See the scale as a real interface instead of isolated swatches.
A useful scale needs clean backgrounds, readable surfaces, and stronger action colors. This preview helps you judge all three together.
Surface stack
Use 50-200 for backgrounds and low-emphasis surfaces, then reserve the middle steps for accent moments.
50-200
Use the lightest steps for soft canvases, section backgrounds, and neutral breathing room.
Surface
#e7f2ff
Accent
#388cf0
Text
#022c5b
Primary action
500-700 usually works well for primary buttons, links, and selected states.
brand-500
#388cf0
brand-700
#1458a5
50
100
200
300
400
500
600
700
800
900
950
Base Color
Tune the anchor color first, then let the generator build the full range around it.
Exports will use the prefix `brand`.
A reliable product scale with enough contrast spread for app interfaces and marketing surfaces.
Generated Scale
Click any step to copy it in your preferred format.
Export the full scale
Move from experimentation to implementation without rewriting the values by hand.
Swatch Copy Format
HEX
A practical workflow
Start from one solid brand tone
Pick the hue and chroma that best represent the core personality of your product.
Generate the full ladder
Let the scale fill in lighter backgrounds, stronger accents, and darker text-supporting shades.
Map steps to product roles
Assign 50-200 to surfaces, 400-600 to brand accents, and 700-950 to text, borders, or dark UI layers.
Export and reuse
Carry the same values into CSS variables, Tailwind, or token pipelines so the system stays consistent.
Quick naming sample
A clean prefix makes the scale easier to adopt across apps, design files, and component libraries.
If you are shipping to the web, keep sRGB clamping on unless you have a P3-specific strategy.