RGB vs Hex: Why Computers See the Same Colour Two Different Ways
Learn the difference between RGB and hexadecimal colours, how computers represent colour internally, and why rgb(255,0,0) and #FF0000 describe exactly the same thing.
One of the first things people notice when working with CSS or design software is that the same colour can be written in completely different ways.
rgb(255, 0, 0)
#FF0000
At first glance they look unrelated.
One appears to be a function containing three numbers.
The other looks like a random collection of letters and digits.
In reality, they’re describing exactly the same colour.
Understanding why requires looking at how computers represent colour rather than how humans describe it.
The important distinction is that RGB and hexadecimal aren’t different colour systems.
They’re different representations of the same underlying information.
Once you understand that idea, hexadecimal colours become much less mysterious.
Computers Don’t Understand Colours
When we describe colours, we naturally use words.
Red.
Blue.
Green.
Purple.
Turquoise.
Displays don’t understand any of those.
A monitor has no concept of “red” or “blue.”
It only understands electrical signals that determine how brightly each pixel should illuminate its red, green and blue sub-pixels.
Every colour displayed on your screen is therefore represented by three numbers.
One controls the amount of red light.
One controls the amount of green.
One controls the amount of blue.
Everything else is simply a combination of those three values.
Colour Is Three Numbers
Colour
│
┌────────┼────────┐
▼ ▼ ▼
Red Green Blue
? ? ?
│
▼
Final Displayed Colour
The display doesn’t recognise colour names.
It combines three numerical values to produce the colour you eventually see.
RGB Is Simply Decimal Numbers
The most familiar way of expressing those values is RGB.
In CSS, an RGB colour looks like this:
rgb(255, 0, 0)
This isn’t a special encoding.
It’s simply three decimal numbers.
Red = 255
Green = 0
Blue = 0
Each colour channel ranges from 0 to 255.
- 0 means that colour contributes nothing.
- 255 means that colour contributes as much as possible.
So this colour contains:
- maximum red
- no green
- no blue
The result is bright red.
Likewise:
rgb(0, 255, 0)
means:
Red = 0
Green = 255
Blue = 0
Maximum green.
No red.
No blue.
Again, there’s nothing particularly magical happening.
RGB is simply presenting three decimal numbers that describe how much of each primary colour should be displayed.
Why 255?
One question naturally follows.
Why does RGB stop at 255 instead of 100 or 1000?
The answer has nothing to do with colour.
It comes from how computers store information.
Most modern computer systems naturally organise data into bytes.
A byte contains 8 bits.
Eight binary digits can represent exactly 256 different values.
Those values range from:
0
↓
255
This makes one byte the perfect size for storing one colour channel.
One Colour Channel
8 Bits
11111111
│
▼
255 Possible Value
│
▼
Maximum Brightness
Every red value fits into one byte.
Every green value fits into one byte.
Every blue value fits into one byte.
A complete RGB colour therefore occupies three bytes, one for each colour channel.
At this point we’ve already explained almost everything necessary to understand hexadecimal colours.
The only remaining question is why programmers sometimes write those same numbers differently.
Hexadecimal Uses Exactly the Same Values
So where does this come from?
#FF0000
It certainly doesn’t look like:
rgb(255, 0, 0)
The key is remembering that hexadecimal is simply another numbering system.
Decimal, the numbers we use every day is base ten.
It uses ten symbols:
0 1 2 3 4 5 6 7 8 9
Hexadecimal is base sixteen.
Instead of stopping at 9, it continues using letters:
0 1 2 3 4 5 6 7 8 9 A B C D E F
Those letters aren’t special.
They’re simply additional digits.
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
Once you understand that, hexadecimal colours become much easier to read.
The value FF isn’t an abbreviation for anything.
It’s simply the hexadecimal representation of 255.
Decimal, Binary and Hex
Decimal
255
│
▼
Binary
11111111
│
▼
Hexadecimal
FF
These aren’t different values.
They’re the same number written using different numbering systems.
Why Programmers Like Hexadecimal
If decimal is easier for people to read, why use hexadecimal at all?
The answer has very little to do with colours.
It has everything to do with how computers store data.
Earlier we saw that one colour channel occupies one byte.
A byte contains eight bits.
Writing eight binary digits quickly becomes difficult.
11111111
Hexadecimal provides a much shorter representation.
FF
Those two values are identical.
The hexadecimal version is simply easier to read.
This relationship isn’t unique to colours.
It’s used throughout computing.
Memory addresses.
Machine instructions.
Network protocols.
Checksums.
Binary file formats.
Wherever software needs to display raw binary data, hexadecimal often becomes the preferred representation because it maps neatly onto bytes.
One Byte
Binary
11111111
│
▼
Hex
FF
8 bits become
2 hex digits
Hex isn’t replacing binary.
It’s making binary easier for humans to work with.
Building a Colour
Now the relationship between RGB and hexadecimal becomes much clearer.
Consider this RGB colour.
rgb(255, 0, 0)
Each decimal value can be converted independently.
255 → FF
0 → 00
0 → 00
Putting those values together gives:
FF
00
00
CSS prefixes hexadecimal colours with a hash symbol.
#FF0000
Nothing about the colour has changed.
Only the notation.
RGB to Hex
255 0 0
│ │ │
▼ ▼ ▼
FF 00 00
│
▼
#FF0000
Exactly the same information.
Just represented differently.
RGB and Hex Are Completely Equivalent
Once you understand that every colour channel is simply converted independently, translating between RGB and hexadecimal becomes straightforward.
| RGB | Hex |
|---|---|
rgb(255, 0, 0) | #FF0000 |
rgb(0, 255, 0) | #00FF00 |
rgb(0, 0, 255) | #0000FF |
rgb(255, 255, 255) | #FFFFFF |
rgb(0, 0, 0) | #000000 |
rgb(255, 255, 0) | #FFFF00 |
Notice something interesting.
Each hexadecimal colour always contains six digits.
RR GG BB
The first two digits represent red.
The next two represent green.
The final two represent blue.
Each pair stores exactly one byte.
Three channels.
Three bytes.
Exactly the same information stored by the RGB notation.
Why CSS Supports Both
If RGB and hexadecimal describe exactly the same colours, why does CSS support both?
The answer is largely about readability and convenience.
Some developers find RGB easier to work with because each colour channel is immediately visible.
rgb(128, 64, 255)
Without any conversion, you can see the relative amounts of red, green and blue.
If you want slightly more blue, you increase the third number.
If you want less red, you reduce the first.
The relationship between the numbers and the colour is obvious.
Hexadecimal offers a different advantage.
#8040FF
The same colour occupies fewer characters.
Each colour channel is represented by two hexadecimal digits, making colours compact and easy to copy between design tools, code editors and browser developer tools.
Neither notation is better.
They’re simply optimised for different ways of thinking.
Modern CSS Supports More Than RGB and Hex
As displays have improved, CSS has evolved beyond simple RGB values.
Today you’ll commonly encounter formats such as:
rgb()
rgba()
hsl()
lab()
oklch()
At first glance these appear to be entirely different colour systems.
In reality they’re solving different problems.
RGB describes how much red, green and blue light should be emitted.
HSL describes colours in terms of hue, saturation and lightness, making them easier for humans to adjust.
LAB and OKLCH are designed to produce perceptually uniform colour spaces, where equal numerical changes produce changes that appear more consistent to human vision.
Despite these differences, browsers eventually convert all of these representations into values that your display hardware can produce.
The notation changes.
The displayed colour does not.
Different Representations
CSS Colour
│
┌──────────┼──────────┐
▼ ▼ ▼
RGB Hex HSL
│ │ │
└──────────┼──────────┘
▼
Browser Rendering
│
▼
Red Green Blue
Display Hardware
Different representations describe colour differently.
The browser ultimately converts them into the same output.
When RGB Is Easier
RGB tends to be the more intuitive choice when you’re actively creating or adjusting colours.
Suppose a colour feels too blue.
The solution is obvious.
Reduce the blue channel.
Increase Red
Decrease Blue
Leave Green Unchanged
Likewise, if a colour needs to become brighter, increasing multiple channels produces predictable results.
For many designers and front-end developers, RGB provides immediate visual feedback because each value directly controls one of the display’s primary colours.
When Hexadecimal Is Easier
Hexadecimal becomes more attractive when colours are treated as data rather than something you’re adjusting manually.
Its compact format makes it ideal for:
- CSS stylesheets
- design tokens
- configuration files
- browser developer tools
- generated code
Because every colour channel occupies exactly one byte, hexadecimal aligns naturally with how computers already store colour internally.
This isn’t why CSS supports hexadecimal.
It’s why hexadecimal became common throughout computing long before CSS existed.
Once you become comfortable reading hexadecimal values, colours such as:
#FFFFFF
#000000
#808080
quickly become recognisable without needing to convert them back into decimal.
Like any numbering system, familiarity eventually makes it feel natural.
Transparency Uses Exactly the Same Idea
The relationship between RGB and hexadecimal becomes even clearer when transparency is added.
In CSS, transparency is represented using an alpha channel.
Using RGB notation:
rgba(255, 0, 0, 0.5)
This describes:
- red = 255
- green = 0
- blue = 0
- opacity = 50%
Hexadecimal simply stores that extra value as another byte.
#FF000080
Breaking it apart:
FF
00
00
80
Red
Green
Blue
Alpha
The first six hexadecimal digits describe the colour exactly as before.
The final two describe opacity.
RGBA to Hex
Red Green Blue Alpha
255 0 0 128
│ │ │ │
▼ ▼ ▼ ▼
FF 00 00 80
│
▼
#FF000080
Nothing fundamentally changed.
CSS simply added another byte representing transparency.
Once again, hexadecimal isn’t introducing a new colour system.
It’s simply representing the same numerical values in a different notation.
Representation Doesn’t Change Information
One of the more useful lessons hidden inside RGB and hexadecimal is that computers rarely care how information is written.
They care what the information represents.
This idea appears throughout computing.
The number forty-two can be written as:
Decimal
42
or:
Binary
00101010
or:
Hexadecimal
2A
They’re all exactly the same value.
Only the representation changes.
Colour works in precisely the same way.
rgb(255, 0, 0)
and
#FF0000
describe exactly the same three bytes of information.
The browser doesn’t display different colours depending on which notation you choose.
It converts both into the same internal values before sending them to the graphics hardware.
Representation changes readability.
It doesn’t change the data.
One Value, Multiple Representations
Same Colour
│
┌─────────┼─────────┐
▼ ▼ ▼
rgb(255,0,0) #FF0000 Binary
│ │ │
└─────────┼─────────┘
▼
Red = 255
Green = 0
Blue = 0
Different notation.
Identical information.
This distinction appears throughout software engineering.
JSON and XML may describe the same data.
Base64 and hexadecimal may represent the same bytes.
UTF-8 and UTF-16 both encode the same text using different binary representations.
Learning to separate representation from information makes many areas of computing easier to understand.
Choosing Between RGB and Hex
Since both formats are equivalent, the choice usually comes down to readability.
RGB is often preferable when you’re actively adjusting colours.
The individual channels are immediately visible.
If a design needs more blue or less green, the values can be changed directly.
Hexadecimal is often preferable when colours are treated as constants.
It’s compact.
It aligns naturally with bytes.
It’s widely used in design tools, browser developer tools and generated CSS.
Modern projects frequently use both.
A design application may expose RGB sliders.
The browser developer tools may copy colours as hexadecimal.
CSS supports either without changing the rendered result.
Choosing one over the other is largely a matter of workflow rather than capability.
Final Thoughts
At first glance, RGB and hexadecimal appear to describe colours in completely different ways.
One uses three decimal numbers.
The other uses six hexadecimal digits.
Once you understand how computers store colour, the difference largely disappears.
RGB presents the values in base ten because that’s the numbering system people are most familiar with.
Hexadecimal presents exactly the same values in base sixteen because it maps neatly onto the bytes computers already use to store information.
Neither representation is more accurate.
Neither produces better colours.
They’re simply different ways of describing the same underlying data.
That idea extends well beyond colour.
Throughout computing, the same information is often represented in multiple ways depending on who’s reading it.
Humans prefer representations that are intuitive.
Computers prefer representations that are efficient.
Good software bridges the gap between the two.
Understanding RGB and hexadecimal isn’t really about learning two colour formats.
It’s about recognising one of the most common ideas in computer science:
Changing the representation doesn’t change the information.