RGB to HEX Converter Online Turn Colour Values to Hex

RGB to HEX is the quick translation from red, green, blue values to the hex colour codes browsers and CSS use everywhere. If you have an RGB value from a design tool or a colour picker, try our free RGB to HEX converter and skip the channel math.

What RGB and HEX are actually doing

Both formats describe the same colour. RGB stores colour as three channels, usually integers from 0 to 255: red, green, and blue.

HEX packs those same three numbers into a compact six-digit string such as #1e90ff. Each pair of hex digits maps to one channel, so #ff0000 is full red, no green, no blue.

The browser does not care which notation you use, but your workflow probably does. Designers often hand off RGB from Figma, Sketch, or a system picker. Developers often want HEX because it is short, readable, and easy to paste into CSS.

There is no hidden colour magic here. rgb(255, 99, 71) and #ff6347 are the same tomato shade, just written in different encodings.

Why developers still reach for HEX

HEX has stuck around because it is dense without being cryptic. Once you know the pattern, #00ff7f is easy to scan: no red, full green, and a blue channel value of 127.

It also fits cleanly into common CSS workflows. You will see HEX used in stylesheets, design tokens, theme files, and quick mocks because it is easy to copy, store, diff, and compare.

That does not make RGB obsolete. RGB is often better when you are adjusting channels directly, applying transparency with rgba(), or working in code that already manipulates colour values numerically. For hands-on editing, HEX is the shorthand; for arithmetic, RGB is the raw material.

If you want the broader picture across colour spaces, our colour conversion guide covers how HEX, RGB, HSL, and CMYK relate.

How the conversion works

The math is simple once you remember that hex is base-16. A decimal value like 255 becomes ff, 16 becomes 10, and 0 stays 00.

To convert RGB to HEX, you convert each channel separately, then glue the results together. Red comes first, then green, then blue. That is why rgb(30, 144, 255) becomes #1e90ff.

In code, the conversion usually looks like this:

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(value => value.toString(16).padStart(2, '0'))
    .join('');
}

rgbToHex(255, 99, 71); // '#ff6347'

That padStart(2, '0') part matters. Without it, a channel like 7 would turn into 7 instead of 07, and the colour code would break.

Where RGB to HEX shows up in real work

This conversion comes up in small, annoying places that waste time if you do them by hand. A designer sends rgb(16, 185, 129), your stylesheet expects a HEX token, and now you are switching tabs, checking a converter, and trying not to transpose the channels.

It also shows up when you are building a palette, normalising design tokens, or cleaning up old CSS. Teams often mix formats across files, especially in repos that have grown around different tools or contributors.

HEX is also handy for documentation. If you are writing style guides or component notes, a single token like #0f172a is easier to scan than a longer rgb() string.

There is one catch: HEX by itself does not represent alpha. If you need transparency, you are usually looking at rgba() or an eight-digit hex value like #rrggbbaa, depending on the environment.

Common conversion mistakes

The most common mistake is mixing up the channel order. It is always red, green, blue. If the result looks wrong, check whether the values were copied in the right sequence.

Another easy trap is forgetting that RGB values must be within 0 to 255. If a value falls outside that range, something upstream is off, whether that is a bad picker, a parsing bug, or a hand-typed number.

People also trip over partial hex values. A valid six-digit colour needs two hex digits per channel. #f63 is shorthand in CSS for #ff6633, but it is not the same thing as dropping digits at random.

If you are debugging colour values that look suspicious, check the source format first, then the destination format, then whether a tool has silently rounded a number. Colour bugs are usually boring. Boring bugs are the ones that waste the most time.

See It in Action

Here is a plain example of the same colour moving from RGB into HEX.

Input RGB:
rgb(34, 139, 230)

Channel breakdown:
Red   = 34  = 22
Green = 139 = 8b
Blue  = 230 = e6

Output HEX:
#228be6

That result is useful because you can verify it without trusting the converter blindly. If you know one channel, you can check the others. It is a quick sanity check when a design handoff looks slightly off.

Another practical example is a CSS variable update:

:root {
  --brand-rgb: 34, 139, 230;
  --brand-hex: #228be6;
}

.button {
  background: var(--brand-hex);
}

If your design system stores one format in tokens and another in documentation, conversion keeps the two aligned. That matters when multiple people touch the same palette.

When RGB is better than HEX

HEX is great for compactness, but RGB wins when you need direct channel control. Want to bump the green channel by 12 or fade a colour with alpha? RGB is easier to reason about.

That is why many frontend codebases use both. HEX for named colours and hard-coded tokens. RGB or RGBA for overlays, shadows, and anything that needs dynamic opacity.

CSS also gives you modern syntax like rgb(34 139 230 / 0.4), which makes transparency readable without changing the underlying idea. The point is not to pick a holy format. The point is to use the one that fits the job.

If you are working from screen values and want the reverse direction, the HEX to RGB converter is the mirror image of this tool.

Frequently Asked Questions

How do I convert RGB to HEX by hand?

Take each RGB channel, convert it from decimal to hexadecimal, and make sure each channel uses two digits. Then join them in red-green-blue order. For example, rgb(255, 99, 71) becomes #ff6347.

Is RGB to HEX a lossless conversion?

Yes, as long as you are converting standard 8-bit RGB values to six-digit HEX. Both formats represent the same underlying colour. You only lose information if the source uses alpha, wide-gamut values, or a different colour model entirely.

Why does HEX start with a hash symbol?

The # is just the CSS syntax for a hex colour literal. It tells the browser that the value is a colour code, not a plain string or an ID selector in your stylesheet. The symbol is part of the format, not the colour itself.

Can HEX represent transparency?

Yes, in some CSS contexts you can use eight-digit hex values like #rrggbbaa, where the last two digits are alpha. Support is good in modern browsers, but many teams still use rgba() because the transparency is easier to read at a glance.

The Bottom Line

RGB to HEX is one of those tiny conversions that saves time every week if you work with colours at all. RGB is the channel data; HEX is the paste-friendly version. Same colour, different casing.

When you need to move fast, a converter beats manual base-16 arithmetic, especially under deadline pressure and browser tabs multiplying in the background. Use the tool to check a value, clean up a design handoff, or keep a palette consistent across files.

If you want to convert a colour right now, open the RGB to HEX converter and feed it the numbers. Then copy the result, drop it into CSS, and move on with your day.