HTML Color Hex Shorthand…

OK, for you CSS wizards, and people who can generally read and comprehend things, this will be old news. For the rest of us, in the past years you must have seen color hex shorthand like this “#FED”. Until today, I’ve never really cared what that meant.

Some background… I’m a software developer, and I don’t work at Google or Apple. This means my UIs are usually bare bones. I’ll use some rounded corners and floating DIVs, but that’s about it. In the case where my business clients or partners request a fancier UI, I hire out as much as possible (logos, icons, etc). No matter, I’m always stuck doing the CSS (look and feel). I am not good at it. My UIs always look just like they would if a developer with access to rounded corners and a small graphics budget worked on it.

Anyway, I’ve been asked (told) to make the UI a little sharper. To the point, my color scheme choices have to many colors. My buttons look like I built the UI in 2000. Bottom line, I’m trying to do too much, as if to hide my novice. Funny thing is, the best UIs usually look like the designer did very little. Based on the items I’ve read and seen in the past 5 years, I should know that. I digress.

When you use shorthand for hexadecimal color, each character is repeated once. So, “#FED” gets translated into “#FFEEDD”. The full color code is 6 digits long, another representation of RGB (Red, Green and Blue). So the first two digits are the Red codes. The next two digits are the Green codes. The last two are the Blue. When three characters are given, the browser assumes the proper/full hex color code. See this W3c.org post for more details.

This entry was posted in General, UI. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *