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?

Author: Wallace Maxters, 2017-02-13

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.

 4
Author: Marcelo de Andrade, 2017-02-13 12:55:57

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 .

 7
Author: Murillo Goulart, 2017-05-23 12:37:28

Is simple, read like this.

Para #000 - RGB

Para #000000 - RRGGBB
 2
Author: Diego Vieira, 2017-02-13 12:33:54