Convert OKLCH() color values to HEX and vice versa using modern color science.
Modern web design is moving beyond the limitations of RGB and HSL. We built this OKLCH to HEX converter to solve the "inconsistent brightness" problem that has plagued developers for decades. In older color models like HSL, changing the hue of a color often causes an unintended shift in its perceived brightness—for example, a pure yellow at 50% lightness looks significantly brighter to the human eye than a pure blue at the same percentage. OKLCH fix this by using a perceptually uniform model, ensuring that colors with the same Lightness value actually look equally bright.
This tool is essential for 2026 design systems and accessible dark mode implementation. By using OKLCH, you can rotate the hue of a brand color while being mathematically certain that the contrast ratio remains stable. This eliminates the guesswork and manual tweaking previously required to keep UI elements readable. Whether you are generating a palette for Tailwind CSS 4 or creating dynamic themes with CSS variables, our converter ensures your colors stay visually balanced across the entire spectrum.
Furthermore, our tool handles the critical bridge to sRGB legacy support. While OKLCH supports the wider P3 gamut found on modern displays, most production environments still require HEX fallbacks. We use precise color science to translate these modern values into the closest possible HEX equivalents, including smart gamut mapping. This allows you to design in the future of CSS while maintaining 100% compatibility with older browsers and static design assets.
Professional Workflow Tip: When building a "Color Scale" (like 50 to 950), keep your Chroma (C) and Hue (H) constant and only adjust the Lightness (L). This creates a perfectly smooth, professional gradient that is impossible to achieve with HEX or HSL alone. Use this tool to grab the HEX codes for each step to populate your theme configuration files.
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.
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.
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.
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.
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.
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.
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.
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.