# OKLCH Color Converter

Convert bidirectionally between HEX, RGB, HSL, OKLCH and Display-P3 using CSS Color 4 math, with gamut checks and out-of-gamut clipping suggestions

> Canonical page: https://elysiatools.com/en/tools/oklch-color-converter

- **Category:** Design

- **Keywords:** oklch, oklab, color space, display p3, gamut, color converter, css color 4, perceptual lightness, chroma, hue, srgb, wide gamut

## Overview

Paste any color (HEX, rgb(), hsl(), oklch()) or set OKLCH L/C/H directly. The tool converts across all modern color spaces using CSS Color 4 matrices and reports HEX, sRGB 8-bit, linear sRGB, HSL, XYZ D65, OKLab, OKLCH and Display-P3 values, with sRGB and Display-P3 gamut checks and a chroma-reduction clip suggestion for out-of-gamut colors. OKLCH is recommended for palettes because its L matches perceived lightness and adjusting lightness/chroma does not shift hue.

## Inputs

- **Color Input** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256)
- **Input Format** (select)
- **Lightness L (%)** (number): 0–100 (OKLCH 0–1)
- **Chroma C** (number): e.g. 0.19 (typically 0–0.4)
- **Hue H (°)** (number): 0–360
- **Reference Gamut** (select)

## When to use

- When designing modern web interfaces that require wide-gamut Display-P3 colors or CSS oklch() values.
- When creating perceptually uniform color palettes where adjusting lightness or chroma must not shift the hue.
- When checking if a wide-gamut color is out of the standard sRGB gamut and finding the closest safe alternative.

## How it works

- Input a color string in HEX, rgb(), hsl(), or oklch() format, or manually adjust the Lightness (L), Chroma (C), and Hue (H) values.
- The tool processes the input using CSS Color 4 conversion matrices to calculate equivalent values across multiple color spaces.
- It performs gamut checks to determine if the color fits within sRGB or Display-P3 boundaries.
- If the color is out-of-gamut, it suggests a clipped alternative using chroma reduction to preserve the original hue and lightness.

## Use cases

- Generating CSS oklch() values from legacy HEX or RGB design specs.
- Auditing brand colors to ensure they are safe for standard sRGB displays.
- Creating accessible color scales with consistent perceived contrast by keeping Lightness (L) constant.

## Frequently asked questions

### What is OKLCH?

OKLCH is a cylindrical color space designed to match human visual perception, where L is lightness, C is chroma (saturation), and H is hue.

### Why does adjusting HSL lightness shift the color's hue?

HSL is not perceptually uniform, meaning changes in saturation or lightness mathematically distort how our eyes perceive the actual hue.

### What happens if a color is out-of-gamut for sRGB?

The tool flags the color as out-of-gamut and suggests a chroma-reduced OKLCH alternative that fits within standard sRGB screens.

### Can I convert directly from a HEX value to OKLCH?

Yes, paste any HEX code into the input field, and the tool will instantly output the CSS-ready oklch() equivalent.

### What is Display-P3?

Display-P3 is a wide-gamut color space that supports more vibrant colors than standard sRGB, commonly used on modern Apple and Android devices.

## Related tools

- [Color Space Converter](https://elysiatools.com/en/tools/color-space-converter): Convert a color between HEX, RGB, HSL, CIELAB, and Display-P3 with CSS-ready output and gamut checks.
- [CMYK Color Converter](https://elysiatools.com/en/tools/cmyk-converter): Convert HEX, RGB, HSL, and CMYK colors into all four representations.
- [Image Color Palette Extractor](https://elysiatools.com/en/tools/image-color-palette-extractor): Extract dominant colors from an image, export code-ready tokens, and check contrast ratios
- [Color Split Complement](https://elysiatools.com/en/tools/color-split-complement): Generate split complementary color schemes with harmonious contrast using base color and two adjacent colors to complement
- [CSS Color Name Resolver](https://elysiatools.com/en/tools/css-color-name-resolver): Resolve any hex color to its nearest CSS named color with true CIEDE2000 ΔE distance, then browse the whole color family it belongs to.
- [CSS Easing and Animation Visualizer](https://elysiatools.com/en/tools/css-easing-visualizer): Visualize a CSS cubic-bezier easing curve, preview it live on position/opacity/scale, pick presets, and export copy-ready CSS
- [Tailwind Color Palette Sync](https://elysiatools.com/en/tools/tailwind-color-palette-sync): Generate theme.extend.colors for tailwind.config.ts from HEX colors, with WCAG contrast levels and optional dark mode.
- [Absorbance↔Transmittance Converter (A = −log₁₀T)](https://elysiatools.com/en/tools/absorbance-transmittance-converter): Convert A ↔ %T ↔ T with A = −log₁₀(T) and %T = 100·T; returns all three representations for spectrophotometry work.

## Samples

- [Color Code Samples](https://elysiatools.com/en/samples/color-code): Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing
- [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion
- [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion
- [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion