People who know me in person know that I am a fan of color. When everyone else in New York City is wearing their drab greys, blacks, and browns, I will more than likely be sporting bright oranges and greens. It’s not that I have anything against greys, blacks or browns. Those are colors and I wear them also. I just wish that those were not the predominant colors you find around the city.
One of the mysteries of life in this city that I have not figured out yet is what happens to all the brightly colored clothes the stores carry. Obviously, I am not the only person who buys them. Perhaps most of the other people who buy these clothes are embarrassed by them by the time they get home and they bury it somewhere in the back of their closets, never to be taken out and worn again. If you have a better explanation, I would like to hear it.
But this blog post is about how to use, or not use, color on the web. If I have free rein while building a website, you will see my personality pop through in the use of colors and textures (I will talk about textures in a separate post next week). But if a client wants a monochromatic website, I am up to that task also. In fact, a website that I am currently working on is all black, white, grey and gorgeous. Unfortunately, I cannot share a link here because the website is under development even as I type this. Sometimes a client gives you a logo and you then base the website’s entire color scheme off it.
When building websites, I would be lost without a browser-based color picker. This tool works much like a color picker in your favorite graphics program but you use it to pick colors on web pages and pictures you open up within your email rather than pictures you have terrestrially on your computer.
I do 95% of my web work using Firefox and I use the ColorZilla add-on as my color-picker of choice. I am sure almost every browser out there has one or more color-picker add-ons or extensions available. ColorZilla sits, always ready to be activated with one click, in the upper-right hand corner of my browser alongside some other handy tools like Firebug and FireFTP. It lets me know a color’s hex code, hsl and rgb values (More about this later). The only time it’s not useful is when an element on the web has a hover effect which changes its color (When this happens, I can use Firebug and look up the element’s “normal state” hex color code).
I picked up the exact shade of violet of one of the alligators in the example below:
ColorZilla also conveniently copies the hex, hsl (Hue, Saturation, Lightness) and rgb codes of the last color you picked into memory, allowing you to painlessly reuse it on the web or within a local graphics program.
While you can specify colors on the web in several different ways including by name in certain cases, the most common way color is addressed across the web is by referring to its hex code which is a hash sign followed by a combination of six letters or numbers – the first two refer to the red (RR) component, the next two to green (GG) and the last two to blue (BB). Hex codes can represent around 16.8 million colors, more than twice what the human eye can individually perceive.
While there is no need to memorize hex color codes, you may like to know that black, which is in a sense the absence of color, is #000000 (when a letter or number is repeated, you can shorten the hex code like so: #000). White – made up of all the colors of the rainbow – is #ffffff (or #fff). So, as you may be able to guess, red is #ff0000. #00ff00 will give you a shade of green, and #0000ff will give you a shade of blue.
In CSS, color refers to the color of text. If you want to change the color of your background, you have to specify background-color. Therefore this bit of CSS would give you white text against a black background:
{color: #fff; background-color: black;}
Well, sometimes you may want to use a semi-transparent background. For this you use rgba (Red, Green, Blue, Alpha) codes. The Alpha part is a percentage (100% = 1, 50% = 0.5, etc). So the CSS for semi-transparent black background is:
{background-color: rgba(0,0,0,0.5);}
While there are millions of colors you can use on the web, only a very small fraction of these are web safe colors which will look exactly the same no matter what type of (properly working) monitor you view it on. I think a palette of 200+ colors can be boring. So live a little and use unsafe colors 🙂
Now, the point of this post is not to list all the color codes out there… as I mentioned, there are millions. I would rather like to take a few square inches of web space to give you an idea of how to come up with a color scheme for your website once you have a base color picked out. Fortunately, there are websites to help you with this task. My personal favorite is ColorHexa.com. Once you enter a hex color code in this website, it will give you all the variations you could possibly want including complementary and analogous colors, tints, shades, tones and so much more. It will also give you the closest web safe color (Boring!).
This is a small sampling of the type of information you can get from ColorHexa for the orange-y shade of #ff6600… in less time than it takes you to blink:
When building a website, you may also want to consider the psychology of colors. For instance, certain shades of blue impart a sense of trustworthiness. This is why it is a common color used on corporate and banking websites. There are colors that are more likely to induce you to spend money (Good for e-commerce platforms) and colors that impart a sense of sophistication. Keep this in mind before you decide that your favorite color combination is red and black and those are the colors you are going to use on your website. Think of what action(s) you want your visitors to take and do some research into what color(s) are more likely to induce them to take these actions. You can see a color wheel break-down and read more about the psychology of colors at http://www.vandelaydesign.com/the-psychology-of-color-in-web-design/. You can use your favorite search engine to find many more websites that address this topic.
Hello, I read your new post named “Demystifying Color.” Your writing style is awesome, keep doing what you’re doing!
It’s like you read my thoughts! You appear to grasp so much about this, as if you wrote the book on this topic. A great read. I’ll definitely be back.