OKLCH Color Converter
Free online OKLCH color converter. Convert between OKLCH, OKLab, HEX, RGB, and HSL for modern CSS Color Level 4. Live preview with gamut clamping. 100% client-side.
Loading tool...
What is OKLCH Color Converter?
The OKLCH Color Converter is a free online tool that translates colors between the modern OKLCH and OKLab perceptual color spaces (defined in CSS Color Level 4) and the classic sRGB formats HEX, RGB, and HSL. OKLCH splits a color into lightness (L, 0-1), chroma (C), and hue (H, 0-360) on a perceptually uniform scale, so equal numeric steps look equally different across the entire color wheel. Adjust the three channels with sliders or numeric inputs, paste a hex code, or use the native color picker, and all five formats update live. Colors that fall outside the sRGB gamut are automatically clamped by reducing chroma via binary search, with a clear warning so the on-screen swatch always matches what a browser can render. Every conversion runs entirely in your browser with no data sent anywhere.
Key Benefits
- Design in a perceptually uniform space where equal steps look equally different
- Copy ready-to-paste oklch() and oklab() CSS strings supported by all modern browsers
- Automatic gamut clamping ensures out-of-gamut colors map to the closest displayable sRGB swatch
- Bidirectional: import from hex and edit in OKLCH, or design in OKLCH and copy the sRGB fallback
- 100% client-side with no sign-up and full offline support
Common Use Cases
- •Modern CSS: write oklch() and oklab() color values for CSS Color Level 4 stylesheets
- •Design systems: build perceptually even color ramps and accessible contrast scales
- •UI design: pick brand colors that look consistent across lightness and chroma ranges
- •Accessibility: generate OKLCH-based palettes that maintain perceptual contrast for WCAG review
- •Color science: explore the OKLab/OKLCH space and convert to sRGB fallbacks for legacy browsers
How to Use the OKLCH Color Converter
- Pick a starting color: Enter a hex code (e.g. #3b82f6), use the native color picker, or click a preset swatch. The OKLCH values update instantly.
- Adjust OKLCH values: Use the Lightness, Chroma, and Hue sliders or numeric inputs to fine-tune the color in the perceptual OKLCH space.
- Check the gamut warning: If your color is outside the sRGB gamut, a yellow warning appears. The preview and HEX/RGB values are gamut-clamped to the closest sRGB swatch.
- Copy any format: Use the Copy button next to OKLCH, OKLab, HEX, RGB, or HSL to copy that exact CSS string to your clipboard.
Key Features
- Live OKLCH sliders for Lightness (0-1), Chroma (0-0.4), and Hue (0-360) with precise numeric inputs.
- One-click copy for OKLCH, OKLab, HEX, RGB, and HSL with visual copy feedback.
- Native color picker and hex input let you import any sRGB color and convert it to OKLCH instantly.
- Automatic sRGB gamut clamping via binary search with a clear out-of-gamut warning.
- Bidirectional conversion: start from hex and edit in OKLCH, or design in OKLCH and copy the sRGB fallback.
- 100% client-side conversion with no network calls, no sign-up, and full offline support.