I have seen three digit hex codes to define color. What are they? How do three digit hex color codes work?

Posted February 21, 2005

When first starting to look through CSS styles sheets to see how things were done, I would come across hex codes for colors in this format:

color:#000;

I think I may have read about how they worked, but glazed over it. I had the impression that a three digit code meant that you were shortening a repeating number that was all the same. So for the previous example I figured that the shortened three digit version was actually the full definition for the color black which is;

color:#000000;

But today I learned that was wrong. Instead the code is a shorthand for three sets of digits that repeat. So this is my new example;

color:#060;

This shorthand version for this hex code is actually this written out in long version;

color:#006600;

Need another example? Ok how about;

color:#251;

Translates into;

color:#225511;

So you see, it takes each one of the repeating numbers, and pairs it down. This is just a small little simple way that may save you time, and may even save you a little bit of loading time for the style sheet, but in all actuality, I think is a little more preference. Most of the advanced style sheet users do it this way, so at the very least you look like you know what you are doing.