ページを読み込んでいます
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.
Type a color code in HEX, RGB, HSL, or OKLCH format in the input field, or select a color using the color picker.
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.
Specify a background color to see WCAG contrast ratio compliance results and hue-preserving color suggestions that meet the standards.
Supports HEX (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(9,100%,60%)), OKLCH (oklch(62.8% 0.258 29.2))
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
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
The OKLCH Converter is a color conversion and palette generation tool that supports the OKLCH color space introduced in CSS Color Level 4. OKLCH is a perceptually uniform color space that allows intuitive control of lightness (L), chroma (C), and hue (H). Unlike traditional HSL-based adjustments, it can meet WCAG contrast ratios by adjusting only lightness while keeping the hue unchanged, enabling accessible color scheme design that preserves brand color hues.
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.
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.
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.
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.
The CSS oklch() function is supported in major modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). For older browsers, it is recommended to provide HEX or RGB fallbacks.