Color Spaces

The <color-input> component supports multiple color spaces for editing colors:

• OKLCH, OKLAB - Perceptually uniform (recommended)
• HSL, HWB - Intuitive but not perceptually uniform
• LAB, LCH - CIE perceptual spaces
• sRGB - Standard web RGB
• Display P3, Rec2020 - Wide-gamut RGB
• Other: a98-rgb, prophoto, xyz variants

OKLCH is the recommended choice for most design work. It’s a perceptually uniform color space designed to match human vision.

<color-input
  value="oklch(70% 0.2 240)"
  colorspace="oklch"
  theme="auto"
></color-input>

• Perceptually uniform - Equal numeric changes produce equal visual changes
• Predictable lightness - Adjusting L keeps perceived brightness constant
• Consistent chroma - Saturation behaves intuitively across all hues
• Wide gamut support - Works with Display P3, Rec2020, and beyond
• Better than HSL - No hue shifting or unexpected brightness changes

• L (Lightness): 0–100% - Perceived brightness
• C (Chroma): 0–100% (0–0.4 in decimal) - Colorfulness/saturation
• H (Hue): 0–360° - Color angle (0=red, 120=green, 240=blue)

oklch(70% 0.2 240)        /* Vibrant blue */
oklch(85% 0.15 120)       /* Light green */
oklch(50% 0.25 30)        /* Rich orange */
oklch(90% 0.05 180 / 0.8) /* Subtle cyan with alpha */

Color Scales:

/* Keep C and H constant, vary L for consistent hue */
--brand-50:  oklch(95% 0.1 240);
--brand-500: oklch(70% 0.2 240);
--brand-900: oklch(30% 0.15 240);

Accessible Contrast:

/* Lighter colors need less chroma for clarity */
--text-light: oklch(95% 0.02 240);
--text-dark:  oklch(25% 0.05 240);

OKLAB uses rectangular coordinates instead of cylindrical: Lightness, a (green-red), b (blue-yellow).

<color-input
  value="oklab(70% 0.1 -0.15)"
  colorspace="oklab"
  theme="auto"
></color-input>

• L (Lightness): 0–100% - Perceived brightness
• a: -0.4 to +0.4 - Green (negative) to red (positive)
• b: -0.4 to +0.4 - Blue (negative) to yellow (positive)

oklab(70% 0.1 -0.15)     /* Blue-ish */
oklab(85% -0.05 0.1)     /* Yellow-green */
oklab(50% 0.2 0.05)      /* Reddish */

Use OKLAB when:

• You need to blend colors (interpolate in rectangular space)
• Working with color math or transformations
• You prefer Cartesian coordinates over cylindrical

For design work, OKLCH is usually more intuitive.

HSL (Hue, Saturation, Lightness) is familiar to web developers but not perceptually uniform.

<color-input
  value="hsl(240 80% 60%)"
  colorspace="hsl"
  theme="auto"
></color-input>

hsl(240 80% 60%)          /* Blue */
hsl(120 100% 50%)         /* Pure green */
hsl(0 100% 50% / 0.5)     /* Semi-transparent red */

• Not perceptually uniform - same L value looks different across hues
• Saturation behaves inconsistently
• Can’t represent wide-gamut colors
• Prefer OKLCH for new projects

Standard RGB color space for the web. Supports hex notation.

<color-input
  value="#3b82f6"
  colorspace="srgb"
  theme="auto"
></color-input>

<color-input value="#3b82f6" colorspace="srgb"></color-input>

<color-input
  value="rgb(59 130 246)"
  colorspace="srgb"
  theme="auto"
></color-input>

<color-input value="rgb(59 130 246)" colorspace="srgb"></color-input>

• Converting existing hex colors
• Compatibility with older systems
• Direct control over display RGB values

For color design, prefer OKLCH.

HWB (Hue, Whiteness, Blackness) is an alternative to HSL, sometimes easier to understand.

<color-input
  value="hwb(240 20% 10%)"
  colorspace="hwb"
  theme="auto"
></color-input>

hwb(240 20% 10%)  /* Blue with some white and black */
hwb(120 0% 0%)    /* Pure green */

CIE LAB and LCH are perceptual color spaces. OKLCH is generally preferred for modern work.

<color-input
  value="lab(70% 20 -40)"
  colorspace="lab"
  theme="auto"
></color-input>

<color-input
  value="lch(70% 45 240)"
  colorspace="lch"
  theme="auto"
></color-input>

Wide-gamut RGB spaces for modern displays that exceed sRGB.

Used by modern Apple devices and high-end displays:

<color-input
  value="color(display-p3 0.3 0.7 0.95)"
  colorspace="display-p3"
  theme="auto"
></color-input>

color(display-p3 0.3 0.7 0.95)

Ultra-wide gamut for HDR and future displays:

color(rec2020 0.3 0.7 0.95)

The component automatically detects which gamut contains your color and displays a badge:

• srgb - Fits in standard sRGB
• p3 - Requires Display P3
• rec2020 - Requires Rec2020
• xyz - Beyond Rec2020