RGB to Hex Color Converter

What this tool does

You have a colour as RGB values, three plain numbers, and you need it as a hex code instead. This comes up all the time in web work, because a stylesheet, a theme file, or a design handoff usually wants the compact hex form, like #1E90FF, rather than a trio of separate numbers. Converting from one to the other is a routine but constant little task.

That is what this does. You give it red, green, and blue values, and it returns the matching hex code, the same colour written as a single string ready to paste into your CSS or design tool. It is quick and perfectly exact, because the two formats are just two ways of writing the very same thing.

How to use it

1. Enter your RGB values. Type the red, green, and blue amounts, each from 0 to 255, into the fields, or set a colour using the picker.
2. Read the hex code. The tool returns the matching six-character hex code, complete with its leading hash, straight away.
3. Copy it across. Drop the hex code into your stylesheet or design tool, where it works as a direct stand-in for the RGB values.

Type the three numbers directly, or set a colour with the picker and read its hex code from the result, depending on whether you are starting from figures or from a colour.

How it works

This is about as direct as a conversion gets, since a hex code is really just RGB values written in a different number system. The tool takes each of the three numbers and rewrites it in hexadecimal, then joins the three results into one string behind a hash. The translation is handled by TinyColor, though at heart it is simple base conversion rather than colour science.

Nothing about the colour is changed or estimated. Unlike converting to ink or to a hue-based model, going from RGB to hex only rewrites the same three numbers in a more compact base; there is no stepping stone and no rounding. That is why the hex code that comes out is always an exact match for the RGB values you put in.

What a hex code is

A hex colour code is a short string, normally led by a hash, made of six characters, like #2E8B57. Those six characters are three pairs, and each pair sets one channel of the colour: the first pair is red, the second green, the third blue. Each pair can run from 00, meaning none of that colour, up to FF, meaning the full amount.

The characters look unusual because they are written in hexadecimal, a number system with sixteen digits, using 0 to 9 and then A to F, which is just a tidy way to write a value from 0 to 255 in two characters. So a hex code is nothing more than the red, green, and blue amounts of a colour packed into a compact, screen-friendly form, which is exactly why it suits stylesheets and markup so well.

How RGB becomes a hex code

The link is simple once you see it. Each RGB number, a value from 0 to 255, can be written as a two-character hexadecimal pair, and stringing the three pairs together gives the hex code. The colour does not move at all; it is only being rewritten from three base-ten numbers into one base-sixteen string.

Take rgb(30, 144, 255) as an example. Thirty written in hexadecimal is 1E, one hundred and forty-four is 90, and two hundred and fifty-five is FF, so the three pairs join into #1E90FF. That is the whole conversion: rewrite each number in base sixteen and put the pairs together behind a hash. Because both notations describe the same amounts of light, the result is exact in every case.

Why convert RGB to hex

Most often it is the web asking. Hex is the most common way to write colour in CSS and HTML, and a great deal of design tooling expects it, so when a colour reaches you as RGB numbers, converting it to hex is simply the step that lets you drop it into the place you are working.

Compactness is a real part of the appeal. A hex code packs a whole colour into a single short token, which is easy to copy, paste, and read in a stylesheet, where three separate numbers are clumsier to handle. Design files, brand guides, and component libraries also tend to record colours as hex codes, so converting RGB to hex keeps your colour in the format the rest of that ecosystem already speaks.

RGB and hex are the same colour

It helps to remember that RGB and hex are not two different colours, or even two different colour models. They are a single model, RGB, written in two notations. The RGB form spells the three numbers out in plain base ten; the hex form packs the same numbers into a short string in base sixteen. The colour the two describe is identical to the last detail.

Seeing it that way removes any worry about losing accuracy in the conversion. There is no rounding, no approximation, and no judgement involved, unlike the leap to CMYK or Pantone, because you never cross from one colour world into another. You are only choosing how to write the same colour, the spelled-out form when numbers are easier to work with, or the compact hash form when a stylesheet wants a single value.

Questions people ask

What is a hex colour code?

A six-character string, usually starting with a hash, that packs a colour's red, green, and blue amounts into base sixteen. Each pair of characters is one channel, from 00 for none to FF for full.

Is RGB to hex exact?

Yes, completely. The hex code holds the very same red, green, and blue amounts, only packed into base sixteen, so the conversion rewrites the numbers without changing, rounding, or estimating a thing.

Why use hex instead of RGB?

Hex is the common format for colour in CSS and HTML, and much design tooling expects it. It also packs a colour into one short token that is easy to copy and read, where RGB uses three separate numbers.

Does the hex code include the hash?

Yes. The result comes with the leading hash, like #1E90FF, so it pastes straight into CSS. The hash is part of the standard way colour hex codes are written.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Web colors, hex triplets and how they encode red, green, and blue. Wikipedia. https://en.wikipedia.org/wiki/Web_colors
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor