What happens to 3-digit hexadecimal colors?
I've always been curious to know what happens in a 3-digit hexadecimal expression of a color in CSS.
For example, you have 000
and 000000
, which is the color black. And fff
or ffffff
which is white. There are also other colors which is F00
which is red.
But there remains a curiosity:
How would I translate this 3-digit hexadecimal color to the 6-digit one?
Has some formula to transform hexadecimal from color from 3 to 6?
3 answers
According to the documentation of W3C
on color units, the numeric values RGB
are represented by hexadecimal notation, preceded by the character #
.
They can contain 3
or 6
digits, being represented as follows:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
What happens when using only three digits, is the replication of them in the formula rrggbb
, so the value #fb0
has its characters replicated and expanded to #ffbb00
.
OBS : Some people think that the three-digit value is filled with zeros to complete the six-digit value hexadecimal
, and this is a big misconception!
@edit
How would I translate this 3-digit hexadecimal color to the 6-digit one?
As explained earlier, just replicate the characters, for example: fb0
becomes: ff
, bb
and 00
respectively, forming the code: ffbb00
.
Has some formula to transform color hexadecimal from 3 to 6?
There is no specific formula for this" schema", the browser itself takes care of replication, but if it is for a specific use case, you can implement replication the way you want.
3-digit hexadecimal colors are expanded by doubling each character (see w3 spec).
Thus the code #F3A
is transformed to #FF33AA
.
Translated from https://stackoverflow.com/a/10230746/5230740 .
Is simple, read like this.
Para #000 - RGB
Para #000000 - RRGGBB