How do you convert HEX to RGB?

Split the six digits into three pairs for red, green and blue. Convert each pair by multiplying the first digit by 16 and adding the second, with A to F meaning 10 to 15. #FF5733 is rgb(255, 87, 51).

How do you convert RGB to HEX?

Divide each value by 16. The whole number is the first hex digit and the remainder is the second, with 10 to 15 written as A to F. 232 becomes E8.

What does a three-digit HEX code mean?

Each digit is doubled, so #FA0 is #FFAA00, or rgb(255, 170, 0). The Lazyblink Color Picker expects the full six-digit form.

Is HEX case sensitive?

No. #4f6ef7 and #4F6EF7 are the same colour.

HEX to RGB: How to Convert a Colour Code by Hand (With Examples)

The short answer

A HEX colour like #4F6EF7 is three two-digit hexadecimal numbers: red 4F, green 6E and blue F7. Convert each pair to decimal by multiplying the first digit by 16 and adding the second, where A to F stand for 10 to 15. So 4F = 4 × 16 + 15 = 79, 6E = 6 × 16 + 14 = 110 and F7 = 15 × 16 + 7 = 247, giving rgb(79, 110, 247). To skip the arithmetic, paste the code into the Color Picker and it shows HEX, RGB, RGBA and HSL together.

How a HEX colour code works

Screens mix red, green and blue light. Each channel has 256 levels, from 0 (off) to 255 (full). A HEX code writes those three levels in base 16, which needs only two digits per channel because 16 × 16 = 256.

Part	Meaning	Range
`#`	Marks it as a HEX colour	—
First two digits	Red	00 to FF (0 to 255)
Middle two digits	Green	00 to FF (0 to 255)
Last two digits	Blue	00 to FF (0 to 255)

Hex digits run 0 to 9 and then A to F:

Hex	A	B	C	D	E	F
Decimal	10	11	12	13	14	15

Upper and lower case mean the same thing: #4f6ef7 and #4F6EF7 are identical.

Converting HEX to RGB step by step

Take #FF5733, a strong orange-red.

Remove the # and split into pairs: FF, 57, 33.

Convert each pair. For a pair written as two digits, the value is (first digit × 16) + second digit.

- FF = 15 × 16 + 15 = 240 + 15 = 255

- 57 = 5 × 16 + 7 = 80 + 7 = 87

- 33 = 3 × 16 + 3 = 48 + 3 = 51

Write the result as rgb(255, 87, 51).

More worked examples

HEX	Red pair	Green pair	Blue pair	RGB
#4F6EF7	4F = 79	6E = 110	F7 = 247	rgb(79, 110, 247)
#1A73E8	1A = 26	73 = 115	E8 = 232	rgb(26, 115, 232)
#2E8B57	2E = 46	8B = 139	57 = 87	rgb(46, 139, 87)
#808080	80 = 128	80 = 128	80 = 128	rgb(128, 128, 128)
#FFFFFF	FF = 255	FF = 255	FF = 255	rgb(255, 255, 255)
#000000	00 = 0	00 = 0	00 = 0	rgb(0, 0, 0)

A quick check: when all three pairs are equal, the colour is a grey. The higher the pairs, the lighter the grey.

Converting RGB back to HEX

Go the other way by dividing by 16.

Divide the value by 16. The whole-number result is the first digit.

The remainder is the second digit.

Turn any 10 to 15 into A to F.

Example for rgb(26, 115, 232):

26 ÷ 16 = 1 remainder 10 → 1A
115 ÷ 16 = 7 remainder 3 → 73
232 ÷ 16 = 14 remainder 8 → E8

Result: #1A73E8. Any value below 16 needs a leading zero, so 9 becomes 09, not 9.

Three-digit shorthand

CSS also allows short codes like #FA0. Each digit is doubled: #FA0 means #FFAA00, which is rgb(255, 170, 0).

The Lazyblink Color Picker expects the full six-digit form. Type #FFAA00 rather than #FA0, or the RGB and HSL values will not be correct.

Using the Color Picker

Open the Color Picker.

Either click the colour swatch and choose a colour visually, or type a code into the HEX value box. The box accepts # followed by up to six hex digits.

Read off the values below:

- HEX, shown in capitals

- RGB, such as rgb(79, 110, 247)

- RGBA, the same with an alpha of 1 (fully opaque)

- HSL, such as hsl(229, 91%, 64%)

- CSS var, a ready line like --color: #4f6ef7;

Click any value to copy it.

Below the values is a row of seven lighter tints, which you can also click to copy. For how those tints are calculated and when to use them, see how to make lighter tints of a colour.

What HSL adds

RGB says how much of each light to mix. HSL describes the same colour in a way that is easier to adjust by hand:

Hue (0 to 360) is the position on the colour wheel: 0 is red, 120 green, 240 blue.
Saturation (0% to 100%) is how vivid it is. 0% is grey.
Lightness (0% to 100%) runs from black through the pure colour to white.

#4F6EF7 is hsl(229, 91%, 64%): a blue, very saturated, a bit lighter than the middle. Want a darker version for a hover state? Lower the lightness to around 50% and keep the hue and saturation. That is harder to do by editing HEX digits.

Where you will use the conversion

CSS with transparency. rgba(79, 110, 247, 0.5) gives a 50% transparent version of #4F6EF7. The RGBA line in the picker is a starting point; change the last number.
Design tools and apps that ask for separate R, G and B fields.
Microsoft Office and some charting tools, whose custom colour dialogs often take RGB numbers.
Checking a brand colour someone sent you as RGB against a HEX value in your stylesheet.

Common mistakes

Reading the pairs in the wrong order. It is always red, green, blue.
Forgetting the letter values. B is 11 and D is 13. A slip here moves a value by 16 or more.
Dropping a leading zero when going from RGB to HEX, which shifts every following digit.
Pasting an eight-digit code like #4F6EF780. The last two digits are alpha (transparency). Use the first six for the colour.
Expecting HSL rounding to match exactly across tools. Tools round hue and percentages to whole numbers, so two apps can differ by one.

Building a full palette rather than converting one colour? Try the Color Palette Generator.