Spätzi 🎨

How to use this tool?

• Select your base colors: Use the "Background Color" and "Text Color" pickers (or type directly into the text fields) to choose your initial colors. Accepted formats include keywords (e.g., "rebeccapurple"), OKLCH, HEX, RGB, or HSL.
• Observe the "Base Color" box: This box displays your chosen background color. You'll see its representation in both OKLCH and sRGB HEX. Below, the WCAG and APCA contrast ratios against your chosen text color are shown.
• Explore variations with OKLCH sliders: Adjust the "Lightness" (L), "Chroma" (C), and "Hue" (H) sliders. These sliders modify the background color to create a new variant.
• Check the "Variant Color" box: This box shows the color generated by the LCH sliders. Like the base color, it displays OKLCH and sRGB HEX values, along with its contrast ratios against your chosen text color.
• Mind the gamut: If a chosen or generated OKLCH color is outside the sRGB gamut (the range of colors most screens can reliably display), a warning "(closest sRGB color)" will appear next to its HEX representation. The HEX value shown is the closest color within the sRGB gamut.
• Accessibility insights: The WCAG and APCA values help you ensure your color combinations are accessible. Aim for sufficient contrast, especially for text.

Why OKLCH?

The OKLCH color space offers many advantages over other color spaces in CSS.

1. Extended gamut: OKLCH can represent all displayable colors on modern screens with a wide color range, which is not the case with sRGB (RGB, HSL) which is more limited.
2. Uniform perception: OKLCH is based on how the human eye actually perceives colors.
3. Intuitive manipulation: unlike RGB or hexadecimal notation, parameters for hue, lightness, and contrasts are intuitive.
4. Better hue preservation during transitions or gradients.
5. Precise contrast control: The lightness component (L) directly corresponds to perceived brightness, making it easier to create accessible contrasts.

Check out the browser support for OKLCH, and read the article "OKLCH in CSS: why we moved from RGB and HSL"