Color Converter

HSL's "50% lightness" produces visually different brightness across hues — yellow at HSL(60,100%,50%) looks far brighter than blue at HSL(240,100%,50%). oklch solves this with perceptual uniformity: equal L values produce equal apparent lightness regardless of hue. Here's how oklch works in CSS (now supported in all modern browsers), why it's the best tool for dark mode palettes, and how wide-gamut P3 colors fit in.

P3 displays (iPhone, MacBook Pro) can show colors that are impossible to display on standard sRGB monitors — and designers working on P3 screens routinely create colors that look different (less vivid) for much of their audience. Here's what "color space" actually means (gamut + encoding), why the same RGB value looks different on sRGB vs P3 displays, how CSS Color Level 4's color() function handles wide gamut, and why oklch is replacing HSL for building perceptually consistent color systems.

Roughly 1 in 12 men have some form of red-green color vision deficiency — meaning "red means error, green means success" relies on a color distinction that's specifically the hardest for the most common type of color blindness. Here's how different CVD types affect color perception differently, why redundant non-color signals (icons, labels, patterns) are the core fix, and how CVD simulation reveals confusable color pairs during design review.

Design tokens are a three-tier hierarchy: primitive colours → semantic meanings → component-specific use. CSS custom properties implement this at runtime, making dark mode a one-place change. Here's the full token model, how Tailwind's colour system works, and why OKLCH is replacing HSL for design systems.

WCAG contrast requirements are now enforceable law in the EU and UK. Here's how contrast ratios are calculated from RGB values, which common colour combinations fail (including Bootstrap blue), and how to build accessible colour systems from the start.