How to Make Color Combinations


Want to make your designs pop? A good color combination can set the mood of any design, accentuate elements and draw viewers' eyes to important items. Creating a color palette is an easy process that will have a big effect.

  • Organize your design elements---headers, columns, text, links and images---in a hierarchy. What elements are most important? Which do you want your viewers to pay attention to? Many websites use large, light-colored text or photo headers to draw attention, and accentuate links and buttons with bright hues. In comparison, text is often small and drab: it's simply filler between two action items.

  • Pick a central color that you feel represents your design. For example, many financial institutions use simple, muted grays and blues to represent stability and trust; kids' websites are prone to bright purples, oranges and yellows; political sites often choose red and blue; and environmentally-themed sites choose grassy greens.

  • Use the free color scheme generator at Color Scheme Designer (see Resources). Experiment with color combinations based on your chosen hue. Use the "mono," "complement" and "analogic" settings for a more conservative design. For more dynamic color, try "triad," "tetrad," or "accented analogic." Preview your combinations using the "light page example" and "dark page example" links.

  • Choose three or four colors that work well together, and apply them to your design hierarchy. Use your best judgment, as well as conventional wisdom: headlines should contrast with the background; links should be colorful or bright; text should be high-contrast but easy to read.

  • Apply colors to your design using the automatically-generated HEX codes (6-digit alphanumeric codes that specify the exact color). To see the codes for your chosen colors, click the "Color List" link.

Tips & Warnings

  • Most designs work best with between four and six distinct colors. Fewer colors will make your design boring and difficult to skim; too many colors can result in confusion. When in doubt, go with your gut! You might know instinctively that a color combination looks good, even if you can't prove it on a color wheel. If you like it, odds are that other people will too.
  • Avoid---absolutely avoid---any color combination that makes text difficult to read. Since it's usually the smallest and most abundant element on the page, it must be easy on the eyes. That means high-contrast (usually black, white or gray) text is best. It doesn't matter if you like another color better. If it's hard to read, your viewers will be frustrated and may leave your site.

Related Searches


  • Photo Credit Eraphernalia_vintage/, guspim/
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!