How To Convert Colors Calculator
A colour can be written in several ways, and each notation is convenient for a different job. Hex is compact for stylesheets, RGB maps directly to how a screen mixes light, and HSL is the one that lets you reason about a colour by eye.
Hex code
#3B82F6
- Hex
- #3B82F6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217, 91%, 60%)
- Contrast on white
- 3.68:1
- Contrast on black
- 5.71:1
Contrast ratios follow the WCAG relative-luminance formula. 4.5:1 or more passes AA for normal text.
The formula this calculator uses
Hex RRGGBB = (R x 65536) + (G x 256) + B
- R
- Red channel, 0 to 255
- G
- Green channel, 0 to 255
- B
- Blue channel, 0 to 255
- H, S, L
- Hue in degrees, saturation and lightness as percentages
How to check the result by hand
- 1
Split the hex code into three pairs
Take the six digits two at a time. #3B82F6 becomes 3B, 82 and F6.
- 2
Convert each pair from base sixteen
Multiply the first digit by sixteen and add the second. 3B is 3 times 16 plus 11, which is 59.
- 3
Write the RGB triple
The three results are the red, green and blue channels. 3B82F6 is rgb(59, 130, 246).
- 4
Convert to HSL if you need to reason about it
Find the largest and smallest channel to get the lightness, then derive the saturation and hue from the spread.
- 5
Check the contrast
Compute the relative luminance of the colour and of the background, then divide the lighter plus 0.05 by the darker plus 0.05. Aim for 4.5 to 1 for body text.
For worked examples, common mistakes and the limits of this formula, read the full How To Convert Colors page.