RGB to Hex Converter
Set red, green and blue from 0 to 255 with the sliders or type them in. The hex code updates as you go, with the working for each channel underneath.
Hex for rgb(46, 134, 171)
#2E86AB
Blue. Each pair of digits is one channel in base 16.
- HEX#2E86AB
- RGBrgb(46, 134, 171)
- HSLhsl(198, 58%, 43%)
- HSVor HSBhsv(198, 73%, 67%)
- CMYKnaive, no profilecmyk(73%, 22%, 0%, 33%)
- OKLCHoklch(58.5% 0.099 230.1)
- LABCIELAB, D65lab(52.5% -13.4 -27.1)
- CSS namecloseststeelblue
How this works: Method, 7 sources, Checked against 2 worked examples,
How this works
Method
Each RGB channel is a whole number from 0 to 255, and in hex it takes exactly two digits. Divide the value by 16: the whole number part is the first digit and the remainder the second, with remainders from 10 to 15 written A to F. For 171 that is 171 ÷ 16 = 10 remainder 11, so AB. Full method
Sources
- Wikipedia, Web colors
- W3C, CSS Color Module Level 4
- W3C: WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum)
- W3C, WCAG 2.2: definitions of contrast ratio and relative luminance
- Björn Ottosson (2020), A perceptual color space for image processing
- Myndex, SAPC-APCA documentation (APCA-W3 0.0.98G-4g)
- Machado, Oliveira and Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency
How it’s tested
2 worked examples for this page are checked by automated tests before every release: given the inputs, the tool must show the expected answer.
Changes
- Added eight pages: a colour picker for photos, a WCAG 2.2 and APCA contrast checker, a palette generator, a colour blindness simulator, and hex, RGB and CMYK converters.
- Redesigned: paste a colour in any format, HSV and CMYK added, opacity, a contrast check against white and black text, and colour harmonies.
- Fixed a crash when opening the colour picker.
- First published.
How to convert RGB to hex
Each RGB channel is a whole number from 0 to 255, and in hex it takes exactly two digits. Divide the value by 16: the whole number part is the first digit and the remainder the second, with remainders from 10 to 15 written A to F. For 171 that is 171 ÷ 16 = 10 remainder 11, so AB.
Do this for red, green and blue and write the three pairs one after another behind a #. rgb(46, 134, 171) gives 2E, 86 and AB, so the hex code is #2E86AB. A value below 16 needs a leading zero: 9 is 09, so rgb(9, 9, 9) is #090909, never #999, which is a much lighter grey.
If a value has decimals, such as 127.5 from a design tool or a percentage like 50%, round it to the nearest whole number first: hex codes can only hold whole numbers. Values outside 0 to 255 are clipped to the nearest end of the range. The sliders here only allow whole numbers from 0 to 255 for that reason.
first digit = ⌊value ÷ 16⌋, second digit = value mod 16
- A hex pair runs from 00 to FF, the 256 values of one 8-bit channel, because 16 × 16 = 256. Source: Wikipedia, Web colors.
- In CSS, rgb() and hex notation describe the same sRGB colours; hex is simply the channels written in base 16. Source: W3C, CSS Color Module Level 4.
Channel values and their hex digits
One channel at a time: the decimal value, the division by 16 and the two hex digits it becomes.
| Value | Division by 16 | Hex digits |
|---|---|---|
| 0 | 0 r 0 | 00 |
| 9 | 0 r 9 | 09 |
| 15 | 0 r 15 | 0F |
| 16 | 1 r 0 | 10 |
| 32 | 2 r 0 | 20 |
| 51 | 3 r 3 | 33 |
| 64 | 4 r 0 | 40 |
| 100 | 6 r 4 | 64 |
| 128 | 8 r 0 | 80 |
| 153 | 9 r 9 | 99 |
Show all 16 rowsShow fewer
| 171 | 10 r 11 | AB |
| 192 | 12 r 0 | C0 |
| 204 | 12 r 12 | CC |
| 224 | 14 r 0 | E0 |
| 240 | 15 r 0 | F0 |
| 255 | 15 r 15 | FF |
Frequently Asked Questions
What is rgb(255, 0, 0) in hex?
255 is 15 × 16 + 15, so FF, and 0 is 00: the code is #FF0000, pure red. The same way, rgb(0, 255, 0) is #00FF00 and rgb(0, 0, 255) is #0000FF.
Why does my hex code have only five digits?
A channel below 16 has lost its leading zero. Every channel must be written with two digits, so rgb(5, 120, 200) is #0578C8, not #578C8. A five-digit code is not valid CSS and browsers ignore it.
How do I convert rgba() with transparency?
Convert the three colour channels as usual, then multiply the alpha (0 to 1) by 255, round it and add it as a fourth pair. rgba(46, 134, 171, 0.5) is #2E86AB80. Opaque colours don’t need the fourth pair.
Does it matter if I write the letters in capitals?
No. #2E86AB and #2e86ab are the same colour to every browser and design tool. Some style guides prefer lower case in code and upper case in documents; pick one and keep to it.