justyourpaletteHex to OKLCH
Turn hex codes into perceptual OKLCH values for CSS.
- 100% Free
- No Sign Up
- Works in Your Browser
Hex to OKLCH
Convert hex colors to OKLCH for modern CSS
More Color Tools
View all tools- Color converterConvert any color between hex, RGB, HSL, CMYK and more
- Hex to RGBConvert hex color codes to RGB values
- RGB to hexConvert RGB values to a hex color code
- Hex to HSLConvert hex color codes to HSL values
- HSL to hexConvert HSL values to a hex color code
- Palette generatorGenerate color palettes and lock the ones you like
- Color pickerPick a color and copy it as hex, RGB or HSL
- Contrast checkerCheck text and background contrast against WCAG
- Palette from imageExtract a color palette from any photo
Every everyday color tool, right in your browser.
No software. No uploads. No signup.
Browse all 28 tools- Color tools
- 28
- Named colors
- 139
- Curated palettes
- 216
How to use the hex to OKLCH
Three steps, all in your browser.
- 1
Enter a color
Type or paste a code in any format, or use the picker.
- 2
See every format
The converted values update as you type, in every format at once.
- 3
Copy the codes
Copy any color code in one click, or share the page link.
Hex to OKLCH: what to know
Hex to OKLCH converts a hex color into OKLCH: lightness, chroma and hue in the OKLab color space published by Björn Ottosson in 2020. Unlike HSL, OKLCH is perceptual, so two colors with the same L look equally light and changing hue keeps the color's apparent brightness steady.
OKLCH is part of CSS Color Level 4 and works in every current major browser as oklch(L C H). Tailwind CSS v4 defines its default palette in OKLCH, and it's becoming the format of choice for design systems because generating tints, shades and themes with it gives even, predictable steps.
OKLCH can also describe colors beyond sRGB, for wide-gamut screens such as Display P3. A hex code is always inside sRGB, so its OKLCH value is too; if you raise the chroma beyond what sRGB holds, browsers map it back to the nearest displayable color.
Popular uses
- Migrating a stylesheet from hex to modern oklch() colors
- Building theme scales with even lightness steps
- Comparing how light two brand colors really are
- Preparing colors for Tailwind CSS v4 themes
Tips for the best result
- To make a hover state, change only L by a few hundredths; hue and chroma stay put.
- Very light and very dark colors can't hold much chroma; lower C at the ends of a scale.
- Keep hex values in comments during a migration so reviewers can compare.
Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.