HEX to RGB converter

Paste a hex code, get RGB, HSL and a live swatch — plus the contrast ratio against black and white, which is the thing you were going to check next anyway.

RGB

HEX
RGB
HSL
Relative luminance
Contrast vs white
Contrast vs black

Hex digits to decimal

Each pair of hex digits is one colour channel. The first digit is worth sixteen times the second.

HexDecimalHexDecimal
00090144
1117A0160
2234B0176
3351C0192
4468CC204
5585D0208
66102E0224
77119F0240
80128FF255

Common colours

NameHEXRGB
Black#000000rgb(0, 0, 0)
White#FFFFFFrgb(255, 255, 255)
Red#FF0000rgb(255, 0, 0)
Green#008000rgb(0, 128, 0)
Blue#0000FFrgb(0, 0, 255)
Yellow#FFFF00rgb(255, 255, 0)
Cyan#00FFFFrgb(0, 255, 255)
Magenta#FF00FFrgb(255, 0, 255)
Mid grey#808080rgb(128, 128, 128)

Related calculators

A hex code is three numbers in base 16

#0E6B54 is not one number, it is three: 0E, 6B and 54, each a base-16 value from 00 to FF describing how much red, green and blue to emit. FF is 255, the maximum for a channel in 8-bit colour. Once you see the code as three pairs, the conversion is simply reading each pair in base 16.

#RRGGBB → rgb(R, G, B)   |   each pair: first digit × 16 + second digit

Three-digit shorthand

CSS allows a three-digit form where each digit is doubled: #0B5 expands to #00BB55. It is a convenience for round values only — there is no three-digit way to write #0E6B54, because 0E cannot be produced by doubling a single digit. The converter accepts both forms.

HSL is easier to reason about

RGB is how a screen works, not how people think about colour. HSL restates the same colour as hue (an angle on the colour wheel), saturation and lightness, which makes it far easier to produce a deliberate variation: keep the hue, drop the lightness, and you have a darker version of the same colour rather than an unrelated one. Both are shown for that reason.

Why contrast appears here

If you are converting a brand colour, the next question is almost always whether text is legible on it. WCAG 2.1 defines contrast as a ratio between relative luminances, and asks for at least 4.5:1 for body text or 3:1 for large text. The contrast rows show the ratio against black and white with the verdict, so the check happens without leaving the page. Note that luminance is not brightness as your eye judges it — green contributes far more than blue, which is why the coefficients differ.

Frequently asked questions

How do I convert HEX to RGB?
Split the six digits into three pairs and read each as a base-16 number. #0E6B54 gives 0E = 14 red, 6B = 107 green and 54 = 84 blue.
What does FF mean in a hex colour?
FF is 255 in decimal, the maximum value for a colour channel. #FFFFFF is therefore full red, green and blue, which is white.
Can I use a 3-digit hex code?
Yes. CSS expands each digit by doubling it, so #0B5 means #00BB55. It only works for values where both digits of a pair are the same.
What is the difference between RGB and HSL?
They describe the same colour differently. RGB gives the amount of each primary a screen emits; HSL gives hue, saturation and lightness, which is more intuitive for creating lighter or darker variants.
What contrast ratio do I need for accessible text?
WCAG 2.1 asks for at least 4.5:1 for normal body text and 3:1 for large text at AA level, rising to 7:1 for AAA.

How ListCalc calculates · Report an error

Guides & articles