Enter a hex code — three, four, six or eight digits — and get rgb(), hsl() and the channel values, a preview, and the contrast against white and black text.
Runs entirely in your browser — nothing you enter here is sent to a server.
A hex color is three numbers in disguise. After the #, the first two digits are the red channel, the next two green, the last two blue — each a hexadecimal number from 00 to FF, which is 0 to 255 in decimal. To convert a pair, multiply the first digit by 16 and add the second, counting A–F as 10–15: E0 is 14 × 16 + 0 = 224.
So #2F3EE0 is red 47, green 62, blue 224: a little red, a little green and a lot of blue. With some practice you can read a hex code at a glance — equal pairs mean grey, a high first pair means reddish, and so on.
#FC0 is shorthand for #FFCC00: each digit is doubled. A fourth digit, as in #FC08, is a shorthand alpha.
The last pair is opacity. #2F3EE080 is the same blue at about 50%; it converts to rgba(47, 62, 224, 0.5).
Canvas and WebGL code, image libraries, LED and print workflows, and anything that calculates with colors works on channel values, not hex strings.
Shaders, game engines and some design APIs express channels as fractions. Divide each value by 255.
The two contrast ratios show how readable white and black text would be on this color, using the WCAG formula. A ratio of at least 4.5:1 passes level AA for normal text, 3:1 is enough for large text and interface icons, and 7:1 reaches AAA. It is a quick way to choose the text color for a button or a badge: pick whichever of the two has the higher ratio, and reconsider the background if neither reaches 4.5.
Split the six digits into three pairs and convert each from hexadecimal to decimal. #FF6347 gives FF = 255, 63 = 99, 47 = 71, so rgb(255, 99, 71).
It is shorthand in which every digit is doubled: #ABC is the same as #AABBCC. It can only express colors whose pairs happen to repeat.
The alpha channel, the opacity of the color: 00 is fully transparent and FF fully opaque. In CSS the order is #RRGGBBAA.
WCAG level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1.
Upzilla checks your sites, servers and APIs around the clock and alerts you the moment something breaks. 10 monitors free, no card required.