OKLCH Scale Generator

Perceptually uniform 50-950 scales with chroma curves, hue shift and WCAG analysis

OKLCH Perceptual Scale Generator

Generate perceptually uniform color scales with hue shift, chroma curves, WCAG analysis and multi-format export.

Quick Presets

Base Color

Chroma Boost: 1.00x

MutedVibrant

Chroma Curve

Lightest (50): 97%

Darkest (950): 15%

Hue Shift: 0°

CoolNoneWarm

8 color(s) are outside sRGB gamut and have been clipped. Reduce chroma or adjust lightness.

Preview Background

50#C8F7FF

100#A3DBFF

200#80BFFF

300#60A3FF

400#4288FB

500#276EE0

600#0954C2

700#003CA2

800#002580

900#000F5D

950#000039

AAA

#C8F7FF

oklch(0.970 0.113 259.8)

1.2:118.2:1

AAA

100

#A3DBFF

oklch(0.888 0.140 259.8)

1.5:114.1:1

AAA

200

#80BFFF

oklch(0.806 0.161 259.8)

1.9:110.8:1

AAA

300

#60A3FF

oklch(0.724 0.176 259.8)

2.6:18.2:1

400

#4288FB

oklch(0.642 0.185 259.8)

3.4:16.1:1

500

#276EE0

oklch(0.560 0.188 259.8)

4.8:14.4:1

600

#0954C2

oklch(0.478 0.185 259.8)

6.9:13.1:1

AAA

700

#003CA2

oklch(0.396 0.176 259.8)

9.7:12.2:1

AAA

800

#002580

oklch(0.314 0.161 259.8)

13.3:11.6:1

AAA

900

#000F5D

oklch(0.232 0.140 259.8)

17.1:11.2:1

AAA

950

#000039

oklch(0.150 0.113 259.8)

19.8:11.1:1

Why OKLCH?

• Perceptually uniform: equal steps look equally different
• Better for accessibility: predictable contrast ratios
• Hue stability: colors don't shift when adjusting lightness
• Native CSS support: oklch() function in modern browsers
• Used by Tailwind v4, Figma, and CSS Color Level 5

How it works

OKLCH is a perceptually uniform color space revolutionizing web design. This tool generates professional 50-950 scales with advanced controls: chroma curves, hue shift, WCAG analysis and 5 export formats.

What does OKLCH mean?

O: Oklab (the base color space)
L: Lightness (0-1)
C: Chroma (saturation/vividness)
H: Hue (0-360°)

Tool Controls

Base color + presets: Choose your color or pick from 8 quick presets
Chroma boost: Control overall scale saturation (0.3x to 1.8x)
4 chroma curves: Bell, Linear, Ease In or Ease Out to control how saturation varies
Lightness range: Adjust the lightest (50) and darkest (950) steps
Hue Shift: Gradually rotate hue across the scale (-30° to +30°) for warmer or cooler scales
Gamut warnings: Detects colors outside the sRGB space

4 Analysis Tabs

Scale: Visual view with configurable background + detailed cards with WCAG AA/AAA badges and contrast ratios
Curves: SVG graph of lightness and chroma across the scale + hue values
HSL vs OKLCH: Side-by-side comparison showing OKLCH's perceptual superiority
Export: CSS Variables (HEX/OKLCH), Tailwind Config, SCSS and Design Tokens JSON

💡 Practical Examples

Case 1: Brand palette with hue shift

Your brand color is #3B82F6 (Blue). Apply +15° hue shift so lighter shades lean cooler and darker shades lean warmer, creating a more natural and professional scale.

Case 2: Verify WCAG accessibility

Each step shows AA/AAA badges for white and black text. Use steps 500-950 with white text (pass AA) and 50-400 with black text. Exact ratios are shown on each card.

Case 3: Chroma curve for UI

Use the "Bell" curve so extreme colors (50, 950) are more neutral and central ones (400-600) are most vibrant. Ideal for buttons, alerts and CTAs.

Frequently Asked Questions

Why is OKLCH better than HSL for creating palettes?

HSL is not perceptually uniform: a yellow with L=50% looks much lighter than a blue with L=50%. OKLCH fixes this. You can verify it in the "HSL vs OKLCH" tab of this tool.

What is Hue Shift?

It allows the hue to gradually rotate across the scale. For example, +15° makes darker shades lean towards warmer tones. Brands like Stripe and Vercel use this technique for more natural palettes.

What are chroma curves?

They control how saturation varies across the scale. "Bell" (default) maximizes vividness in mid-tones. "Linear" keeps constant saturation. "Ease In" saturates darks more. "Ease Out" saturates lights more.

Which browsers support OKLCH?

All modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). For older browsers, export as HEX (CSS Variables). The "Export" tab offers both formats.

What does "outside sRGB gamut" mean?

It means the lightness and chroma combination produces a color that sRGB displays cannot show. The tool clips it automatically and shows a warning. Reduce chroma boost to avoid it.

What export formats are available?

CSS Variables (HEX), CSS Variables (native OKLCH), Tailwind Config, SCSS Variables and Design Tokens JSON. All copy to clipboard with one click.