HEX to RGB Converter Online Convert CSS Colours Instantly
Hex to rgb conversion is how you turn a compact colour like #1e90ff into numeric red, green, and blue values you can use in CSS, scripts, or graphics code. If you want the numbers without doing base-16 arithmetic by hand, use this hex to RGB converter tool and move on with your life.
What hex to rgb actually means
HEX colour codes store a colour as three pairs of hexadecimal digits. In the common six-digit form, the first pair is red, the second is green, and the third is blue. So #ff6600 becomes rgb(255, 102, 0).
The mapping is mechanical. Each pair of hex digits represents a value from 0 to 255 once it is converted from base-16 to base-10. That is why ff becomes 255, 00 becomes 0, and 80 becomes 128.
HEX is compact and easy to paste into CSS. RGB is easier to inspect when you want to tweak one channel, calculate transparency, or feed the colour into code that expects numbers instead of a string.
When RGB is more useful than HEX
HEX is great when a colour is just a fixed value on a stylesheet. RGB becomes useful when the colour starts behaving like data, not decoration.
A few common cases:
- Dynamic theming where JavaScript adjusts one channel based on state.
- Opacity with
rgba(), where you keep the RGB channels and add an alpha value. - Canvas, charting, and image code that expects numeric colour values.
- Design tokens that get reused across CSS, JS, and documentation.
If you are building a UI that needs hover states, overlays, or tint calculations, RGB is usually the easier format to work with. You can still start with HEX, but you will often end up converting it the moment you need an actual adjustment.
HEX says what colour it is. RGB says what the machine can do with it.
How the conversion works under the hood
For a standard six-digit colour like #1e90ff, split it into three two-character chunks: 1e, 90, and ff. Convert each chunk from hexadecimal to decimal, and you get the RGB channels.
Here is the rough logic in plain English:
- Strip the leading
#. - Read the first two characters as red.
- Read the next two as green.
- Read the final two as blue.
- Convert each pair from base-16 to base-10.
In JavaScript, that looks like this:
const hex = '#1e90ff';
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
console.log(`rgb(${r}, ${g}, ${b})`); // rgb(30, 144, 255)If you ever see shorthand HEX like #abc, each character expands to a doubled pair: #aabbcc. That means #abc converts to rgb(170, 187, 204). Easy enough for a parser, mildly annoying for a human doing it on a sticky note.
Where developers actually use RGB values
RGB shows up anywhere colour needs to be manipulated instead of just declared. The obvious case is CSS, where rgb() and rgba() are still fully valid and sometimes cleaner than hex when you are calculating values programmatically.
Example: if your app stores a brand colour in HEX but needs a translucent overlay, you can convert once and reuse the channels:
background: rgba(30, 144, 255, 0.12);That kind of value is common for focus rings, cards, modals, and hover highlights. You keep the colour identity, but let opacity do the heavy lifting.
RGB is also useful in SVG attributes, canvas drawing APIs, and generated styles. If your toolchain or library works with numeric channels, a hex string is just an extra step waiting to happen.
Watch out for alpha, shorthand, and colour spaces
Not every colour string is plain six-digit HEX. You will also run into eight-digit HEX, shorthand HEX, and formats that move beyond RGB entirely.
Eight-digit HEX includes alpha at the end, like #1e90ff80. That last pair is opacity, not another colour channel. If you are converting that to CSS rgba(), the first six digits become RGB and the final two need to be mapped to an alpha value between 0 and 1.
There is also a difference between converting a colour and understanding its behaviour in a design system. RGB is channel-based. HSL is easier for human-friendly adjustments like lightness and saturation. If you are thinking in terms of palettes or tinting, our guide on colour value conversions is the better rabbit hole.
One more gotcha: browser support and app frameworks sometimes serialize colours differently. A colour may start as HEX in your design file, become RGB in generated CSS, and then show up as rgba() once transparency is added. Same colour family, different formatting rules.
A Worked Example
Let’s convert a real colour step by step and show the output you would actually paste into code.
Input HEX: #ff6600
Split into pairs:
ff = red
66 = green
00 = blue
Convert to decimal:
ff = 255
66 = 102
00 = 0
Output RGB:
rgb(255, 102, 0)That means the original orange colour can now be used in CSS like this:
.button {
background-color: rgb(255, 102, 0);
}
.button:hover {
background-color: rgba(255, 102, 0, 0.85);
}If you were debugging a theme variable, you might also store the channels separately:
--brand-r: 255;
--brand-g: 102;
--brand-b: 0;Then reuse them anywhere:
box-shadow: 0 8px 24px rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.18);This is the kind of workflow where a converter saves time. You are not just translating colour formats. You are turning a static value into something your code can recombine.
Frequently Asked Questions
How do I convert hex to rgb by hand?
Remove the #, split the colour into three two-character pairs, and convert each pair from hexadecimal to decimal. For example, #ffffff becomes rgb(255, 255, 255). If the hex code is shorthand like #abc, expand it to #aabbcc first.
Why does hex use pairs of characters?
Because each pair represents one channel: red, green, or blue. Two hex digits give you 256 possible values per channel, from 0 to 255. That matches the way RGB values are commonly stored in software.
Does hex to rgb change the colour?
No. It is the same colour expressed in a different format. #1e90ff and rgb(30, 144, 255) render the same way in the browser.
When should I use rgba instead of hex?
Use rgba() when you need transparency or want to animate or calculate opacity. HEX is fine for opaque static colours, but rgba() gives you an alpha channel that is easier to control in code. That is especially handy for overlays, shadows, and hover states.
Wrapping Up
Hex to rgb is a small conversion, but it shows up all over frontend work, design systems, and graphics code. Once you know how the channel mapping works, HEX stops being a black box and starts looking like a compact shorthand for numeric colour data.
Use RGB when you need to tweak channels, add opacity, or pass colour values into code. Stay with HEX when you just need a clean static value in CSS. If you want the conversion without the arithmetic tax, give the hex to RGB converter a spin.
And if you are working across multiple colour formats, keep the browser tab open and test a few values back to back. It is faster than pretending you enjoy mental base-16 conversion.