OKLCH Color Explorer

Explore how Lightness, Chroma, Hue and Alpha variations affect your OKLCH colors. Click any color to copy its value.

OKLCH Color Input

Lightness Variants

Adjusting lightness from dark to bright while keeping chroma and hue constant. Lighteness (L) ranges from 0 to 1.

L: 0.36

oklch(0.36 0.19 266)

L: 0.46

oklch(0.46 0.19 266)

L: 0.56

oklch(0.56 0.19 266)

Base

L: 0.66

oklch(0.66 0.19 266)

L: 0.76

oklch(0.76 0.19 266)

L: 0.86

oklch(0.86 0.19 266)

Chroma Variants

Adjusting color intensity from muted to vibrant while keeping lightness and hue constant. Chroma (C) ranges from 0 to theoretically unlimited vibrant colors, but in practice values above ~0.5 may not render well.

C: 0.09

oklch(0.56 0.09 266)

C: 0.14

oklch(0.56 0.14 266)

C: 0.19

oklch(0.56 0.19 266)

Base

C: 0.24

oklch(0.56 0.24 266)

C: 0.29

oklch(0.56 0.29 266)

C: 0.34

oklch(0.56 0.34 266)

Hue Variants

Rotating through different hues while keeping lightness and chroma constant. Hue (H) is measured in degrees around the color wheel (0-360).

H: 146

oklch(0.56 0.19 146)

H: 206

oklch(0.56 0.19 206)

H: 266

oklch(0.56 0.19 266)

Base

H: 326

oklch(0.56 0.19 326)

H: 26

oklch(0.56 0.19 26)

H: 86

oklch(0.56 0.19 86)

Alpha (Transparency) Variants

Varying alpha from fully transparent to fully opaque. Useful for overlays and subtle UI accents. Alpha (A) ranges from 0 (transparent) to 1 (opaque).

A: 0.00

oklch(0.56 0.19 266 / 0)

A: 0.20

oklch(0.56 0.19 266 / 0.2)

A: 0.40

oklch(0.56 0.19 266 / 0.4)

A: 0.60

oklch(0.56 0.19 266 / 0.6)

A: 0.80

oklch(0.56 0.19 266 / 0.8)

A: 1.00

oklch(0.56 0.19 266 / 1)

Base

Theme

Switching modes only affects L (lightness). Hue/Chroma stay constant.

About OKLCH

OKLCH is a perceptually uniform color space that makes it easy to create consistent color palettes by adjusting lightness, chroma, hue and alpha independently.