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.

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

Elysia Tools

Navigation

Design

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

Details

What this tool helps you do

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.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

OKLCH Color Converter

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Convert Legacy HEX to CSS OKLCH

2. Resolve Out-of-Gamut Brand Colors

FAQ

Color Code Samples

Web Image Processing Python Samples

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Color Space Converter

CMYK Color Converter

Image Color Palette Extractor

Color Split Complement

Color Space Conversion Tools for Web and Print

CSS Effects, Palettes, and Design Token Generators

Web Accessibility Audit and Accessible Color Tools

Color Design & Color Space Conversion Tools