CSS Relative Colors Playground

Generate colors from an origin via rgb()/hsl()/color(from …); adjust channels, lightness, saturation, and alpha.

Origin Color Picker

Origin Text

Alpha

Factor (channels/lightness)

OKLab Lightness Factor

OKLCH Chroma Factor

Current Origin

rgb(255 0 0)

Origin (same as input)

rgb(from var(--origin) r g b / 1.00)

Reduce red channel proportionally

rgb(from var(--origin) calc(r * 0.80) g b / 1.00)

Reduce green channel proportionally

rgb(from var(--origin) r calc(g * 0.80) b / 1.00)

Reduce blue channel proportionally

rgb(from var(--origin) r g calc(b * 0.80) / 1.00)

HSL: reduce lightness

hsl(from var(--origin) h s calc(l * 0.80) / 1.00)

OKLab: increase lightness

rgb(from var(--origin) r g b / 1.00)

OKLCH: increase saturation

rgb(from var(--origin) r g b / 1.00)