CSS 4 Digit Hex Colors
The CSS 4-digit hex color notation is shorthand for the 8-digit hex notation.
Some eight-digit hex colors can be written using a four-digit shorthand. Four-digit shorthand is where you combine the duplicate digits from each color component into one.
This results in a four digit hex number instead of eight.
So instead of the syntax being like this (i.e. eight-digits):
It becomes this:
Rrepresents the red component.
Grepresents the green component.
Brepresents the blue component.
Arepresents the alpha channel.
Converting 8-Digits into 4-Digits
To convert a eight-digit code into four, simply "dedupe" the duplicate values from each color component.
Here's an example of the same color using both the full hex notation and the shortcut version.
See how we've just deduped the duplicate characters from each color component. We've converted
Both of the values in this example result in the same color.
Note that you can only use the shorthand method when both values are the same for each of the RGB components.
So you couldn't turn
#FC045606 into shorthand because each of the RGB components uses a different value. In this case, the red component uses
FC, the green component uses
04, the blue component uses
56, and the alpha channel uses
06. You can't dedupe those, as they are unique values.
Likewise, you can't turn
#FFCC9155 into shorthand either, because the green component uses different values. And you can't have a five character shorthand code. It's either four characters (for the shorthand), or eight characters (for the longhand).
However, you can always round digits up or down in order to create a shorthand code. For example,
#FF1493EC could become something like
#F29C or similar if you're not fussy about the precise color.
You can also use the
rgba() function to provide the decimal equivalent of a transparent color using the RGBA values.
#FFA500CC (slightly transparent orange) could be written as
Web Page Example
Here's a working example of using four-digit hex notation to define colors for a web page. Try changing some values in the hex codes to see how it updates the color.
Each character can be a hexadecimal value from 0 to F. So it can be any of the values in the "Hex..." column of the following table.
|Decimal Value||Hex Equivalent|
Most people in the modern world are used to the decimal system. As shown in this table, the decimal system (which uses base 10), uses digits that go from zero to nine, then repeats by prepending a 1 to the number (resulting in 10, 11, 12, etc), then when it repeats again, it prepends a 2 (resulting in 20, 21, 23, etc), and then a 3, etc.
The hexadecimal system, on the other hand, doesn't need to repeat until it gets to F.
By the way, it's case-insensitive, so you can use uppercase or lower case letters.