Css color syntax


Sometimes I see:

background-color: #f0f0f0;

and other times I see:

background-color: #c00;

Is the last one equivalent to:

background-color: #000c00;


no the last is equivalent to:


If you have what the last example from Gar onn is (where the first two characters are the same, then the next two, and then the last two), you can use a shortcut.

You cannot use that shortcut with anything else.

#336b72 can’t be #36b72 for example. Similarly your first example of #f0f0f0 cannot be shortened. This is because each group of two characters represents a colour channel (red, green blue), and you get to only either shorten all three, or none.

I think possibly the shortcuts are one reason why I haven’t “switched” to using rgb() except when I want to list rgba(). I’m lazy like that.

Thanks. I couldn’t find any docs on the issue.

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. 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.

Even duck-going it I had to do quite a bit of sub-searching to find it… but I had run into it before so I knew it was there.