CSS Color Component Demo

Interactive Playground

Try changing the color below. The box background and text will update in real-time.

oklch(60% 0.2 280)

Pick a color (OKLCH)

sRGB (Default)

HSL

Display P3 (Wide Gamut)

OKLCH (Perceptual)

No Alpha Channel (Opacity hidden)

Pre-filled with Hex

High Precision

Force Light Theme

Force Dark Theme

Auto (System Default)