KT Apps

Home › Tools & Calculators › Tint

How to Convert HEX Colour Codes to RGB (and Back)

By KT Apps · Updated

Colours on screens are usually written in one of two ways: as a HEX code such as #FF8800, or as three RGB numbers such as 255, 136, 0. They describe exactly the same thing, and converting between them takes nothing more than a little arithmetic.

This guide explains what the digits mean, shows how to convert HEX to RGB and RGB to HEX by hand with worked examples, lists some common codes, and explains why the same code can look different on two screens. It ends with how to use HEX and RGB in Tint.

What a HEX colour code means

A screen makes each colour by mixing red, green and blue light. Each of the three channels has a value from 0 (off) to 255 (fully on). That gives 256 x 256 x 256 = 16,777,216 possible colours.

A six-digit HEX code is those three values written in base 16, two digits per channel, in the order red, green, blue. #FF8800 splits into FF (red), 88 (green) and 00 (blue). The # is just a marker and is often left out.

Base 16 uses the digits 0 to 9 and then the letters A to F for 10 to 15. Upper and lower case mean the same thing, so #ff8800 and #FF8800 are identical.

HEX to RGB, step by step

  1. Split the code into three pairs: red, green and blue.
  2. For each pair, take the first digit, convert it to a number (A = 10, B = 11, C = 12, D = 13, E = 14, F = 15), and multiply by 16.
  3. Add the value of the second digit.
  4. The result, from 0 to 255, is that channel's RGB value.

Example: #FF8800

FF is 15 x 16 + 15 = 255. 88 is 8 x 16 + 8 = 136. 00 is 0. So #FF8800 is RGB 255, 136, 0, a bright orange.

Example: #1E90FF

1E is 1 x 16 + 14 = 30. 90 is 9 x 16 + 0 = 144. FF is 255. So #1E90FF is RGB 30, 144, 255, a clear sky blue.

Example: #FFB347

FF is 255. B3 is 11 x 16 + 3 = 179. 47 is 4 x 16 + 7 = 71. So #FFB347 is RGB 255, 179, 71, a warm amber.

RGB to HEX, step by step

  1. For each channel, divide the value by 16. The whole-number part is the first digit.
  2. The remainder is the second digit.
  3. Write numbers 10 to 15 as A to F.
  4. Put the three pairs together in the order red, green, blue.

Example: RGB 200, 50, 150

200 / 16 = 12 remainder 8, so C8. 50 / 16 = 3 remainder 2, so 32. 150 / 16 = 9 remainder 6, so 96. The HEX code is #C83296, a deep pink.

Example: RGB 255, 180, 100

255 is FF. 180 / 16 = 11 remainder 4, so B4. 100 / 16 = 6 remainder 4, so 64. The HEX code is #FFB464.

Values under 16 need a leading zero: 5 is written 05, not 5, so every code has exactly six digits.

Some useful codes

Any code where the three pairs are equal, such as #404040 or #C0C0C0, is a neutral grey.

Three-digit codes

In web design you may see short codes such as #F80. Each digit is doubled, so #F80 means #FF8800. Some tools, including Tint, only accept the full six digits, so expand short codes before typing them in.

Why the same code looks different on two screens

A HEX code tells the screen how strongly to drive its red, green and blue, but every panel has its own colour characteristics, brightness and settings. Night modes, warm display settings and automatic colour adjustment all change how a colour looks. For a close match between devices, turn those features off and compare in the same light; for professional colour work, a calibrated display is needed.

Using HEX and RGB in Tint

Tint turns your screen into any colour you specify:

  1. Tap Pick on the floating toolbar.
  2. Type a six-digit HEX code such as FF8800 after the # sign, or use paste; a pasted code may include the #.
  3. Or drag the R, G and B sliders to set each channel directly; the HEX field updates to match, which is a handy way to check your conversions.
  4. Use copy to copy the current code, then tap Apply to fill the screen.
  5. Tap Save to keep the colour in Saved for one-tap reuse. The web version keeps up to five.

The iPhone and Android apps add more scenes and automatic maximum brightness. To check a display with solid colours, see how to test a screen for dead pixels.

Frequently asked questions

How do I convert HEX to RGB?

Split the code into three pairs. For each, multiply the first digit by 16 and add the second, with A to F meaning 10 to 15. #FF8800 is 255, 136, 0.

How do I convert RGB to HEX?

Divide each value by 16: the whole number is the first digit and the remainder the second, written with A to F for 10 to 15. 200, 50, 150 is #C83296.

How many colours can a HEX code represent?

16,777,216: 256 values for each of red, green and blue.

What does #808080 mean?

Mid grey: 128 for each of red, green and blue.

Does Tint accept three-digit HEX codes?

No. Enter the full six digits; #F80, for example, becomes FF8800.

More Tint guides