OKLCH Color Generator

About OKLCH color generator

Adjust lightness, chroma, hue and alpha with sliders that show where each value falls outside sRGB or display-p3, then read the color in ten formats. It also builds an eleven-step lightness ramp and exports it as Tailwind v4, shadcn or plain CSS tokens. It is for developers adopting modern CSS color.

How to use it

1. Move the Lightness (0 to 1), Chroma (0 to 0.4), Hue (0 to 360) and Alpha sliders, or click a Quick pick swatch.
2. Or type into the OKLCH box, or into Any other format, which accepts hex, rgb(), hsl(), oklab() and named colors.
3. Under Formats, press the copy button beside OKLCH, OKLab, HEX, RGB, HSL, Lab, LCH, display-p3, Linear RGB or Figma P3.
4. Check Gamut for the fallback hex and the ready-made @supports block when your color exceeds sRGB.
5. Type a Token name, choose Tailwind v4, shadcn or CSS variables, and copy the ramp.

A familiar blue in OKLCH

#3b82f6 typed into Any other format

oklch(62.31% 0.188 259.81)

When to use it

• Converting an existing hex brand color to oklch() for a Tailwind v4 theme.
• Finding the most saturated version of a hue that still fits inside sRGB.
• Shipping a vivid display-p3 accent with a safe hex fallback for older screens.
• Sharing an exact color with a teammate through the address bar link.

Questions about OKLCH color generator

What do the striped bands on the sliders mean?

They mark values that cannot be shown. A heavy stripe is outside display-p3 and a light stripe is inside display-p3 but outside sRGB, and a caption lists the safe ranges.

Why does the hex differ from my chosen chroma?

When a color lies outside sRGB, the HEX, RGB, HSL and Linear RGB rows are gamut-mapped by lowering chroma and keeping hue and lightness, and the row is labeled accordingly.

How does the shareable link work?

The tool writes the color into the page hash as lightness, chroma, hue and alpha percent separated by commas. Opening that URL restores the same color.

What does the shadcn export contain?

A :root block with steps 50 to 950 and a .dark block that mirrors the ramp, so step 50 in light equals step 950 in dark.

How are the ramp lightness values chosen?

They are fixed targets from 0.971 down to 0.269 that follow Tailwind's ramp, applied with your chroma and hue and pulled into sRGB per step.

Related tools

• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• Color palette generatorGenerate harmonious color palettes — shades, tints, complementary, analogous, and triadic from any seed color
• Favicon generatorCreate favicons from text, emoji, or images — export as PNG or ICO at multiple sizes
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color