Color theory 101: Make your own color palette

Were you ever working on a design or website and wondered what colors to use? In this blog post you’ll learn about the color wheel and color harmonies, that you can use to create pleasing color arrangements. And of course we also share some useful tips. 😉

The Color Wheel

The color wheel is the foundation of Color theory. The wheel shows the visual relations between different colors. The basis are the 3 primary colors: red, yellow and blue. By mixing those colors together we get secondary colors. For example orange, purple, green. Sequentially by mixing secondary colors with primary colors tertiary colors are formed. Colors on the wheel are also divided into warm and cold colors. Warm colors are generally more energetic but can also be irritating, while cold colors are soothing but can feel cold and boring.

Basic terminology

To describe our position on the color wheel, and sequentially a specific color, we use the terms hue, saturation and value. Hue tells us on which angle on the wheel we currently are. Saturation tells us how intense/vivid the color is (how close to the center of the wheel we are), while value tells us how bright or dark the color is.

Color harmonies

Color harmonies or color relations are pleasing arrangements of colors that can be used when creating color palettes. Color harmonies try to balance different colors so that they are still visually complex without being overbearing. The following sections will present a few of the most common color harmonies and give examples of photos that use such harmonies. The photos given in the examples are taken from unsplash.com, each photo also has the link to the respective photographer.

Monochromatic

The monochromatic color harmony uses only one hue or hues that are very closely together. The difference in color comes from the saturation and value. Use this harmony when you want a unified feel and message.

Analog

Colors are analog when they are next to each other. There shouldn’t be any larger break in between them. Use this color scheme when you need a larger variety of colors but still want to achieve a similar feel throughout.

Complementary

Two colors are complementary when they are each on opposite ends of color wheel. This maximizes the tension between colors while retaining balance in between them. Use this when you want to present two contrasting messages or when you want different visual elements to pop from the background. You may have already noticed that many movie posters use this color palette, especially the combination of orange and light blue.

Split complementary

The difference between complementary and split complementary is that one of the colors is split in two (in the example below the color orange, which is complementary to blue, is split into shades of green and red). The angle between each split color and the complementary color needs to be the same. So if we move one of them, we also need to move the other equally in the opposite direction. Use this color harmony if normal complementary colors don’t give enough variety.

Triad

Colors form a triad if the angle between them is the same. Pay attention to the ratio of these colors in your designs, they shouldn’t be equally represented. The following photography shows a good example.

Double complementary

Double complementary uses two sets of complementary colors. The derived color palettes are very colorful. Pay attention to the saturation of colors. Don’t oversaturate them or your design will be too overbearing.

Tips and tricks

  • Don’t use more than 5 different colors in your color palette.
  • Use similar saturations and values for your colors. But pay attention to the contrast between each of them so you don’t use colors that are too similar.
  • When creating color palettes think of how many different elements there will be on your design and how much contrast you will need between them. Than you can decide how many colors you need.
  • Black and white can be used with any color palette. You don’t need to add them to your palette.
  • If you are making a portfolio page or an image repository (so you don’t know which colors will appear on the page) use a achromatic (colorless) color theme.
  • A good way to tackle color palettes is to construct them from an image. Find an image you like and use its colors.

Useful links

Adobe Kuler – A online tool for creating color palettes. Most of the described color harmonies are already integrated into the tool. Also don’t be afraid to try the custom option. It can also retrieve colors from images that you can edit later. It also has a vast library of already made color palettes.

Color scheme designer – A similar tool to Adobe Kuler, it comes with a variety of color presets like pastels, grayish or shiny… while also retaining those color harmonies.

Now that you know the basics, you’re ready to experiment and explore! 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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