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

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.

Example Results

1 examples

Convert a brand blue to OKLCH and check gamut

See HEX/RGB/HSL/OKLCH/Display-P3 for a vivid blue, with a perceptual lightness/chroma/hue readout and gamut check.

Color converter with OKLCH, P3, and gamut diagnostics.
View input parameters
{ "colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto" }

Key Facts

Category
Design & Color
Input Types
text, select, number
Output Type
html
Sample Coverage
1
API Ready
Yes

Overview

The OKLCH Color Converter allows you to bidirectionally convert colors between HEX, RGB, HSL, OKLCH, and Display-P3 using CSS Color 4 math. It provides real-time gamut checks for sRGB and Display-P3, along with chroma-reduction clipping suggestions to safely map out-of-gamut colors.

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.

Examples

1. Convert Legacy HEX to CSS OKLCH

Frontend Developer
Background
A developer needs to migrate a legacy stylesheet from HEX colors to modern CSS oklch() values to implement a dynamic theme engine.
Problem
Manually calculating OKLCH coordinates from HEX values is complex and prone to rounding errors.
How to Use
Enter #3b82f6 into the Color Input field and set the Input Format to Auto.
Example Config
colorInput: '#3b82f6', inputFormat: 'auto'
Outcome
The tool outputs the exact CSS oklch(0.62 0.19 256) value along with its Display-P3 equivalent.

2. Resolve Out-of-Gamut Brand Colors

UI Designer
Background
A designer selected a vibrant P3 green for a web app, but needs a fallback color that looks similar on older sRGB monitors.
Problem
The vibrant green is outside the sRGB gamut, causing unpredictable clipping on standard screens.
How to Use
Input the P3 color or set L, C, and H directly, then select 'sRGB (clip to fit)' as the Reference Gamut.
Example Config
colorInput: 'oklch(0.85 0.25 140)', clipMode: 'srgb'
Outcome
The tool identifies the color as out-of-gamut for sRGB and provides a chroma-reduced OKLCH alternative that preserves the original hue and lightness.

Try with Samples

design
Color Code Samples
Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing
title token color
sample

Related Hubs

Color Space Conversion Tools for Web and Print
Curated tools for web-to-print color space conversion in one hub.
CSS Effects, Palettes, and Design Token Generators
Curated tools for CSS visual effects, palette building, and design token generation in one hub.
Web Accessibility Audit and Accessible Color Tools
Review WCAG issues, screen-reader order, contrast failures, color-vision risk, and accessible palette choices in one hub for website and UI accessibility workflows.
Color Design & Color Space Conversion Tools
Compare color converters, palette generators, harmony tools, accessibility checkers, and color adjustment utilities in one hub for designers and developers.

FAQ

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.

API Documentation

Request Endpoint

POST /en/api/tools/oklch-color-converter

Request Parameters

Parameter Name Type Required Description
colorInput text No -
inputFormat select No -
L number No -
C number No -
H number No -
clipMode select No -

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-oklch-color-converter": {
      "name": "oklch-color-converter",
      "description": "Convert bidirectionally between HEX, RGB, HSL, OKLCH and Display-P3 using CSS Color 4 math, with gamut checks and out-of-gamut clipping suggestions",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=oklch-color-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]