Why do 3 digit hex css colors convert to 6 the way they do?

https://stackoverflow.com/questions/11459405

20-06-2021
|

Question

I'm aware that the method to convert a 3 digit hex css color to 6 digit code is by duplicating each hex digit once, as below.

#ABC === #AABBCC

Why does it work this way? Why isn't #ABC equivalent to #A0B0C0?

Solution

From the W3C spec:

The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

You can read more about it here: http://www.w3.org/TR/css3-color/

OTHER TIPS

The reason is to be able to code the full range of colors (able to do both the highest and lowest color). For example, if #RGB became #R0G0B0, then #fff would become #f0f0f0, meaning you cannot code white. Conversely, if #RGB became #RfGfBf, then #000 would be #0f0f0f, ruling out black. The system of #RGB = #RRGGBB allows for #000 = #000000 (black) and #fff = #ffffff (white), giving a full range of evenly-spaced colors.