Color converter (HEX / RGB / HSL)

How it works

Designers generally work with HEX codes (for example those copied from Figma or design software), while modern CSS often takes advantage of the HSL format to easily adjust a color's hue, saturation or lightness without recalculating a HEX code by hand — useful for generating lighter or darker variants of the same brand color for hover states, disabled states, or dark themes. This tool automatically detects whether you've pasted a HEX, RGB or HSL code and converts it to the format you need.

What is the difference between HEX, RGB and HSL?

HEX ( #rrggbb ) and RGB ( rgb(r, g, b) ) both describe a color by its red, green and blue components — HEX in base 16, RGB in base 10 — and represent exactly the same information in two different notations. HSL (hsl(h, s%, l%)) describes the same color differently: by its hue (an angle on the color wheel), its saturation and its lightness, which makes it much more intuitive to "keep the same color but lighten it" or to "keep the same lightness but change the hue".

Why use HSL rather than HEX in CSS?

Because it's easy to derive consistent variants of a color by only changing the lightness component (for example hsl(217, 91%, 60%) for the base color and hsl(217, 91%, 40%) for a darker hover state), without having to recalculate a new HEX code each time or guess by eye whether the hue stays identical.

100% local processing: the conversion happens directly in your browser via WebAssembly, without any call to an external server.