Why prefer oklch() over hsl()?

Oklch is perceptually uniform, so equal numeric steps in lightness or chroma look equally different to the eye. HSL is tied to sRGB and its lightness is uneven across hues, which makes gradients and lightness ramps look muddy. Oklch also reaches wide-gamut colors.

What does the slash mean in rgb(255 0 0 / 0.5)?

The slash separates the alpha (opacity) channel from the color channels in the modern space-separated syntax. It applies to rgb, hsl, hwb, lab, lch, oklab, oklch and color. Alpha can be a number 0–1 or a percentage.

How does color-mix() work?

color-mix(in , colorA p%, colorB) interpolates two colors in the named space, optionally with explicit percentages. The interpolation space matters: mixing in oklch gives smoother, more even results than mixing in srgb. A hue interpolation method can also be set.

What is relative color syntax?

Relative color syntax lets you derive a color from another using from: rgb(from var(--c) r g b / 0.5) exposes the source channels as keywords you can reuse or modify. It works across spaces, so you can read a color in one space and output in another.

Does this tool change colors on my page?

No. It is a static, searchable reference that runs entirely in your browser. Nothing is uploaded, stored or applied to any document.

CSS Color Functions Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

A map of CSS color functions

CSS now offers far more than rgb() and hsl(). The Color Module Levels 4 and 5 add perceptual spaces (lab, lch, oklab, oklch), wide-gamut access via color(), on-the-fly mixing with color-mix(), relative color syntax and scheme-aware helpers like light-dark(). This reference lists each function with a worked example, the color space it lives in and practical notes.

How it works

Every modern color function shares one shape: space-separated channels with an optional alpha after a slash, for example oklch(0.62 0.18 29 / 0.8). The channels differ per space. Cylindrical functions (hsl, hwb, lch, oklch) take a hue angle plus two magnitude channels, so changing one channel keeps the perceived hue stable. Rectangular functions (lab, oklab) use signed a and b axes.

The color() function names an explicit space such as display-p3 or rec2020, which is how you reach colors outside sRGB. color-mix() interpolates two colors in a stated space — and the space changes the result, so color-mix(in oklch, …) and color-mix(in srgb, …) give different midpoints. Type a keyword above to filter the table to the functions you need.

Tips and gotchas

Prefer oklch() for gradients and lightness ramps: equal steps look even, and you avoid the grey dead-zone that plagues hsl() interpolation.
Wide-gamut colors only render on capable displays; always provide an sRGB-safe fallback for older browsers and screens.
The slash-alpha form replaces the old rgba()/hsla() aliases, which remain valid but are no longer needed.
light-dark() requires color-scheme to be declared on the element or root, or it has nothing to switch on.