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):
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.
Top comments (0)