#6d28d9
Runs locally — nothing is uploaded
Result
Pick a base color.
How to use
- 1Pick a base color.
- 2Choose a scheme: shades only, or a harmony where each color gets its own scale.
- 3Set the number of steps: 10 or 11 give Tailwind-style names from 50 to 900 or 950.
- 4Click a swatch to copy its hex, or copy the CSS variables.
Each step gets a fixed OKLCH lightness, close to Tailwind's scales, with chroma lowered towards the lightest and darkest steps. Your base color is kept exactly at the step nearest to its lightness.
HSL lightness is not perceptual: yellow and blue at the same HSL lightness look very different. OKLCH steps look even across hues, so scales for different colors match each other.
Its chroma is reduced until it fits sRGB, keeping its lightness and hue.
Related tools
Contrast checkerWCAG AA/AAA contrast ratio, plus APCAColor converterHEX, RGB, HSL, OKLCH and CMYK in one goType scaleModular font sizes with a live previewCSS clamp() generatorFluid sizes between two viewport widthsPX to REM converterBatch px ⇄ rem for any root sizeAspect ratio calculatorSimplify W:H and resize without distortion
Let's make something good
Tell us about your project — we reply within one business day.