CSS HSL Color Generator

The css hsl color generator writes a picked colour as a stylesheet-ready hsl() string, with its hex, rgb(), rgba() and oklch() equivalents on the rows beside it.

What is CSS HSL Color Generator?

HSL is the notation people think in — hue, saturation, lightness, three nameable knobs — which is why stylesheets full of hsl() values read like intentions rather than arithmetic. The css hsl color generator produces that string from a visual pick: set the colour by eye and copy the hsl notation that comes back. The page is one colour field above a five-row panel — hex, rgb, rgba, hsl and oklch — each row copyable and all five generated together.

• hsl — hue in degrees and saturation and lightness as percentages, printed with two decimals, as in hsl(217.22, 91.22%, 59.8%).
• The hue is a real number rather than a rounded integer, which is the hsl value generator's honest answer for a colour that did not originate on a whole degree.
• hex — upper-case six digits, for token files that prefer the short spelling.
• rgb and rgba — decimal channels, with the alpha in the four-argument form fixed at 1.
• oklch — perceptual lightness, chroma and hue, for anyone who needs even steps rather than familiar ones.

The arithmetic is not transcribed by hand. The parser and formatter come from the shared colour library, the field normalises whatever it receives — a three-digit shortcut, a named colour, a pasted rgb() string — into one six-digit base before the panel is built, and the hsl row is derived from that base. Nothing about the row depends on what you typed, which is why the numbers are consistent between visits and why two people copying the same swatch get the same string.

hsl() is at its best where the numbers are the interface. Tunable color channels that a person will adjust — hue for the family, saturation for the temperature, lightness for the state — are exactly what the three components expose, so a hover state or a quiet background variant can be derived by moving one number instead of hunting for a new colour. That is also the notation's trap: because the components move so easily, it is tempting to build a whole scale in them, and equal steps in HSL are not equal steps to the eye.

• Hue carries decimals: a colour picked visually rarely lands on a whole degree, so hsl(217.22, ...) is the correct answer rather than a mistake.
• No alpha: the rgba row reads 1 and an alpha in the input is discarded when the field normalises the value.
• Comma syntax only — the modern space-separated form with a slash for alpha is valid CSS but is not printed here.
• Lightness is not perceptual: two hues at the same lightness can look very different in weight, so hsl() is a poor coordinate system for building even steps.

Use hsl() where the value will be tuned by a human later — a hover state nudged by lightness, a tint derived by lowering saturation — because the three components map onto the things a person changes, and a reviewer can see intent in the numbers instead of decoding a six-digit string. Where the steps have to look even rather than be editable, prefer the oklch row: it is the coordinate system that keeps lightness consistent across hues, which hsl() only approximates. And when only the string matters, the rgb and hex generators print their own rows from the same panel, so the notation you need is never a second lookup away. Derive the family in oklch where the steps have to look even, quote it in hsl where a person has to edit it, and the two habits stop competing.

How to use CSS HSL Color Generator

1. Set the colour with the picker field, or paste a value and let the field normalise it.
2. Read the hsl() string from the fourth row of the panel.
3. Copy it into the stylesheet that styles colours by channel.
4. Fall back to the oklch row wherever the value needs perceptually even steps.

When to use CSS HSL Color Generator vs related tools

Use this when a stylesheet styles colours by hue and lightness — tunable systems, hover states, themed shades. The RGB generator and the HEX generator print their own notations from the same panel, the HSL channel adjuster edits the three numbers rather than quoting them, and the format converter covers the lab, lch and hwb spellings when a destination wants those.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about CSS HSL Color Generator