OKLCH to HEX
Design ToolsConvert OKLCH() color values to HEX and vice versa using modern color science.
How to Use OKLCH to HEX
Frequently Asked Questions
What is OKLCH color?
OKLCH is a perceptual color space based on the OKLab model. It stands for Lightness (L), Chroma (C), and Hue (H). OKLCH is designed to be more uniform to human vision, making it ideal for consistent color adjustments and contrast in CSS. It’s supported in modern browsers and CSS specifications.
How does LCH color work and why would it look consistent across different screens?
LCH actually configures colors based on how humans perceive these three separate parameters: brightness (L) intensity/saturation (C) color (H).That means the color it produces will appear identical, regardless of what type of screen is displaying it.
What is the difference between LCH and OKLCH?
Both LCH and OKLCH represent color using lightness, chroma, and hue, but OKLCH is based on the OKLab model, while LCH is based on CIELAB. OKLCH provides more perceptually accurate results, especially for text contrast and color manipulation. It’s more suited for modern CSS design systems.
Can OKLCH be used in Tailwind CSS?
Tailwind CSS does not natively support OKLCH color syntax like you would use predefined colors such as blue-500. Tailwind's utility classes are built around its predefined color palette and naming system in its config, but you can use OKLCH values via arbitrary color values or extend your Tailwind config. For example, using className="bg-[oklch(0.75_0.2_30)]" is valid in Tailwind if arbitrary values are enabled.
What OKLCH formats are supported?
This tool supports both OKLCH with percentages (e.g., oklch(75% 0.2 30)) and decimal values (e.g., oklch(0.75 0.2 30)), as well as LCH fallback syntax like lch(70 38.99 332). All formats are parsed and converted accurately.
Does this tool support HEX to OKLCH as well?
Yes, the converter works in both directions: HEX to OKLCH and OKLCH to HEX. Just paste your value and the tool auto-detects the format.
Why use OKLCH in modern web design?
OKLCH enables perceptual adjustments and dynamic theming with consistent lightness and chroma. It’s especially helpful for accessibility, dark mode transitions, and fine-tuned color systems in design tokens. With growing browser support, it’s becoming the standard for advanced color handling in CSS.
Which browsers support OKLCH colors?
Modern browsers like Chrome (from v111), Firefox, Safari, and Edge have added support for OKLCH. For production use, you can use PostCSS plugins or fallback systems to convert OKLCH to RGB for unsupported browsers.