Skip to main content
← ← Back to Tools

Interactive Color Space Sandbox​

This interactive playground maps colors between CSS HEX, RGB, and the modern perceptually uniform OKLCH color coordinates. OKLCH is the standard color design format chosen for RainLib's layout tokens (defined in DESIGN.md), allowing for perfectly proportional chroma gradients and contrast tuning.

OKLCH Coordinatesoklch(0.485 0.18 250)

Lightness (L)0.485
Chroma (C)0.18
Hue (H)250°

// Color Match

Reference Palette Matches
--bg (Light)
#fbfbfd
--bg (Dark)
#050505
--surface (Dark)
#121212
--brand-primary (Light)
#1062cd
--brand-primary (Dark)
#66fcf1

Why use OKLCH for Design Systems?​

  • Perceptual Uniformity: Unlike HSL or RGB, a lightness (L) change in OKLCH matches how human eyes perceive brightness changes across different hues. This prevents yellow from feeling comically brighter than blue at identical lightness values.
  • Wider Gamut Support: OKLCH can represent colors outside the standard sRGB spectrum (Display P3, Rec. 2020) which are natively displayed on modern high-DPI screens.