Web Design: Tools, Color Wheels, Charts, Theories, and More on Color

Posted on by

Colored ball in a quilt of colors.Most business owners don’t consider the importance of color when thinking about promoting their business. They just want the colors to match their business cards or logo.

When it comes to choosing colors for your website, it can be as easy as planning the colors to paint the rooms in your house. It begins with some color theory, then pull out your old color wheel and give it a spin. Right?

Well, it would if colors on the web were that easy.

In order to understand how colors work in web design, you need to know some important concepts.

I’ve put together this summary of resources to support these and included many online free tools, color charts, color wheels, and more to help you learn more about how web colors work and how to choose colors for your web design or WordPress Theme.

Number Your Colors

Text that asks what red with variations of red colors behind it.Another thing you need to know about colors on the web is that there are different ways to present them in CSS.

Colors can be by the word: red, green, blue, aqua, pink, purple, white, black….

So you choose red for your background color. What color red do you want? The colors for these names are set by the browser. The red in Firefox might be slightly different than the red in Internet Explorer. If you are picky about your reds, you need to be picky about naming them so they present the exact color you desire.

By using Hexadecimal HTML color codes, you can narrow down that red to #990000, #ff0000, or #cc0000, among many others.

Hexadecimal HTML colors are a combination of the hashtag (pound) symbol and a six digital alphanumeric combination.

Today, RGB (Red Green Blue) colors are also accepted by most modern web browsers, giving an even more precise color choice. RBG is a process of mixing the three colors together to represent all the colors, like mixing paints together.

What does this all mean?

The hexdecimal color format with two letters or numbers over red, green, and blue.

The hexadecimal method represents the three base colors, red, green, and blue based upon Greek and Latin representing a numbering system which uses 16 as the base, instead of 10, which is what decimal systems are based. The first two characters represent red, two for green, and two for blue. The highest value, white, is represented by #ffffff, a mix of all the colors. Black is the lowest, thus the “absence” of color, represented by #000000. As the letters go from aa to ff and the numbers from 00-99, the intensity of that red, green, and blue change to change the resulting color.

The RGB color model is basically the same with red, green, and blue represented by three numbers, with (255,255,255) as white and (0,0,0) is black. The resulting color is a combination of the three colors and their mix.

The proper structure of the color options are as follows:

  • blue, green, red, yellow, black, aqua (note there is no symbol preceding the color name)
  • #30AA3C, #AAF745, #003091, #B33B00 (note the hashtag (pound) number symbol is required. They may in caps or lowercase.)
  • (173,255,47), (255,0,0), (199,21,133), (0,128,128), (0,0,139)

Wikipedia has a good sampling of the three color naming conventions, and below is a list of more.

If you wish to convert your colors from one system to another or know the difference names for each color. Here are some color conversion free online programs.

Web Safe Colors

Since the very beginning in 1993, the first browser, Mosaic, used blue text with an underline to represent a link. Purple was the default for indicating the link had been visited. These color and formatting styles have persisted in the memory of web users, thus tend to be confined to only those purposes even though there are millions of colors to choose from. Avoid using blue and purple on anything other than links, and underline nothing except links to prevent people from clicking where no click is found.

Colors on the web begin with understanding Web Safe Colors. In the “old days” of computing, there were 256 colors deemed web safe. As computer graphic cards and monitors improved, color tones and depth radiates in the millions, yet it wasn’t always that way. Web safe colors are colors that stay basically the same no matter what the user is using to view your web page. The History of the Browser-Safe Palette from Lynda.com is an excellent article on how web safe or browser safe colors evolved.

Colors selected for key color areas on a web page such as navigation and titles should be as close to web safe colors as possible, but the palette is wide open for all the rest of the colors of your website – as long as they don’t offend, annoy, distract, or not meet web accessibility standards for vision.

Sources for web safe and basic web colors include:

Colors and Web Accessibility

With the US federal law for web accessibility in place as of March 2012, it is more important than ever for web professionals to design to meet those standards and guidelines, making color decisions for readability and usability even more important.

The Accessibility Color Wheel by Altervista is of note as it has several algorithms incorporated into its system to help judge the “accessibility” level of color usage, covering a wide range of the most common vision issues. As you move over the color prism, the type on the page changes to those colors to show you how someone with Deuteranope, Protanope, and Tritanope color blindness would see the results compared to normal vision.

Web Accessibility Color Wheel compares font colors with background colors.

Emotions Color Wheel example of colors representing feelings.Do2Learn’s Emotions Color Wheel is a fascinating perspective on the influence of color on emotions, generating feelings by their usage. “Seeing red” holds up as red represents anger. A reddish peach tone is considered “aggravated.” Lean towards purple in the same ton and you get cranky, then bored, distracted, and disappointed as you move around to blue. It’s fascinating to see the perception of color on emotions and might influence your next color decisions on your web design or WordPress Theme.

Cymbolism | Words & Colors is similar. It basically asks what color you think of for a term or phrase to quantify the association between colors and words.

One of the biggest challenges of choosing colors for your web design or WordPress Theme is determining font colors and background colors. Black on white or white on black are common, but what if you want to move away from those standards?

Yellow on white is unreadable. Yellow on a black background is painful. How do you determine which is the right combination?

UXMatters has a good article on applying color theory to digital displays, which include web pages. They offer extensive explains and explain:

Before designing an application or Web site, establish design guidelines, including conventions for the use of color. These conventions should dictate all purposes for which you use color, what colors apply to specific types of elements, and the meanings associated with specific colors. Use these color conventions consistently throughout an application or Web site. Once users interpret the meanings of colors, they will apply those meanings wherever they encounter the colors. If your use of color is inconsistent, users will be unable to build a mental model of color usage or to reliably interpret the meanings of specific colors.

Choosing the foreground and background color of a website is a mix of color theory (discussed below), web accessibility, contrast, and readability. After all, your content must be read and seen, so you need the background to not overwhelm the foreground content, and vice versa.

There are a variety of tools that will help you determine a good fit for choosing colored text on background colors. Once you have narrowed them down, run them through web accessibility testers to ensure there is enough contrast between the two colors to make it readable.

Other web accessibility tools for color include:

Also check out Complete List of Web Accessibility Evaluation Tools from the W3C.

Articles worth reading to learn more about color contrast, readability, vision impairment, and usability when it comes to choosing colors in your web designs include:

Color Theory

There has been a lot of research on color theory, analyzing the emotional impact of colors and influence, as well as web accessibility, determining the colors that are viewable across a wide spectrum of vision issues.

In the section on web accessibility, I point to Cymbolism – Words & Colors and the Accessibility Color Wheel, representing the emotional context associated with color.

There is philosophy, psychology, cultural influences, and more associated with colors. There is also basic color theory, how colors work, and how they work together as well as influence humans.

The following are articles on color theory and basic techniques.

Online Color Wheels and Charts

There are many color wheels and tools on the web to help you find complementary colors for web design and WordPress Themes.

ColorSchemer and Color Scheme Designer are long time favorites of mine. You can pick a color and it shows you a color palette of colors that complement it, then you can lighten and darken the tones quickly to find the right combination. Color Scheme Designer has an option to test the colors under various vision impairment scenarios.

The following are color wheels and charts to help you choose colors for the web. (Note: Some of these were created with Adobe Flash and may not work on your system.)

ColorTools.Net has a large collection of color tools, pickers, comparisons, matchers, and combiners. They include:

Matching Colors, Color Themes, Color Palettes, and Color Schemes

There are times when you need to match colors to a specific photograph, header art, logo, or client choice. Or when the client has a range of colors or palette to choose from and you need help picking the right color theme or blend.

The first set of tools dealing with creating color schemes and matching colors focuses on finding a specific palette that works for your site’s goals.

Pter Piper Palette Picker example of colors within a website layout.Peter Piper’s Color Palette Picker from Worqx is a fascinating palette picker and scheme generator. It helps you to visualize what the colors will look like next to each other as well as in combination. The Palette Picker offers seven web page block elements, allowing you to color each one to visualize the end result on your own page. Colour Expanda/Comparitor is much the same, helping you to find complementary colors as well as analogous colors and variations thereof.

Man in Blue Website color palette example of a website layout with colors.Technicolor – The Man in Blue allows you to really see what your site would look like in various color schemes. Click color options, then click the part of the demo web page you wish to change. You can choose the font colors as well as background colors, mixing and matching to find your color palette. I highly recommend this one for those new to designing websites and WordPress Themes.

Slayeroffice is a fascinating color generator. You enter a color and it generates 10 shades of that color to show you the tonal range you may choose from.

One of the oldest color blenders and schemers is by Eric Meyer, one of the leaders in CSS and web design development. Color Blender can set the colors by hexadecimal, RGB and RBG percentage. You can choose two colors then blend them with a variety of midpoints, the shifts in tone between the lightest and darkest. The resulting palette gives you something similar to Slayeroffice with specific color names of each tone.

mooColorfinder Website color finder evaluates a web page and reports on all the colors used within it.

Krazydad - color wheel with flickr matching photographs in that color tone.KrazyDad Color Fields Colr Pickr (Flash) takes the color picking and palette process into the modern era. The color wheel is easily changed, shifting colors around, and brings in thumbnail photographs from flickr of photographic subjects matching those colors. The author, Jim Bumgardner, takes these even further with variations on the theme with color types and formats such as Flowers, Crayon Box, Squared Circle, Urban Decay, Graffiti, and more based upon flickr tags and categories.

TinEye Labs – Multicolr Search Lab is similar, expanding even further to allow you to choose up to five colors and find images with those colors in flickr for inspiration and color theme ideas.

The following are tools for matching colors. (Note: Some of these were created with Adobe Flash and may not work on your system.) Some of these are simple and easy to use, others are quite sophisticated, offering you a full range of information upon which to make your color decisions.

Color Palettes from Images and Photographs

The above color tools help you to match colors or find specific color schemes. This next set takes graphics, images, or photographs and generates a web color scheme from them.

The colors may or may not complement each other, but it is a great way to pull colors from logos or specific photographs you wish to use within the design such as in the header art or background design.

Color pickers are tools you can use to literally pick out colors from web pages, images, etc. If you would like to add a color picker to your web browser of computer, check out this extensive list from Hongkiat, Best Of Useful Eyedroppers (Color Pickers) For Designers.

I Want More Color

Personally, I can’t do my work daily without ColorZilla in my Firefox web browser and ColorSchemer and Color Scheme Designer in permanent tabs. When doing larger projects for clients, I call upon many of the above tools to help layout color choices.

There is a lot to learn about color on the web and in the world. This is just a sampling to introduce you to the possibilities.

To learn more about color in general and find more useful information and tools:

2 thoughts on “Web Design: Tools, Color Wheels, Charts, Theories, and More on Color”

  1. Pingback: Web Design: Tools, Color Wheels, Charts, Theories, and More on … | inLine Media RSS Blog

  2. Pingback: Visualisation … « Travels with a Megarider …

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s