OKLCH.xyz

OKLCH Color Picker, Converter & Palette Generator

Convert any CSS color to OKLCH, generate contrast-audited color scales, and export production-ready Tailwind CSS, Shadcn and design tokens.

Recent
Use this color
#3b82f6
ConvertPaletteTailwind v4ContrastGamut
sRGB
Boundaries
oklch(0.623 0.188 259.81)
#3b82f6
HEX#3b82f6
RGBrgb(23.137% 50.98% 96.471%)
HSLhsl(217 91.2% 59.8%)
OKLABoklab(62.3% -0.033 -0.185)
Display P3color(display-p3 0.305 0.503 0.934)
Gamut
sRGBIn gamutP3In gamutRec.2020In gamut
Contrast (WCAG 2.1)
on white3.68:1AA Largeon black5.71:1AA

What do you want to build?

Generate a palette

Build a 50–950 production scale from one color.

Create a Tailwind theme

Export an OKLCH @theme block for Tailwind v4.

Check accessibility

WCAG & APCA contrast, plus nearest accessible color.

Convert a color

HEX, RGB, HSL, OKLCH, LAB, LCH and Display P3.

Build a Shadcn theme

Generate complete light and dark semantic tokens.

Migrate a CSS file

Convert stylesheet colors safely with fallbacks and diff.

One color → production scale

Every stop is gamut-mapped and includes black/white contrast data.

Open generator →
50
19.6:1
100
16.9:1
200
13.0:1
300
9.9:1
400
7.6:1
500
5.7:1
600
5.8:1
700
8.6:1
800
12.4:1
900
16.5:1
950
18.2:1

Preview it in real UI

Design system ready

Buttons, inputs, alerts, cards and semantic states in light and dark mode.

Secondary

Export without cleanup

Tailwind v4, Shadcn, CSS variables, SCSS, JSON Tokens and Style Dictionary.

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.976 0.015 225.93);
  --color-brand-100: oklch(0.926 0.038 247.2);
  --color-brand-200: oklch(0.842 0.08 254.37);
  --color-brand-300: oklch(0.765 0.121 257.47);
Tailwind v4ShadcnDesign Tokens

Why OKLCH?

Predictable lightness

Equal lightness steps look equally light — unlike HSL, where hue skews perceived brightness.

Better palettes

Scales stay on-hue and evenly spaced, so 50–950 ramps look intentional, not muddy.

Wide-gamut ready

Reach vivid Display P3 and Rec.2020 colors with a clean sRGB fallback.

Frequently asked questions

What is OKLCH?

OKLCH is a CSS Color 4 model with Lightness, Chroma and Hue built on the perceptually-uniform Oklab space. Equal numeric changes produce roughly equal visual changes.

How do I convert HEX to OKLCH?

Paste any hex value above. It is parsed and shown as oklch(L C H) with copyable HEX, RGB, HSL and P3 alongside.

Is OKLCH supported in browsers?

Yes — oklch() is supported in all current major browsers. Provide an sRGB fallback for older ones; this tool can generate it.

Does OKLCH guarantee WCAG compliance?

No. OKLCH makes contrast easier to reason about, but you must still check ratios. Use the contrast checker for exact WCAG 2.1 and APCA values.

What happens outside sRGB?

Colors are gamut-mapped using the CSS Color 4 algorithm (chroma reduction in OKLCH), not naive channel clipping, keeping hue and lightness stable.