OKLCH to HEX Converter

What Is the OKLCH to HEX Converter?

This OKLCH to HEX converter translates colors from the perceptually uniform OKLCH color space into standard hexadecimal codes ready for CSS, design tokens, and production handoff. Adjust Lightness, Chroma, Hue, and Alpha with interactive sliders, and the tool instantly outputs the corresponding HEX value along with RGB, HSL, and OKLab equivalents. A built-in sRGB gamut check flags colors that fall outside the displayable range and shows the nearest safe alternative.

How to Convert OKLCH to HEX

1. Set Lightness (L) — controls brightness on a 0–1 scale. Values around 0.55–0.70 produce mid-tone "500"-style shades ideal for primary UI colors.
2. Increase Chroma (C) — governs color intensity. Stay below 0.30 to remain sRGB-safe; higher values may trigger a gamut warning.
3. Rotate Hue (H) — pick any angle from 0° to 360° (0° = red, 120° = green, 240° = blue).
4. Adjust Alpha (α) — set transparency from 0 (fully transparent) to 1 (fully opaque).
5. Copy or export — click any color value to copy it, or export as CSS variables, JSON, or SVG.

Why Use an Online OKLCH to HEX Converter?

OKLCH is part of the CSS Color Module Level 4 specification and offers a major advantage over older models like RGB and HSL: perceptual uniformity. Equal numeric changes in OKLCH produce equal visual changes, which makes it far easier to build consistent color ramps, accessible palettes, and smooth gradients. However, many tools, legacy browsers, and design handoff workflows still require HEX codes. This converter bridges the gap — letting you design in OKLCH and ship in HEX without manual math.

Because the tool checks WCAG contrast ratios on both white and black backgrounds in real time, you can verify accessibility compliance before committing a color. For a deeper audit of text and background pairings, run your palette through the Contrast Checker or test every combination at once in the Palette Accessibility Matrix.

Gamut Safety and Wide-Gamut Design

When Chroma is pushed high or Lightness hits extremes, some OKLCH colors fall outside the sRGB gamut. The converter flags these out-of-gamut values and displays the closest displayable HEX code so you always get a usable result. If you are targeting Display P3 or Rec.2020 screens, validate your colors with the OKLCH Gamut Checker for a detailed gamut map and snapping options.

Common OKLCH to HEX Examples

• oklch(0.70 0.10 290) → #9D94D9 — an accessible lavender for UI links
• oklch(0.62 0.18 210) → a rich blue that passes AA contrast on white backgrounds
• oklch(0.95 0.03 95) → a subtle success-green background with solid dark-text readability
• oklch(0.25 0.12 30) → a deep warm accent suited for dark-mode interfaces

Ready to expand a single color into a full design-system ramp? Use the Tailwind Scale Generator to create a perceptually uniform 50–900 scale from any base shade. To convert between other formats like RGB, HSL, or CMYK, open the Color Converter.

Quick Conversion Snippet

// OKLCH to HEX using Culori
import { formatHex } from 'culori';
const hex = formatHex({ mode: 'oklch', l: 0.7, c: 0.1, h: 290 });
// → '#9d94d9'