Learn how to use hexadecimal colors (also called “hex colors” in CSS.
Hexadecimal notation (or hex color notation) is an alternative way to express RGB colors.
Hex color notation is specified in three blocks with two values in each:
- RR
- GG
- BB
Together they become #RRGGBB.
In Greek, Hexa means the number six (6), and as you can see, the total sum of RRGGBB is six.
What makes hex colors different from RGB is that hex colors express values from 0 to 255 with only 2 digits.
For example, the 100% white RGB color below:
rgb(255,255,255);Can be expressed in hex colors like this:
#ffffff /* 100% white */You can take it a step further and shortcut two digits to one if they are equal (such as FF FF FF):
#fff /* shortcut for 100% white */Hex with an Alpha channel
Just like RGB has RGBa and HSL has HSLa, Hex also has an Alpha channel which is expressed by adding an extra two-digit block, so that the hex color notation #RRGGBB becomes #RRGGBBAA (A for Alpha).
For example, the following hex color is 100% black, with 25% opacity (75):
#00000075 /* Black with 25% opacity */Result:
Btw: you can write hex color notation using uppercase or lowercase letters. It makes no difference whether you write #ffffff or #FFFFFF.
Browser support for hexadecimal notation
- #RRGGBB hex color notation is supported in all browsers, including legacy browsers.
- #RRGGBBAA hex color notation works in all modern browsers, but not in IE11 (if anyone considers that modern).
