Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

CSS Aficionado

paintbrushes

Hexadecimal RGB (HEX)

css html

HEX is a variant of RGB in which the values for each parameter are in hexadecimal format. The syntax consists of a hash sign (#) followed by the hexadecimal values which will range from 00 (0 in decimal) to FF (255 in decimal):

Hexadecimal syntax: hash R R G G B B

In the past, there were only 3 hexadecimal parameters: one for red, another for green, and another for blue. A value of 00 would mean the complete absence of the color, while FF would indicate its complete presence. The higher the numbers, the lighter the color.

A fourth optional hexadecimal value can be provided to indicate alpha: 00 would be completely transparent, and FF completely opaque:

color: #FFFFFF;   /* white */
color: #000000;   /* black */
color: #FF0000;   /* red */
color: #00FF00;   /* bright green (lime, see named colors below) */
color: #0000ff;   /* blue */
color: #800000;   /* darker red */
color: #FF0000FF; /* red (opaque red) */
color: #FF000088; /* semitransparent red */
color: #FF000000; /* transparent (transparent red) */

Notice that CSS doesn't distinguish between upper- and lower-case for hexadecimal values, so you could write: #ff0000 or #FF0000 or #Ff0000 and they would all be the same. Just keep it consistent to have a cleaner, more maintainable code.

If each of the color parameters –and transparency, if present– has the same digits (e.g. #EE44FF), there is the possibility to use a shorthand version of the hexadecimal notation, just putting each digit once:

/* regular hex */
color: #336699;
color: #336699FF;

/* shorthand hex */
color: #369;
color: #369F;

This shorthand notation can only be used with a "small" subset of the colors: 4,096 of the 16,777,216 possible combinations (or 65,536 of the possible 4,294,967,296 combinations if we take into account alpha.)

Taking into consideration all the possible combinations, in the "best-case scenario", a color could be represented in up to 4 different ways with HEX:

color: #336699;
color: #369;
color: #336699FF;
color: #369F;

All the browsers that were tested for this article supported all the notations of HEX listed above... Except for Edge on Windows that only supported HEX values without the alpha.

Article originally published on