Hex to RGB Color Converter

What this tool does

Hex and RGB are the two most common ways to write a colour for a screen, and you constantly need to move between them. A hex code like #1E90FF is compact and perfect for a stylesheet, while the RGB form, with its three plain numbers, is what many tools, languages, and the transparent rgba format expect. Translating from one to the other is one of the small, everyday jobs of working with colour.

That is what this does. You give it a hex code, and it returns the equivalent RGB values, the red, green, and blue amounts written as ordinary numbers from 0 to 255. It is quick and exact, because, as it turns out, the two formats are far more closely related than they look.

How to use it

1. Enter your hex code. Type or paste it into the field, hash or not, or choose a colour from the picker.
2. Read the RGB values. The tool shows the red, green, and blue amounts as three numbers between 0 and 255, right away.
3. Use the numbers. Copy the RGB values into your code or design tool, ready to use directly or to extend into rgba.

The hash is optional and both the long and short hex forms are accepted. If you do not have a code to hand, set a colour with the picker and read its RGB values from there.

How it works

This is the most direct conversion of them all, because a hex code is essentially RGB values already, just written differently. The tool splits the code into its three pairs and translates each pair from hexadecimal into an ordinary number. The parsing is handled by TinyColor, though the heart of it is simple arithmetic rather than any real colour science.

There is no stepping stone and no approximation involved. Unlike converting to print inks or a hue-based model, going from hex to RGB does not change the colour's representation in any meaningful way; it only rewrites the same three numbers in a more readable base. That is why the result is always exact, with nothing lost or estimated.

What RGB actually is

RGB is the colour model of screens, and it stands for red, green, and blue, the three colours of light a display mixes to make every colour you see. Each is given as a number from 0 to 255, where 0 means none of that light and 255 means the full amount. Pure red is 255, 0, 0; white, with all three at full, is 255, 255, 255; and black is 0, 0, 0.

It works by addition, which is the opposite of how ink behaves. A screen starts black and adds coloured light, so the more you add, the brighter and lighter the result, building all the way up to white when every channel is full. This is the native language of every monitor, phone, and camera, which is why screen colour is fundamentally an RGB affair, whatever notation you happen to write it in.

How a hex code becomes RGB

The link between the two is almost embarrassingly simple once you see it. A hex code is just the same red, green, and blue numbers written in hexadecimal, a counting system with sixteen digits instead of ten. Each pair of characters in the code is one channel, and translating that pair from base sixteen to base ten gives you the familiar 0 to 255 value.

Take #FF8000 as an example. The first pair, FF, is 255 in ordinary numbers, the second, 80, is 128, and the third, 00, is 0, so the colour is RGB 255, 128, 0. That is the entire conversion: read each pair, change its base, and you have the RGB form. Nothing about the colour shifts, because the two notations are describing the very same amounts of light.

Why convert hex to RGB

Often it comes down to what a tool or language expects. Plenty of programming environments, graphics libraries, and design applications take colours as RGB numbers rather than hex strings, so when your colour starts life as a hex code, converting it is simply the step that lets you use it where you are working.

The most common driver, though, is transparency. To make a colour semi-transparent you need the rgba format, which is the RGB numbers plus an alpha value, and that means having the RGB form in the first place. RGB is also the easier shape for some hand adjustments, since nudging a channel up or down is more intuitive as a decimal number than as a pair of hex characters. Whenever the destination prefers plain numbers, hex to RGB is the bridge.

Hex and RGB are the same colour

It is worth holding onto the idea that hex and RGB are not two different colours, or even two different colour models. They are one model, RGB, written in two different notations. The hex form packs the three numbers into a short string in base sixteen; the RGB form spells them out in plain base ten. The colour they describe is identical down to the last detail.

Understanding that takes the mystery out of the conversion and removes any worry about accuracy. There is no loss, no rounding, and no judgement involved, the way there is when converting to CMYK or Pantone, because you are not crossing between colour worlds at all. You are just choosing which way to write the same thing, picking the compact form for a stylesheet or the readable form for code as it suits you.

Questions people ask

What does RGB stand for?

Red, green, and blue, the three colours of light a screen mixes to make every colour. Each is a number from 0 to 255, where 0 is none of that light and 255 is the full amount.

Is hex to RGB exact?

Yes, completely. A hex code is just RGB values written in hexadecimal, so converting only changes how the numbers are written. Nothing is lost, rounded, or approximated.

Why would I need RGB instead of hex?

Many tools and languages expect RGB numbers, and the transparent rgba format is built from them. RGB is also easier to adjust channel by channel, since the values are plain decimal numbers.

Do I need the hash in the hex code?

No. Leave the hash off if you like, and either the long or short hex form is fine, so the code reads correctly however you paste it.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. RGB color model, the additive model used by screens. Wikipedia. https://en.wikipedia.org/wiki/RGB_color_model
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor