Hex to RGB Converter

How does a hex code turn into RGB values?

A hex colour packs three base-16 numbers into one string, two digits per channel. Take #3B82F6 as an example: the pair 3B is red, 82 is green and F6 is blue. Each pair reads as sixteen times the first digit plus the second, where the letters A to F stand for 10 to 15.

The first pair works out to (3 × 16) + 11 = 59, the second to (8 × 16) + 2 = 130, then the third to (15 × 16) + 6 = 246. That one step, repeated three times, is the whole of a hex code to rgb conversion.

Two hex digits hold exactly 0 to 255, which is why the channel range stops at 255 rather than at 100 or 1000. A lone hex number outside a colour context converts in the hex converter instead.

How do you convert RGB to hex?

The reverse conversion divides each channel by 16. Take rgb(59, 130, 246) as an example: 59 divided by 16 leaves 3 remainder 11, where 11 becomes B, so red is written 3B. Green follows the same path, since 130 divided by 16 leaves 8 remainder 2, which pairs up as 82. And 246 leaves 15 remainder 6, so blue lands on F6.

Any channel below 16 needs a padding zero to keep its pair intact, so rgb(1, 2, 3) becomes #010203 rather than #123. An rgb color to hex result arrives in uppercase, which trips a plain string comparison against design tokens stored in lowercase.

Each channel has to land on a whole number inside 0-255. A channel of 300 or -5 returns an error, since the converter never clamps a value to fit. A decimal rounds to the nearest whole number first, which sends rgb(59.6, 130, 246) through as 60 and lands it on #3C82F6.

Which hex formats does the converter accept?

Codes rarely arrive as a clean 6-digit string. The 3-digit shorthand doubles each digit rather than padding it with zeros, so #F00 expands to #FF0000 and #ABC becomes #AABBCC rather than #0A0B0C. The leading # is optional and the converter trims surrounding spaces, which lets a value copied straight out of a stylesheet go through as it is.

Two lengths get turned down here, both of them common in real palettes. The 8-digit form with alpha (#RRGGBBAA) returns an error, as does the 4-digit shorthand, because the parser takes 3 or 6 hex digits and nothing else. The same rule catches anything outside 0-9 and A-F, with ZZZ the classic case.

Which text colour stays readable on a background colour?

Black text on #3B82F6 scores 5.71:1 while white text on that same blue reaches 3.68:1, so the panel names black as the readable option. The ratio compares relative luminance, a weighted measure of how much light a colour sends back, in which green counts for 0.7152 of the total against 0.2126 for red and 0.0722 for blue.

The four WCAG bars are 4.5:1 for AA body text, 3:1 for AA large text, 7:1 for AAA body text and 4.5:1 for AAA large text, where large text means around 18pt or 14pt in bold. The scale runs from 1:1, a colour against itself, up to 21:1, the exact figure black and white reach together.

#767676 against white measures 4.54:1, the thinnest pass the AA body bar allows. One unit lighter per channel and it fails, since #777777 falls to 4.48:1. Those two greys look identical on screen and land on opposite sides of an accessibility audit, so a palette that looks safe still needs the number before sign-off.