Color Converter

About the Color Converter

Enter a HEX color, or pick one with the color picker, and see the same color as RGB and HSL with a live swatch. Three-digit shorthand such as #f00 is expanded, and the leading # is optional.

The converter works with opaque sRGB colors: eight-digit HEX values that carry an alpha channel are not accepted.

How to use it

1. Type a HEX value such as #3b82f6, or pick a color with the picker.
2. Read the RGB and HSL values beside the live swatch.
3. Copy the value you need in the format your code or design tool expects.

Worked example

HSL values are rounded to whole numbers.

#3b82f6

rgb(59, 130, 246)
hsl(217, 91%, 60%)

Common mistakes and gotchas

• HSL percentages are rounded, so converting back from the rounded HSL can land one step away from the original HEX value.
• HEX digits are case-insensitive, but only 3 or 6 digits are valid; #12345 or an eight-digit value is rejected.
• Pure greys have no hue, so their HSL hue is shown as 0.
• Colors look different on different screens; the numbers are exact, the appearance is not.

Frequently asked questions