What is the difference between hsl() and oklch()?

hsl() describes color as hue, saturation and lightness in the sRGB gamut and is universally supported. oklch() uses the perceptually uniform OKLab space, so equal lightness values look equally bright across hues. oklch() can also reach colors outside sRGB on wide-gamut displays.

Why does the tool use spaces instead of commas?

Modern CSS Color 4 syntax separates channels with spaces, like hsl(210 80% 55%), and puts alpha after a slash. The comma form still works for hsl() but oklch() only accepts the space form, so the builder uses the modern style consistently.

What ranges are valid for each channel?

For hsl(), hue is degrees, and saturation and lightness are 0–100 percent. For oklch(), lightness is 0–1, chroma is roughly 0–0.4 in practice, and hue is degrees. The tool clamps any out-of-range input to keep the string valid.

How is alpha expressed?

Alpha is written after a slash, as in hsl(210 80% 55% / 0.5) or oklch(0.7 0.15 250 / 50%). The builder omits the alpha part entirely when opacity is 100 percent so the string stays clean.

Is oklch() safe to use in production?

Yes, in current browsers. All major engines support oklch() as of recent versions. For older browsers, provide an hsl() or hex fallback declaration before the oklch() one so unsupported browsers ignore the modern value.

CSS hsl() / oklch() String Builder

Hand-writing CSS color functions is error-prone: it is easy to forget a percent sign, mix up comma and space syntax, or push a channel out of its legal range. This builder produces a guaranteed-valid hsl() or oklch() string from plain numeric inputs and shows a live swatch so you can see the result before pasting.

How it works

Each channel is clamped to the range the CSS specification allows, then the string is assembled in modern space-separated syntax:

hsl()   →  hsl(<hue> <sat>% <light>% [/ <alpha>])
oklch() →  oklch(<L 0–1> <C 0–0.4> <hue> [/ <alpha>%])

For hsl() the saturation and lightness carry percent signs and hue is in degrees. For oklch() the lightness is a 0–1 number, chroma is an unbounded positive number (practically capped near 0.4 inside sRGB), and hue is in degrees. The alpha part is only emitted when opacity is below 100 percent.

Example and tips

Setting hue 210, saturation 80, lightness 55 yields hsl(210 80% 55%), a clean sky blue. Switching to oklch() with L 0.7, C 0.15, hue 250 gives a perceptually even blue that keeps its apparent brightness if you later rotate the hue. When targeting older browsers, place an hsl() or hex declaration before the oklch() one as a fallback — unsupported engines will simply ignore the line they cannot parse.