The color wheel

If you have chosen a color scheme for your website, you are probably familiar with the classic 12 hue color wheel. What’s the hue? Color and at the same time one of the three properties of color, along with value and saturation.

 

Color wheels are composed of primary, secondary, and tertiary colors. These can be combined to create infinite variations. Let’s review their characteristics:

 

• Hue is the color itself. Red, blue, or yellow, for example.
• Saturation is the difference between being more subtle or more vibrant. Also called intensity or chroma.
• Value or lightness refers to how dark or light the color is. Here we find tints, shades, and tones.
• Temperature divides warm and cool colors.

 

 

These color nuances can be created by:

 

• Tints: adding more white
• Shades: adding more black
• Tones: adding more gray

 

The combination is called color harmonies, color schemes, color palettes, or simply color combinations.

 

If you’ve seen color wheels before, you might have stumbled on a few different ones. That’s because there are three color wheels: RYB, RGB, and CMYK. We will focus on RYB and the HSB(V) model to understand color harmony and the steps to create color schemes for your website.

 

• CMYK: Cyan, magenta, yellow, black uses subtractive light mixing to derive different colors.
• RGB: Red, blue, and green use additive light mixing to derive different colors.
• RYB + HSB(V): Hue, saturation, and value. HSB uses a mix of these attributes to derive different colors and is what’s used by UI and visual designers.

 

There are infinite hues on the color wheel. So how do we start?

How to choose colors

First of all, we need to choose a color. However, the color might have been decided beforehand due to the client's pre-existing branding. In any case, you should follow these first three steps:

 

1. Pick one dominant color.

2. Use just a few hues.

3. Use color palettes for inspiration.

 

I know, it is not so straightforward. That is why I’ll re-divide the first two steps into an easy 3-step process (multiplying steps, fascinating):

 

1. Choose a dominant color. Ask if your client already has a brand color and analyze color meaning.

2. Add two more colors. You can even use automated tools like mycolor.space. You’ll then end up with a dominant, complementary, and accent color.

3. Apply the 60/30/10 rule. 60% dominant, 30% complementary, 10% accent. Remember that you can switch colors up and use gradients by combining them.

 

You might think: that’s a lot of rules. But rules are good; they are our friends. And, when we get experienced enough, we learn when and how to break them.

 

So set this visual ratio and start with your background color. Then you can place some type to know its legibility by contrast. Consider calls to action and use your accent color. Don’t forget to consider the color of your illustrations in this mix.

 

If you are feeling low on ideas, here are six useful color categories that you can look up:

 

• Jewel tones
• Pastel tones
• Earth tones
• Neutral tones
• Fluorescent tones

 

The trick to getting really great-looking color palettes is to stick with one category or pair one of these with neutrals. The best part is you only need to find one color to make it all match.

 

You can combine color categories. And, if you feel expert enough, make hundreds of color palettes from one color.

 

But what’s this about color palettes and schemes?

Classic color schemes

There are classic color schemes or palettes that artists and designers have used since the beginning of time. We humans have something on our brains that lets us notice a good combination of colors from an ill-fitting one.

 

As the color wheel is infinite, the color schemes are too (yay, mathematical properties of color). But here are nine schemes you’ll see around and can serve you when choosing one for your website:

 

1. Warm color scheme. Red through yellow (there is an infinite range of colors).

 

2. Cool color scheme. Hues green through purple.

 

3. Analogous color scheme. Related hues of up to one-third of the circle. Colors adjacent on the wheel. Easy on the eyes. Conveys a peaceful and comfortable mood. Seen a lot in nature.
 

4. Monochromatic color scheme. A single hue. Only one color. Best for single subjects. Atmospheric.
 

5. Complementary color scheme. A pair of opposite hues. Very popular and naturally pleasing to the eye. Use one color predominantly, ideally the weaker.
 

6. Split-complementary color scheme. A hue and two (near-complement) hues adjacent to its complement. More creative freedom and feels more lively and joyous.
 

7. Triadic. Three equidistant hues on the wheel. It’s maybe the hardest to pull off. Best for cartoon or surreal scenes, think of the Joker.
 

8. Achromatic (neutral). No identifiable hues, neutral colors only. Black, white, and gray.
 

9. Tetradic (double complementary). Two pairs of opposing colors. Best used for foreground vs. background. Never use 25% of each; it will look chaotic. It’s hard but pleasing when done correctly.

 

Also, you should consider the possibilities of simple color vs. developed color. Simple colors are just two hues without variations with their full saturation versions. On the other hand, developed color uses value and saturation variations for the same colors (hues). You can even use neutral colors without altering the color scheme!

 

Color is hard, and putting colors together is even harder. But maybe you don’t want to go down the whole Wikipedia color theory rabbit hole after this and are tired of generators and automatic palettes. You want something unique, something that’s a product of your experimentation.

Traditional color meanings and symbolism

There are a lot of designers that use color psychology, meanings, and symbolism in their designs. I did some research to learn more about it, so here are my results:

 

• Yellow: optimism, confidence, self-esteem, friendliness or sickness, fear, cowardice, depression.
• Red: power, security, speed, courage, excitement or danger, defiance, aggression, pain.
• Blue: trust, intelligence, serenity, calm or sadness, cold, depression.
• Orange: comfort, warmth, playfulness or sense of being lost, despair, discomfort.
• Green: fresh, restorative, peaceful, eco-friendly or sickness, greed, blandness, boredom.
• Violet: spiritual, healing, royalty, creativity or suppression, introversion, moodiness.
• Pink: happiness, comfort, warmth, love, sexuality or physically draining, emotionally overwhelming.
• White: simplicity, cleanliness, clarity, purity or elitism, sterility, emptiness, isolation.
• Black: elegance, wealth, sophistication, glamor or oppression, mourning, fear, death.
• Brown: warmth, seriousness, earthiness, reliability or heaviness, dirtiness, lack of sophistication.

 

Careful! Different cultures and languages have varied color associations. Plus, many of the associations mentioned are out of date or culture and context-specific, such as pink (gendered only by culture and milieu) and purple (blue has similar royal connotations). Because of greenwashing, many companies gravitate around blue rather than green.

 

In any case, you can look at the opening scene in UP to understand how color can convey feelings. There is no better way to learn than looking at art and dissecting why we love some pieces.

Dos and don’ts on how to apply a color palette to your design

To wrap up this article, let's review some of the dos and don'ts.

 

Always add a little contrast. Making text readable and legible is not a luxury, it’s a must for many people. And even for those without impairment, you’ll make your content more engaging and easy on the eyes.

 

Saturation and value: don’t overdo it. We all love the psychedelic colors, to a point. Use these to guide the viewer and tell the story of your site. With some mastery, you’ll be able to use it to change the mood or draw attention to something.

 

As we’ve seen, use color harmonies or color palettes for pleasing combinations and converting your website into a work of art. Review the basics, take inspiration from other artists, and try them out. There is nothing better than a pair of fresh eyes to obtain constructive criticism. Finally, don’t stress! Color scheming can be actually fun, so enjoy the process.

 

Do you already know how to use color to your advantage for your next project?