Converter
RGB to HEX Converter
Three numbers in, one six-character string out. The rules that trip people up are padding and shorthand, and both are covered below.
These values are mathematical approximations. Ink, paper, press calibration and colour profile all change the printed result — always approve colour from a physical proof. Full disclaimer.
How the conversion works #
A worked example #
Crimson, rgb(220, 20, 60).
- 220 ÷ 16 = 13 remainder 12. Thirteen is D, twelve is C, so red is DC.
- 20 ÷ 16 = 1 remainder 4. Green is 14.
- 60 ÷ 16 = 3 remainder 12. Blue is 3C.
- Joined together:
#DC143C.
If green had been 4 rather than 20, the pair would be 04 — not 4. Drop that zero and the whole string shifts left, turning a valid colour into a different one or into nonsense. Every conversion function needs an explicit pad step, and it is worth writing a test for exactly this case.
Common RGB to hex values #
| Colour | RGB | HEX | CMYK |
|---|---|---|---|
| Black | 0, 0, 0 | #000000 | 0, 0, 0, 100 |
| White | 255, 255, 255 | #FFFFFF | 0, 0, 0, 0 |
| Red | 255, 0, 0 | #FF0000 | 0, 100, 100, 0 |
| Lime | 0, 255, 0 | #00FF00 | 100, 0, 100, 0 |
| Blue | 0, 0, 255 | #0000FF | 100, 100, 0, 0 |
| Yellow | 255, 255, 0 | #FFFF00 | 0, 0, 100, 0 |
| Cyan | 0, 255, 255 | #00FFFF | 100, 0, 0, 0 |
| Magenta | 255, 0, 255 | #FF00FF | 0, 100, 0, 0 |
| Dodger blue | 30, 144, 255 | #1E90FF | 88, 44, 0, 0 |
| Navy | 0, 0, 128 | #000080 | 100, 100, 0, 50 |
| Teal | 0, 128, 128 | #008080 | 100, 0, 0, 50 |
| Forest green | 34, 139, 34 | #228B22 | 76, 0, 76, 45 |
| Olive | 128, 128, 0 | #808000 | 0, 0, 100, 50 |
| Orange | 255, 165, 0 | #FFA500 | 0, 35, 100, 0 |
| Crimson | 220, 20, 60 | #DC143C | 0, 91, 73, 14 |
| Maroon | 128, 0, 0 | #800000 | 0, 100, 100, 50 |
| Purple | 128, 0, 128 | #800080 | 0, 100, 0, 50 |
| Hot pink | 255, 105, 180 | #FF69B4 | 0, 59, 29, 0 |
| Silver | 192, 192, 192 | #C0C0C0 | 0, 0, 0, 25 |
| Charcoal | 54, 69, 79 | #36454F | 32, 13, 0, 69 |
Questions #
Why does my channel value produce a single hex digit?
Any value below 16 converts to one digit, and it must be padded with a leading zero to keep the pairs aligned. 10 becomes 0A, not A. Getting this wrong is the most common bug when people write their own conversion function.
Can every RGB colour be shortened to three digits?
No. Only when each pair is a doubled digit. 255, 0, 170 gives #FF00AA which shortens to #F0A, but 30, 144, 255 gives #1E90FF which cannot be shortened without changing the colour.
Should I write hex in upper or lower case?
Either renders identically. Lower case is the more common convention in CSS codebases; upper case reads more clearly in design documentation. The only thing that matters is consistency within a project.
What if my values are outside 0 to 255?
They should be clamped to the range before converting. A value of 300 is not a brighter red, it is invalid, and different tools will handle it differently. This converter clamps rather than wrapping.