RGB vs Hex: CSS Colour Values, Conversion, and Transparency

Key takeaways

• CSS hex and ordinary rgb() values can represent the same sRGB channel values.
• Six-digit hex uses two hexadecimal digits each for red, green, and blue.
• Eight-digit CSS hex puts alpha last and cannot represent every fractional alpha exactly.
• Colour notation does not determine contrast, display gamut, or the effect of element opacity.

In CSS, rgb(51 102 204) and #3366CC specify the same sRGB colour. RGB functional notation writes the channel values directly; hex writes them in base 16.

Neither version produces sharper pixels or better image quality.

Imagine a designer handing over #3366CC as a brand colour. A developer needs the solid colour for buttons and a translucent version for selected rows. Understanding the notation makes both straightforward without guessing at a similar-looking blue.

Read Hex as Three Pairs

Six-digit CSS hex follows the pattern #RRGGBB.

Channel	Hex pair	Decimal calculation	Value
Red	33	3 × 16 + 3	51
Green	66	6 × 16 + 6	102
Blue	CC	12 × 16 + 12	204

Hexadecimal uses digits 0 through 9 followed by A through F, representing 10 through 15.

Each pair ranges from 00 to FF, corresponding to decimal 0 through 255. Lowercase and uppercase hex letters describe the same values.

The reverse conversion divides each channel into a base-16 pair and keeps a leading zero when needed. Decimal 8 becomes 08, not just 8, inside a six-digit colour.

RGB Makes the Components Explicit

The brand colour can be written in several equivalent forms:

.button {
  background-color: #3366cc;
  background-color: rgb(51 102 204);
  background-color: rgb(20% 40% 80%);
}

Only one declaration is needed in real code; these show alternative spellings.

The rgb() reference documents numeric channels, percentages, and alpha. Legacy comma-separated syntax, such as rgb(51, 102, 204), is also valid.

RGB values are not limited to integer channel notation. Converting fractional values to byte-based hex can involve rounding.

Shorthand Works Only When Digits Repeat

The colour #3366CC can be shortened to #36C. Each shorthand digit expands by repetition:

#36C → #3366CC

A colour such as #3466CC cannot be shortened this way without changing it. Taking the first digit of every pair would produce a different red channel.

The CSS Color specification defines three-, four-, six-, and eight-digit hex forms. Four-digit shorthand includes alpha and follows the same digit-doubling rule.

Alpha Comes Last in CSS Hex

For a translucent selection background, write:

.selected-row {
  background-color: rgb(51 102 204 / 50%);
}

Eight-digit hex uses #RRGGBBAA, so a close equivalent is #3366CC80.

The final 80 is decimal 128. Dividing by 255 gives approximately 50.2% opacity, rather than exactly 50%. A single alpha byte cannot represent every fraction precisely.

This ordering is easy to confuse with formats in other software that place alpha first. When moving colour values between tools, check the format instead of assuming all eight-digit strings mean the same thing.

Background Alpha Is Different From Element Opacity

For the selected row, transparent background colour allows the underlying surface to show through while leaving the text fully opaque.

Setting opacity: 0.5 on the whole row has a different effect: the rendered element, including its text and descendants, is composited with reduced opacity. The opacity documentation explains this distinction.

A child with opacity: 1 cannot simply undo the parent’s overall compositing effect.

Use background alpha when only the fill should be translucent. Evaluate the resulting text and background combination on the actual surface where it appears.

Keep the Token Easy to Reuse

One approach is to store channel values for the brand colour:

:root {
  --brand-rgb: 51 102 204;
}

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

.selected-row {
  background-color: rgb(var(--brand-rgb) / 15%);
}

This makes the relationship explicit while allowing separate alpha values.

A project that stores complete hex colours can also remain consistent. The important decision is how tokens are consumed, named, and updated across components.

For occasional conversion, use the HEX ↔ RGB converter, then inspect the resulting value rather than copying a visually similar swatch.

Notation Is Separate From Colour Space

The familiar hex and rgb() forms describe sRGB values. Choosing between them does not expand the available gamut.

CSS also supports other colour representations, including Display P3 and OKLCH. Those introduce questions beyond writing the same channel values in decimal or hexadecimal.

For the brand button, equivalent sRGB values should remain equivalent under the same rendering conditions. If it looks different, inspect alpha, surrounding styles, and the background before blaming the notation.

Choose a readable convention for the codebase, and assess accessibility and appearance using the rendered component.

Converting a colour's notation should preserve the colour, not become an accidental design change.