Convert hex color codes to RGB and back, with a live preview.
A hex colour code and an RGB triplet describe identical values in different bases. Hex writes each of the three channels as two hexadecimal digits; RGB writes them as decimal numbers from 0 to 255. Converting between them is pure notation, with no colour information gained or lost.
Each hex pair converts by multiplying the first digit by 16 and adding the second, where A=10 through F=15.
FF = (15 x 16) + 15 = 25557 = (5 x 16) + 7 = 8733 = (3 x 16) + 3 = 5180 = (8 x 16) + 0 = 128Going the other way, divide by 16 for the first digit and take the remainder for the second: 200 / 16 = 12 remainder 8, so 200 is C8.
| Colour | Hex | RGB |
|---|---|---|
| White | #FFFFFF | 255, 255, 255 |
| Black | #000000 | 0, 0, 0 |
| Red | #FF0000 | 255, 0, 0 |
| Green | #00FF00 | 0, 255, 0 |
| Blue | #0000FF | 0, 0, 255 |
| Mid grey | #808080 | 128, 128, 128 |
| Yellow | #FFFF00 | 255, 255, 0 |
| Cyan | #00FFFF | 0, 255, 255 |
A useful pattern: when all three channels are equal the colour is a neutral grey, and the value tells you how light it is. Any hex code of the form #XXYYZZ where the pairs match is grey.
CSS allows a three-digit form where each digit is doubled: #F53 expands to #FF5533, and #000 to #000000. It only works when both digits of each pair are identical, so #FF5733 cannot be shortened. There is also an eight-digit form adding alpha — #FF5733CC — and a matching four-digit shorthand.
rgba() adds a fourth value between 0 and 1 for opacity: rgba(255, 87, 51, 0.5) is half-transparent. In hex, the alpha pair uses the same 0-255 scale, so 50% opacity is 80. Useful conversions: 25% is 40, 50% is 80, 75% is BF, and fully opaque is FF.
A note on where transparency is applied: opacity in CSS affects an element and all its children, while an alpha colour value affects only the property it is applied to. Using rgba() on a background leaves the text fully opaque, which is usually what you want.
Neither hex nor RGB corresponds to how people think about colour. Making a colour slightly lighter in RGB means adjusting three numbers by uneven amounts and hoping the hue does not shift. HSL — hue, saturation, lightness — separates those concerns:
Building a palette is far simpler in HSL: keep hue and saturation fixed and vary lightness for a set of consistent tints and shades. Our colour palette generator works on that principle.
Converting a colour is often a step toward checking whether text on it will be readable. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, measured from relative luminance rather than from the RGB values directly — the calculation weights green most heavily and red least, because human vision is most sensitive to green.
The practical consequence is that two colours with similar-looking RGB values can have very different contrast against white. Yellow text on white fails badly despite yellow being a "bright" colour, because its luminance is high. Always measure rather than eyeball it.
None. They are the same three channel values written in base 16 and base 10. Use whichever fits the context — hex is conventional in CSS and design tools, RGB is easier to manipulate programmatically.
Each digit is doubled, so #F53 becomes #FF5533. It only works when both digits of each pair match, which is why most colours need the full six digits.
Append a two-digit alpha pair on the same 0-255 scale: 80 for 50%, BF for 75%, FF for fully opaque. Alternatively use rgba() with a decimal from 0 to 1.
Displays vary in calibration, colour gamut and brightness. The same sRGB value renders differently on an uncalibrated monitor, and wide-gamut displays may render it more saturated. This is why print work uses colour profiles rather than screen values.
For creating and adjusting colours, yes — it separates hue from lightness, so building tints and shades means changing one number rather than three. Hex remains the convention for storing and sharing a specific colour.