Skip to main content

Command Palette

Search for a command to run...

Hexadecimal RGB (HEX)

Published
2 min readView as Markdown
Hexadecimal RGB (HEX)

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.