OKLCH Converter & Accessible Palette Generator
Convert colors between OKLCH, HEX, RGB, and HSL in real time, and automatically suggest colors that meet WCAG contrast ratios while preserving the OKLCH hue. Natively supports CSS Color Level 4 OKLCH color space for accessible color palette design.
Last updated:
How to Use
Expand how to useCollapse how to use
- 1
Enter a Color Code
Type a color code in HEX, RGB, HSL, or OKLCH format in the input field, or select a color using the color picker.
- 2
View Conversion Results
The entered color is converted in real time to HEX, RGB, HSL, and OKLCH (including CSS function syntax). Use the copy button next to each format to grab the value.
- 3
Generate an Accessible Palette
Specify a background color to see WCAG contrast ratio compliance results and hue-preserving color suggestions that meet the standards.
Color Input
Supports HEX (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(9,100%,60%)), OKLCH (oklch(62.8% 0.258 29.2))
Preview
Conversion Results
HEX
#3B82F6CSS OKLCH
oklch(62.3% 0.188 259.8)CSS RGB
rgb(59, 130, 246)CSS HSL
hsl(217, 91%, 60%)OKLCH
L: 62.3%, C: 0.188, H: 259.8°RGB
R: 59, G: 130, B: 246HSL
H: 217°, S: 91%, L: 60%* HSL values are rounded to integers, so round-trip conversion may differ by ±1–2
Accessible Palette Generator
Contrast Ratio: 3.68:1,Normal Text AA (4.5:1): Fail,Normal Text AAA (7:1): Fail
Contrast Ratio: 3.68:1
| Text Size | AA (4.5:1) | AAA (7:1) |
|---|---|---|
| Normal Text | Fail | Fail |
| Large Text | Pass | Fail |
Hue-Preserving Suggestions
AA Compliant (4.5:1+)
#2C72E5 / oklch(57.4% 0.188 259.8)
Contrast Ratio: 4.52:1
AAA Compliant (7:1+)
#0452C2 / oklch(47.3% 0.188 259.8)
Contrast Ratio: 7.02:1
About OKLCH Converter
OKLCH Converter translates colors between OKLCH, HEX, RGB, and HSL in real time and outputs ready-to-paste CSS oklch() syntax for use in Tailwind CSS config, CSS custom properties, or design token files. OKLCH is the perceptually uniform color space behind CSS Color Level 4 — adjusting L (lightness) shifts perceived brightness evenly across all hues, unlike HSL where the same L value looks dramatically brighter in yellow than in blue. The accessible palette generator finds the nearest WCAG AA or AAA compliant lightness for any hue, so you can meet contrast requirements without drifting away from your brand color's hue or chroma.
Key Features
- Real-time conversion between HEX, RGB, HSL, and OKLCH
- CSS oklch() function syntax output
- Visual color selection with color picker
- WCAG AA/AAA contrast ratio checking
- Automatic hue-preserving color suggestions
- Random color generation
Use Cases
- Convert a brand HEX color to CSS oklch() syntax for use in a Tailwind CSS v4 config or CSS custom property token
- Generate an accessible foreground color for a button that preserves the brand hue while hitting the WCAG AA 4.5:1 contrast ratio
- Build a consistent light/dark mode palette by adjusting only the L (lightness) channel of OKLCH tokens, keeping hue and chroma stable
- Debug perceptually uneven color scales in a design system — identify why two HSL colors at the same lightness look different and fix them in OKLCH
- Verify browser support requirements: confirm oklch() is safe to use without fallbacks when targeting Chrome 111+/Firefox 113+/Safari 15.4+
FAQ
What is OKLCH?
OKLCH is a color space introduced in CSS Color Level 4, representing colors in cylindrical coordinates of the Oklab color space. It uses three parameters—L (lightness), C (chroma), and H (hue)—and is perceptually uniform, making color adjustments more intuitive than HSL.
What is the difference between HSL and OKLCH?
HSL is mathematically simple but perceptually non-uniform. For example, setting HSL lightness to 50% produces very different perceived brightness depending on the hue. OKLCH is perceptually uniform, so colors with the same L value actually appear equally bright.
What is the advantage of hue-preserving suggestions?
Traditional HSL-based adjustments tend to alter saturation and color perception when changing lightness. By adjusting only the L (lightness) in OKLCH, you can find colors that meet WCAG contrast standards while maintaining the original hue and chroma of your brand color as much as possible.
What happens to colors outside the sRGB gamut?
OKLCH can represent colors outside the sRGB gamut, but they are clamped (converted to the nearest representable color) for screen display. Suggested colors are also adjusted to stay within the sRGB gamut.
What is the browser support for CSS oklch()?
The CSS oklch() function is supported in Chrome 111+, Firefox 113+, and Safari 15.4+ (global support exceeds 90% as of 2025). Tailwind CSS v4 uses OKLCH natively for its color palette. For older browsers, provide a HEX or RGB @supports fallback. You can use the @supports (color: oklch(0 0 0)) { } rule to progressively enhance with OKLCH.