About rgb ↔ hex
Colours on screens are made by mixing red, green and blue light. HEX, RGB and HSL are three ways of writing the same mixture, and this tool keeps them in sync.
The three notations
- HEX: #2449B8 uses two hexadecimal digits for each of red, green and blue.
- RGB: rgb(36, 73, 184) gives each channel as a number from 0 to 255.
- HSL: hue (0 to 360 degrees), saturation and lightness in percent, easier for making lighter or darker variants.
Short HEX
A three-digit HEX such as #0af is shorthand where each digit is doubled, so it equals #00aaff.
Converting by hand
Split the HEX into pairs and convert each from base 16 to base 10. For example B8 = 11 × 16 + 8 = 184.
A worked example
Take rgb(36, 73, 184). Red 36 is 24 in hex, green 73 is 49 and blue 184 is B8, so the HEX code is #2449B8. In HSL the same colour is about hsl(225, 67%, 43%), which tells you it is a fairly saturated, medium-dark blue.
Where each format is used
- CSS and design tools accept all three, so use whichever is easiest to edit.
- Android resources and many design handoffs use HEX.
- HSL is best when you want a lighter or darker variant, since you only change the last number.
