Color Picker & Palette

Color management is a hidden complexity in front-end development. Hex codes are easy to write but impossible to reason about perceptually. HSL is better but still has perceptual non-uniformity. OKLCH — the newest CSS color space — finally gives developers an intuitive, perceptually-uniform way to work with color.

Color spaces explained

- **HEX**: A shorthand for RGB written in hexadecimal. `#FF5733` = R:255, G:87, B:51. Easy to copy-paste, but no intuitive relationship to visual perception. - **RGB**: Three channels (red, green, blue) each 0–255. The underlying model of every screen, but perceptually non-linear. - **HSL**: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive — you can adjust lightness without changing the hue — but the "lightness" axis is not perceptually uniform. Yellow at L:50% looks brighter than blue at L:50%. - **OKLCH**: L (lightness 0–1, perceptually uniform), C (chroma, color intensity), H (hue angle 0–360°). Two colors with the same L value look equally bright. Makes programmatic palette generation produce harmonious results.

WCAG contrast checking

The contrast ratio between text and background must be at least 4.5:1 for normal text (WCAG AA) and 7:1 for WCAG AAA. This tool computes the contrast ratio between any two colors and shows pass/fail for both levels. Essential for building accessible UIs that comply with international accessibility standards.

Palette generation

Choose a base color and the tool generates: - Complementary (180° across the hue wheel) - Analogous (±30° neighbors) - Triadic (120° apart) - Split-complementary (150°/210°)

All calculations happen in OKLCH space for perceptual consistency.