Is HEX or RGB better?

They give the same result. HEX is compact for code, RGB is easier to read and tweak, and RGBA adds transparency.

What does #FFFFFF mean?

All three channels at maximum (255, 255, 255), which is white. #000000 is all channels at zero — black.

How do I add transparency?

Use rgba() with a 0–1 alpha value, or an eight-digit hex (#RRGGBBAA) where the last pair sets opacity.

HEX vs RGB: How to Read and Convert Colours

Published 9/17/2025 · 3 min read · Developer tools

Daniel Okonkwo — Front-end developer and tech writer at Allin

Web performance · File formats

Checked against 2 sources

View profile →

In short

HEX and RGB describe the same colours in different notation. RGB lists red, green and blue as numbers 0–255, like rgb(255, 87, 51). HEX writes the same values in base-16, like #FF5733 — each pair of hex digits is one channel. To convert, split the hex into three pairs and read each as a 0–255 number, or write each RGB value as two hex digits.

HEX and RGB are two notations for the same colours. Here's how to read each, convert between them, and add transparency.

Same colour, two notations

On a screen, every colour is a mix of red, green and blue light. Both HEX and RGB just record how much of each — they describe identical colours, only in different handwriting. RGB is easy to read and adjust by eye; HEX is compact and copy-paste friendly, which is why designers and code both use it. Converting between them changes nothing about the colour itself.

Reading RGB

RGB gives three numbers from 0 to 255, one per channel: rgb(255, 0, 0) is pure red, rgb(0, 255, 0) green, rgb(0, 0, 255) blue. Zero means none of that light, 255 means full. Mixing them makes every other colour — equal amounts of all three give a shade of grey, and all three at 255 give white.

Reading HEX

A HEX colour is a # followed by six digits, two per channel, written in base-16 where the digits run 0–9 then A–F (so F is 15, and FF is 255). #FF5733 breaks down as FF red, 57 green, 33 blue — the very same colour as rgb(255, 87, 51). #FFFFFF is white, #000000 black, and a three-digit shorthand like #F53 expands each digit (so #F53 = #FF5533).

Converting and adding alpha

Converting is just base-swapping each channel: 87 in base-10 is 57 in hex, and back again. To make a colour see-through, add an alpha (opacity) value — rgba(255, 87, 51, 0.5) is 50% transparent, or an eight-digit hex #FF573380 does the same. A converter handles both directions instantly, which saves doing base-16 arithmetic by hand.

Color converterConvert a colour to HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH, with contrast.Try the tool →

Frequently asked questions

Is HEX or RGB better?: They give the same result. HEX is compact for code, RGB is easier to read and tweak, and RGBA adds transparency.
What does #FFFFFF mean?: All three channels at maximum (255, 255, 255), which is white. #000000 is all channels at zero — black.
How do I add transparency?: Use rgba() with a 0–1 alpha value, or an eight-digit hex (#RRGGBBAA) where the last pair sets opacity.

Articles you may find interesting

All guides →

ExplainerContrast Ratio: How WCAG Actually Computes ItThe WCAG ratio is (L1 + 0.05) ÷ (L2 + 0.05), and L is relative luminance, not brightness. Green carries 71.52% of it and blue 7.22%, which is why pure blue on white passes at 8.59:1 while mid grey fails at 3.95:1. Here is the whole computation, run end to end.ExplainerGradients, Banding, and Why the Middle Looks MuddyInterpolating in sRGB averages gamma-encoded numbers, so the midpoint of red to green is #808000 when the half-light answer is #bcbc00 — 57.2% too little light. Banding is a separate arithmetic problem: 8 bits give 256 steps, and a dark gradient may have only 28 of them. Here is both, computed.ExplainerColour Schemes Are Geometry on a Wheel — and the Wheel Is WrongComplementary, triadic, analogous and split-complementary are just rotations: add 180°, 120°, 30° or 150° to a hue. The arithmetic is trivial. The problem is that the HSL hue circle is not perceptually uniform — yellow and blue at the same HSL lightness differ in luminance by 12.85 times — so a generated palette has to be contrast-checked afterwards.How-toResizing an Image for Each Network Without Distorting ItMeasured on the resizer itself: Fill is a centre crop with no focal point, and a portrait photo loses 38.9 percent off the top for an X-sized banner. Plus the current published dimensions, each with the date it was checked.ComparisonWebP vs JPG vs PNG: Which Image Format Should You Use?JPG, PNG and WebP each win in different cases. Here is when to use each for the best balance of quality, file size and compatibility.How-toHow to Compress an Image Without Losing QualitySmaller images load faster and rank better. Here's how to shrink an image the smart way — format, resolution and compression level — without visible loss.

Sources

Spotted a mistake in this article?