Color is an important tool in a visual designer's toolbox. The color of an everyday object communicates a lot to an observer. For example, why is every stop sign red? It's the same with web pages; users learn a lot about a web page with a single glance, both consciously and subconsciously. Effective use of color on your web page will help you communicate the page's intent, and it will help your users get the most out of the page.

Thinking About Color

If you're just starting to think about color usage in web pages, it's a good idea to find some examples for analysis and inspiration.

Visit a favorite web page of yours, and look at all the different colors. Ask yourself questions like the following:

  • What color is the text and its background?
  • How many different colors can you spot?
  • Does the set of colors feel like they go together?
  • If there are buttons, what color are they?
  • If there are images, how do the colors in the image fit into the rest of the page?

The answers to these questions will be unique to every web page you visit. If you ask yourself these questions about your web page, they might help you focus and refine your use of color.

After looking at the web page rendered in the browser, take a look behind the scenes. Inspect the CSS for each distinctly colored element with Developer Tools. Ask yourself the following questions:

  • Where does color fit into the author's CSS?
  • What color scheme (RGB or HSL) do the authors use?
  • Does anything about the use of color surprise you?

You can also find inspiration in other media such as film, paintings, and print design. To start, try one of the many websites where people show off their designs, such as Dribbble, siteInspire, or Awwwards.

Deciding on Colors

Often, designers make holistic decisions about color in a project using a color palette. A color palette is a set of colors. A good color palette is a set of colors that go together; the colors are consistent, and they send a consistent message.

Anyone can create a color palette, and there are free tools online to help, like Paletton and Adobe Color CC.

Color palette's often follow a set of rules to make them more cohesive. Rules use color theory and mathematics to help guide color usage. They are found under different names, but the tools mentioned above support at least these common rules:

  • Monochromatic — Variations on a single hue
  • Analogous — Hues equidistant from each other (usually adjacent) on the color wheel and variations on these
  • Complementary — Hues opposite each other on the color wheel and variations on these

Using a color rule may not work for every project, but it's a great way to get started and experiment. Which rule you use will depend on your preferences, your web page's purpose, its content, and how many distinct elements and categories of elements will be on your web page.

Accessible Colors

People differ in their ability to perceive color. Some people are less able to distinguish between two contrasting colors. Other people have generally poor eyesight and rely on the contrast between colors to navigate.

You cannot forget to consider accessibility when choosing your colors. One in twelve men are affected by color blindness as well as one in two hundred women. Design humanely for your whole audience; use colors to communicate to your users, not confuse them. You can learn more about color blindness here.

Because of the variety of visual impairments, there's no one cure-all tool to ensure your site's colors will work for all users. You can use tools such as Color Laboratory to emulate color-blindness as you're making decisions about your color palette.

Color on Web Pages

After deciding on a color palette, you’ll need to decide which elements to pair with each color. Developing a plan early in your project will keep the design process flowing.

When there is text on your web page, readability is an important consideration. To choose text colors from your palette, find two contrasting colors within your pallette, one dark and one light. Use one for the text and the other for the background. If the text and background colors do not contrast enough, the text may be difficult to read.

For the rest of the page's colors, it's a good idea to be consistent. One strategy is to organize each element by importance. Then, apply the most striking colors to the most important elements. For example, if you want users to click a certain button, give it a striking, contrasting color. Move down your list of elements and give them each a color from your palette. Similar elements should have similar colors, otherwise you risk confusing your users.

A Piece of the Puzzle

Color is just one part of the bigger picture of site design. Align your color choices with your use of font choice, sizing, and positioning to make a holistic design. There is no one element which is more important than the others; they all work in concert.

Design takes time and practice. Try things and do not be afraid to make mistakes or start over. Experimentation is a great way to understand how your choices affect a design.

Made in NYC © 2018 Codecademy