UtilHub

HEX to OKLCH Converter

Convert HEX color codes to OKLCH format instantly. OKLCH is a modern perceptual color space supported natively in CSS, making it easier to build uniform, accessible color scales without hue shifts when adjusting lightness.

name, hex, rgb, hsl, hwb, cmyk, ncol

FormatValue
OKLCHoklch(72.9% 0.1696 35.11)
Name
Hex#ff7a59
RGBrgb(255, 122, 89)
HSLhsl(12, 100%, 67%)
HWBhwb(12, 35%, 0%)
CMYKcmyk(0%, 52%, 65%, 0%)
NColR20, 35%, 0%

Lighter / Darker:

oklch(95.4% 0.0233 37.38)
oklch(87.4% 0.0684 34.17)
oklch(79.8% 0.1173 34.49)
oklch(73.2% 0.1668 34.91)
oklch(68.1% 0.2100 34.89)
oklch(64.6% 0.2409 32.62)
oklch(55.8% 0.2061 32.95)
oklch(46.6% 0.1696 33.50)
oklch(36.8% 0.1317 34.20)
oklch(26.5% 0.0896 36.50)
oklch(15.3% 0.0437 45.08)

Pick a Color:

How to Use This Tool

Paste a HEX color code into the input field — the tool converts it to OKLCH format in real time, showing lightness (0–100%), chroma, and hue angle. OKLCH values are output in CSS-ready oklch() syntax. Click the OKLCH value to copy it instantly. The shade bar uses OKLCH notation so you can browse perceptually uniform tints and shades. OKLCH is supported in all modern browsers and is the recommended format for CSS Color Level 4 color manipulation.