OKLCH Color Picker

OKLCH Color Picker & Converter

srgb space

oklch

hex

rgba

hsl

Lightness

l

Chroma

c

Hue

h

Alpha

a
New to OKLCH? Learn more in our
FAQ

Understanding OKLCH: The Future of Web Colors

A comprehensive guide to the perceptually uniform color space that's revolutionizing web design

What is OKLCH?

OKLCH is a cylindrical representation of the OKLAB color space, designed by Björn Ottosson in 2020. It stands for OK Lightness, Chroma, and Hue - offering a more intuitive way to work with colors compared to traditional RGB or HSL systems.

Unlike RGB which is device-oriented, or HSL which has perceptual flaws, OKLCH is built on human vision principles. It ensures that equal numerical changes produce equal perceptual changes, making it ideal for creating harmonious color palettes and accessible designs.

Why Choose OKLCH Over RGB and HSL?

RGB Limitations

  • • Device-dependent values
  • • Non-intuitive color mixing
  • • Difficult to create variations
  • • Poor for accessibility calculations

HSL Shortcomings

  • • False perceptual uniformity
  • • Lightness varies with hue
  • • Saturation behaves unpredictably
  • • Limited to sRGB gamut

OKLCH Advantages

  • • True perceptual uniformity
  • • Consistent lightness across hues
  • • Predictable color relationships
  • • Wide gamut support (P3, Rec2020)

The Power of Perceptual Uniformity

Perceptual uniformity means that a change of the same numerical amount produces a similar perceptual change regardless of the starting color. This is crucial for:

Design Consistency

Create color variations that maintain the same perceived brightness, essential for hover states, disabled states, and theme variations.

Accessibility

Accurately predict contrast ratios and ensure WCAG compliance by working with true perceptual lightness values.

Beyond sRGB: Wide Gamut Colors

Modern displays support color gamuts far beyond traditional sRGB. OKLCH seamlessly handles these extended color spaces:

sRGB

Standard gamut supported by all displays

P3

25% more colors, common in Apple devices

Rec2020

Future-proof gamut for HDR displays

With OKLCH, you can specify colors that take full advantage of modern displays while providing automatic fallbacks for standard screens.

OKLCH in Practice

Creating Color Palettes

/* Base color */
--primary: oklch(0.6 0.2 250);

/* Lighter variant - just increase L */
--primary-light: oklch(0.8 0.2 250);

/* Darker variant - just decrease L */
--primary-dark: oklch(0.4 0.2 250);

/* Complementary - add 180 to hue */
--secondary: oklch(0.6 0.2 70);

Accessibility-First Design

/* Ensure WCAG AA contrast */
--text-on-light: oklch(0.3 0 0);     /* L=0.3 for dark text */
--text-on-dark: oklch(0.9 0 0);      /* L=0.9 for light text */

/* Consistent perceived brightness */
--success: oklch(0.7 0.15 140);      /* Green */
--warning: oklch(0.7 0.15 90);       /* Yellow */
--error: oklch(0.7 0.15 30);         /* Red */

Browser Support & Migration

Current Support

OKLCH is supported in all modern browsers:

  • • Chrome 111+ (March 2023)
  • • Firefox 113+ (May 2023)
  • • Safari 15.4+ (March 2022)
  • • Edge 111+ (March 2023)

Migration Strategy

/* Provide fallbacks for older browsers */
.element {
  /* Fallback for older browsers */
  background-color: rgb(0, 128, 255);
  
  /* Modern browsers will use this */
  background-color: oklch(0.65 0.2 240);
}

/* Or use @supports */
@supports (color: oklch(0 0 0)) {
  .element {
    color: oklch(0.7 0.15 180);
  }
}

The Future is Perceptually Uniform

OKLCH represents a paradigm shift in how we think about color on the web. By aligning with human perception rather than device capabilities, it enables:

  • ✓ More intuitive color selection and manipulation
  • ✓ Better accessibility through predictable lightness
  • ✓ Future-proof designs that scale with display technology
  • ✓ Consistent color relationships across different hues

Start using OKLCH today with our color picker above and experience the difference perceptual uniformity makes in your designs.

FAQ

OKLCH: Frequently Asked Questions

Learn more about OKLCH and how to use this color picker effectively.

1

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space that makes it easier to create harmonious color palettes. Unlike RGB or HSL, adjusting lightness in OKLCH maintains the perceived brightness consistently across all hues, making it ideal for design systems and accessibility.

2

What are P3 and Rec2020 color spaces?

P3 and Rec2020 are wide gamut color spaces that can display more vibrant colors than standard sRGB. P3 is commonly supported on modern Apple devices and high-end displays, while Rec2020 offers an even wider range of colors for future displays.

3

Why do some colors show as 'unavailable'?

When you select highly saturated colors, they may fall outside the range of colors your display can show. The picker shows a fallback color that approximates the intended color within your display's capabilities.

4

How do I use OKLCH colors in CSS?

You can use OKLCH colors directly in modern browsers with the CSS syntax: color: oklch(0.7 0.1 180). For older browser support, always provide a fallback color in RGB or HEX format.

5

What's the difference between chroma and saturation?

Chroma in OKLCH represents the colorfulness or intensity of a color in a perceptually uniform way. Unlike HSL saturation, chroma values remain consistent across different lightness levels, making it more predictable for color manipulation.

6

Can I save or bookmark specific colors?

Yes! Every color selection automatically updates the URL hash. You can bookmark any color or share the URL with others to load the exact same color configuration.

7

What does the 'Fallback' button do?

When you select a color outside your display's capability, the picker shows both the intended color (if your display supports it) and a fallback version that can be displayed. The 'Fallback' button lets you use the displayable approximation of your selected color.

8

Why are there two color preview blocks sometimes?

When you select a color outside the sRGB color space, the picker shows two previews: the left shows the actual color (if your display supports it), and the right shows the sRGB fallback that will be used on standard displays.

9

How do I work with transparent colors?

Use the Alpha slider to control transparency. The alpha channel is shown on a checkered background pattern, and the transparency value is automatically included in the color formats that support it (like rgba and oklch with alpha).

10

Can I type color values directly instead of using sliders?

Absolutely! You can type or paste colors in any format (OKLCH, HEX, RGB, or HSL) into the format input fields. The picker will automatically convert and update all values. You can even paste CSS color declarations like 'color: #ff0000;'.

11

How do I know if my display supports P3 or Rec2020?

The picker automatically detects your display's capabilities. If you see 'P3 is unavailable on this monitor' or similar messages, your display doesn't support those wider color gamuts. Most modern Apple devices and high-end displays support P3.

12

What's the best workflow for creating accessible color palettes?

Start by setting your desired hue, then adjust lightness to meet WCAG contrast requirements. OKLCH's perceptual uniformity means that colors with the same lightness value will have similar perceived brightness, making it easier to create accessible color combinations.