HEX ↔ OKLCH Converter
Convert HEX to OKLCH and OKLCH to HEX bidirectionally.
What is OKLCH?
OKLCH is a perceptually uniform color space based on human visual perception. While HSL is mathematically simple but has uneven brightness perception, OKLCH is designed so that the same L value actually feels like the same brightness. It's included in CSS Color Level 4 spec and has become more important in frontend development as Tailwind CSS v4 adopted it as the default color space.
The biggest advantage of OKLCH is that brightness stays consistent even when changing only chroma or hue. This gives predictable results when creating color palettes or adjusting dark mode colors in design systems.
L, C, H Axis Explanation
0% is pure black, 100% is pure white. Same L values are perceived as same brightness by human eyes.
0 means grayscale, higher values mean more vivid colors. Unlike HSL Saturation, it represents absolute vividness.
Color wheel angle from 0-360°. 0 is red range, 120 is green, 240 is blue area.