OKLCH Color Picker & Converter
Pick colors in OKLCH, convert HEX, RGB and HSL to OKLCH, see where sRGB ends and Display P3 begins, and build a matching 50 to 950 palette.
Reads HEX, RGB, HSL, OKLCH, OKLab, Lab, LCH, color(display-p3 …) and CSS color names.
Lightness × Chroma at hue
sRGB edge P3 edgeUp is lighter, right is more vivid. Inside the solid line, the color shows the same on every screen. Between the lines it needs a wide-gamut (P3) screen. Empty space is beyond P3.
Every format
CSS with fallback
Contrast
Aa Text
on white
Aa Text
on black
Palette from this color
Eleven shades with the same hue and evenly stepped lightness, kept inside sRGB. Click a shade to edit it.
OKLCH Color Picker at a Glance
In Short
The ToolWeb OKLCH Color Picker converts HEX, RGB, HSL, Lab and LCH to OKLCH and back, shows where sRGB and Display P3 end for every lightness and chroma, gives an accurate sRGB fallback, and builds an 11-shade palette, all in your browser.
- check_circle Every format: OKLCH, OKLab, HEX, RGB, HSL, Display P3, CIE Lab and CIE LCH with one-click copy.
- check_circle Gamut chart: see the sRGB and P3 edges for the current hue and drag to pick.
- check_circle Accurate fallback: CSS Color 4 gamut mapping lowers only chroma, keeping lightness and hue.
- check_circle Palette export: 50 to 950 shades as CSS variables, Tailwind v3 or v4, or JSON.
Front-end developers, UI designers and design-system teams moving colors to OKLCH or building Tailwind palettes.
100% Client-Side. No data, files, or telemetry ever leave your device or touch a server.
OKLCH, OKLab, HEX, RGB, HSL, Display P3, CIE Lab, CIE LCH, CSS named colors
How to Use OKLCH Color Picker
-
1
Enter a starting color
Paste a HEX, RGB, HSL, OKLCH, Lab or LCH value, or a CSS name such as "tomato", into the box at the top. You can also open your system color picker or press the shuffle button for a random color.
-
2
Adjust lightness and chroma on the chart
Drag on the chart to set lightness (up and down) and chroma (left and right) at the current hue. The solid line marks the edge of sRGB and the dashed line the edge of Display P3.
-
3
Fine-tune with the sliders
Use the L, C, H and alpha sliders, or type exact numbers. Each slider track shows the colors you would get by moving it, so you can see where a change leads.
-
4
Check the gamut and fallback
The badge tells you whether the color fits sRGB, needs a P3 screen, or is beyond P3. When it is outside sRGB, the tool shows the closest sRGB fallback, which you can apply with one click.
-
5
Copy the format you need
Copy OKLCH, HEX, RGB, HSL, Display P3, OKLab, Lab or LCH, or copy the ready CSS block that writes a HEX fallback before the OKLCH value.
-
6
Export a palette
Name your palette and copy its eleven shades (50 to 950) as CSS variables, a Tailwind v4 @theme block, a Tailwind v3 config or JSON.
OKLCH Color Picker Features
-
Converts Every Format
OKLCH, OKLab, HEX, RGB, HSL, Display P3, CIE Lab and CIE LCH, in both directions.
-
sRGB and P3 Edges
The chart draws exactly where sRGB and Display P3 end for the current hue.
-
Perceptual Sliders
Lightness that looks even across hues, so contrast stays predictable when you edit.
-
Accurate Fallback
CSS Color 4 gamut mapping keeps lightness and hue and lowers only chroma.
-
Palette Generator
Eleven shades from 50 to 950 with CSS, Tailwind v3, Tailwind v4 and JSON export.
-
Contrast at a Glance
WCAG ratios against white and black with AA and AAA grades.
-
Shareable Links
The exact color is kept in the page address, so a copied link reopens it.
-
No Upload
Every calculation runs in your browser. Nothing is sent to a server.
Guide to OKLCH Color Picker
What Is OKLCH?
Direct Answer: OKLCH is a color format built on how people actually see color. It describes a color with three values:
- L, lightness from 0 (black) to 1 (white). Equal L values look equally light, whatever the hue.
- C, chroma from 0 (grey) upward. Real screen colors stay under about 0.37.
- H, hue as an angle from 0 to 360. Roughly: red near 20, yellow near 90, green near 140, blue near 250 and purple near 320.
It is the polar form of the OKLab color space, published by Björn Ottosson in 2020 and adopted in CSS Color Level 4. In CSS you write it as oklch(0.7 0.15 250), or oklch(0.7 0.15 250 / 50%) with transparency.
Why Designers Are Moving From HEX and HSL to OKLCH?
Direct Answer: OKLCH makes colors predictable to edit and unlocks brighter colors on modern screens.
- Even lightness. In HSL,
hsl(60 100% 50%)(yellow) looks far brighter thanhsl(240 100% 50%)(blue), even though both say 50% lightness. In OKLCH the same L looks the same, so text contrast does not break when you change a hue. - Easy palettes. To make a darker or lighter shade, change only L. To make a muted version, lower only C. The hue does not drift.
- Wide gamut. HEX, RGB and HSL can only describe sRGB. OKLCH can also describe Display P3 colors, which recent iPhones, Macs and many Android phones can show, with up to about 50% more vivid greens and reds.
- Readable code.
oklch(0.55 0.2 250)tells you at a glance that this is a mid-light, fairly vivid blue.#2563ebdoes not.
How to Read the Gamut Chart?
Direct Answer: The chart shows every lightness (top to bottom) and chroma (left to right) for the current hue.
- Inside the solid line the color is in sRGB. It looks the same on every screen and can be written as HEX.
- Between the solid and dashed lines the color is in Display P3. Wide-gamut screens show it at full strength, and other screens show a slightly duller version.
- The empty area is beyond P3. No common screen can show these colors.
The edges change with hue. Yellows reach high chroma only when they are light, while blues reach it when they are dark, so the shape of the area moves as you drag the hue slider.
What Is an sRGB Fallback and When Do You Need One?
Direct Answer: A fallback is the color older browsers, sRGB-only formats and normal screens use when your color is outside sRGB.
A simple way to make one is to clip each RGB channel to the 0 to 255 range, but that shifts the hue and lightness. This tool uses the CSS Color 4 gamut-mapping method instead: it keeps lightness and hue and lowers chroma until the color fits, so the fallback looks like a slightly calmer version of the same color.
The CSS with fallback block writes the HEX value first and the OKLCH value second. Browsers that understand OKLCH use the second line, and older ones keep the first.
Building a Tailwind or CSS Palette With OKLCH?
Direct Answer: The palette generator turns one color into eleven shades named 50 to 950, the same naming Tailwind uses.
It keeps your hue, sets lightness from about 0.97 for shade 50 down to about 0.26 for shade 950, and scales chroma so the 500 and 600 shades are the most vivid while the lightest and darkest shades stay calm. Each shade is limited to sRGB so it looks right everywhere. Tailwind CSS v4 defines its own default colors in OKLCH, so the @theme export drops straight into a v4 project.
Tips for Using OKLCH in Real Projects
Direct Answer: A few habits make OKLCH easy to adopt:
- Keep L for contrast. As a rough guide, text on white needs an L of about 0.55 or lower to reach WCAG AA. Confirm with the Contrast Checker.
- Change one value at a time. Hover and active states usually only need L moved by 0.05 to 0.1.
- Use P3 on purpose. Save the most vivid P3 colors for accents and calls to action, and keep body colors in sRGB.
- Store OKLCH, export HEX. Keep OKLCH in your CSS and design tokens, and copy the HEX output for tools that still need it.
- Blend in OKLCH. Gradients written as
linear-gradient(in oklch, …)avoid the grey middle you get in sRGB. Try them in the Gradient Generator.
Why use ToolWeb for OKLCH Color Picker
Built for speed, privacy, and zero friction — no accounts, no uploads, no cost.
Every conversion runs in your browser. No color data reaches a server.
Math follows CSS Color Level 4, including its gamut-mapping method.
Convert and export as many colors and palettes as you like.
Open the page and start picking. No sign-up or extension.
After the page loads, the tool keeps working without internet.
The chart and sliders work with touch, mouse and keyboard.
Frequently Asked Questions
Common questions about OKLCH Color Picker — answered.
What is OKLCH?
oklch(L C H) or oklch(L C H / alpha).
How do I convert HEX to OKLCH?
#3b82f6, into the box at the top of the tool. The OKLCH value appears straight away in the swatch and in the format list, ready to copy. RGB, HSL, Lab, LCH and CSS color names work the same way.
Why use OKLCH instead of HEX, RGB or HSL?
Do all browsers support oklch() in CSS?
oklch(). For very old browsers, the tool gives you a CSS block with a HEX fallback written first, so older browsers use the HEX and newer ones use OKLCH.