Hex Color Converter

A hex color code is a 6-digit hexadecimal number representing a color in the RGB (Red, Green, Blue) color model. Every color on a digital screen is a combination of red, green, and blue light at intensities from 0 to 255, and hex packs those three numbers into a compact form used across HTML, CSS, and design software.

Format: #RRGGBB, where RR = red channel, GG = green channel, BB = blue channel Each channel is a 2-digit hex number representing a value from 00 (0 decimal) to FF (255 decimal).

Hex to RGB conversion: R = hex(RR) in decimal | G = hex(GG) in decimal | B = hex(BB) in decimal

Hexadecimal to decimal: Hex digits: 0–9 (same as decimal) and A=10, B=11, C=12, D=13, E=14, F=15 Two-digit hex: first digit × 16 + second digit

RGB to Hex conversion: R → hex: divide by 16 for first digit, remainder for second digit Or: convert each R/G/B value to base-16.

Worked examples:

#FF5733 → RGB:

• R = FF = 15×16 + 15 = 255
• G = 57 = 5×16 + 7 = 87
• B = 33 = 3×16 + 3 = 51 Result: rgb(255, 87, 51), a vivid orange-red

rgb(34, 139, 34) → Hex (Forest Green):

• R = 34 → 34 ÷ 16 = 2 remainder 2 → 22
• G = 139 → 139 ÷ 16 = 8 remainder 11 (B) → 8B
• B = 34 → 22 Result: #228B22

Common web colors:

3-digit shorthand: #RGB where each digit is doubled: #F5A = #FF55AA. Used in CSS for colors where both hex digits of each channel are identical.

Alpha channel (transparency): #RRGGBBAA adds a fourth pair for opacity, running from 00 (fully transparent) to FF (fully opaque). #FF573380 is that orange-red at 80 hex, which is 128 out of 255, so roughly half opaque.

Contrast, and why the calculator reports it. Picking a colour is half the job; the other half is knowing what text can sit on it. The Web Content Accessibility Guidelines (WCAG) measure that as a contrast ratio between 1:1 and 21:1, built from relative luminance, and the thresholds are 4.5:1 for body text and 3:1 for large text. Two things about the luminance formula surprise people. Green is weighted at 0.7152 against blue’s 0.0722, because human eyes are far more sensitive to green, which is why a pure blue looks dark and a pure green looks bright at the same numeric value. And each channel is gamma-corrected before weighting, so luminance is not simply the average of the three numbers.

The practical consequence: a mid-grey like #808080 fails against both white and black text at roughly 4:1 and 5.3:1, so it is a poor background for small text either way. The calculator names the better of the two and grades it.