Design tools give you hex codes, CSS often wants rgb(), and tweaking a colour’s lightness is easiest in HSL. They are three ways of writing one colour.
HEX to RGB by hand
A hex colour has three pairs of digits for red, green and blue. #3B82F6 splits into 3B, 82 and F6. Each pair is a base-16 number from 0 to 255: 3B = 3 × 16 + 11 = 59, 82 = 130 and F6 = 246. So #3B82F6 is rgb(59, 130, 246), which is also hsl(217, 91%, 60%).
Using the converter
- Type a hex code into the Color Converter, with or without the #.
- Read the HEX, RGB and HSL values and copy the one you need.
Three-digit shorthand works too: #fff expands to white, rgb(255, 255, 255) and hsl(0, 0%, 100%).
Reading HSL
- Hue is the position on the colour wheel in degrees: 0 is red, 120 is green, 240 is blue.
- Saturation is how vivid it is, from 0% (grey) to 100%.
- Lightness runs from 0% (black) through 50% to 100% (white).
That makes variations easy. Keep the hue and saturation of hsl(217, 91%, 60%) and lower the lightness to 45% for a darker button, or raise it for a hover tint.
Which format to use
Hex is compact and common in design files. RGB is useful when you need to add transparency with rgba(). HSL is best for building palettes by adjusting lightness. All three render identically in the browser.
Frequently asked questions
Does the converter support 8-digit hex with transparency?
The converter takes standard 3- and 6-digit codes. For transparency, use the RGB values and add the alpha yourself in rgba().
Are conversions exact?
HEX and RGB are exact equivalents. HSL values are rounded to whole numbers, so converting back may differ by a unit.