Learn how to use and combine colors to create compelling and effective designs!

Color Theory

A color wheel that is represented by two circles, the smaller one is enclosed by a larger circle. The area between the circles is fenced off into sections, each displaying the colors of the rainbow.

If you’ve taken an art class, it’s likely that you’ve been introduced to the color wheel. This is a tool used by artists and designers to visualize the relationship between colors. 

It’s comprised of three color groups: primary, secondary and tertiary.

Primary colors are comprised of red, blue and yellow. These are equidistant to each other on the wheel, forming a triangle. They are also the basis for all other colors on the wheel.

Secondary colors are created by mixing two primary colors, forming green, orange and purple.

The third and final group of colors are considered to be tertiary and are formed when mixing a secondary and primary. These usually result in a two-word name, such as:
* Red-orange (Vermillion)
* Yellow-orange (Amber)
* Yellow-green (Chartreuse)
* Blue-green (Teal)
* Blue-purple (Violet)
* Red-purple (Magenta)

As you begin to select colors to use in your design projects, the color wheel will be vital in determining which colors pair well together.

The Color Wheel

You can also increase and decrease the lightness of a color, resulting in tints and shades of a hue, respectively.

Tints occur when white is applied to a color, adding or increasing the lightness of a hue.

Shades are created when black is added to a color, which decreases the lightness of a hue.

In HSLA, tints and shades are determined by the third number, which is L for lightness. This starts at 0% (black) and ranges to 100% (white).

Understanding how to use tints and shades of a color can help in creating a wider range of colors you could apply to your websites.

In this exercise, we’ll keep the hue consistent (blue), and we will vary the lightness value to create increasingly lighter shades.

Tints and Shades

Congratulations! You gained some knowledge on color theory and how to select colors to use within your websites.

Remember, the keys to choosing the right colors for your projects are:

* Using the color wheel as a basis for selecting colors
* Using a color scheme approach that promotes harmony
* Using colors that fit the context and emotion you are trying to display to users
* Using contrast to enhance the legibility of elements on the page
* Using shades and tints of a color to create flexibility
* Avoiding combinations that can cause issues for users

Following these guidelines allow you to create more elegant, engaging and beautiful websites!

Color Theory Review

All colors have a warmth value assigned to them, which can be classified as warm or cool.

Warm colors range between red and yellow, which include various versions of those colors in addition to orange. This also comprises colors such as brown and tan. These are considered to be “warm” colors in that they evoke a sense of warmth. For instance, fire is associated with warmth, and it typically burns between the spectrum of reds and yellows. Warm colors can also promote a feeling of aggression and are considered bold.

In the `style.css` file, we’ve created a layout consisting of five blocks. Let’s explore warm colors by creating a spectrum of them within the browser.

**Note:** We’ll be using HSL color properties to adjust our colors. You can refer to <a href="http://www.december.com/html/spec/colorhsl.html" target="_blank">this list of HSL color codes</a> if you want to discover more.

Warm Colors

Analogous color schemes apply three or more colors that are adjacent to each other on the color wheel. Typically, there is one dominant color (or hue), combined with a second to support, and a third to accent the color palette.

<img src="https://content.codecademy.com/programs/ui-design/color-wheel/Analogous.svg" width="60%" alt="Image of the color wheel selecting analogous colors: blue, light blue, and green"></img>

Analogous color schemes create a visually pleasing and calming display. For instance, the color blue can pair nicely with both teal and green. However, analogous color schemes provide a low-contrast experience, since all colors fall in line with one another. 

They shouldn't be used for content that needs the user's direct attention, but they can be used to create backgrounds that do not compete with the main content of the site.

Let’s adjust some of the colors on our website to see how an analogous scheme would look!

Analogous Color Schemes

On the other side of the color wheel in contrast to warm colors, there are colors that are considered to be “cool”. These colors range between blue, purple and green. Most gray colors fall into the cool category as well.

Cool colors are given this designation because of their calming, soothing nature. They’re often associated with winter climates or water.

As we did before, let’s update our colors to create a spectrum of cool colors.

Cool Colors

Triadic color schemes, much like complementary schemes, provide additional pops of color while allowing for some flexibility in the range you can use. 

These consist of three colors that are equidistant from each other on the color wheel. 

<img src="https://content.codecademy.com/programs/ui-design/color-wheel/Triadic.svg" width="60%" alt="Image of the color wheel selecting triadic colors: dark blue, orange, and light green"></img>

For instance, if we stick with blue being our main color, we would then select red-orange and yellow-green as the pairing combinations. This creates a triangle of colors within the color wheel and gives us a wider palette to choose from.

Triadic color schemes are useful in that they create a sense of equality, vibrancy, and security in your designs.

Let’s explore our website, and apply a triadic color scheme to it!


Triadic Color Schemes

Color is essential to the overall aesthetics and usability of your websites. 

With 16.8 million colors to choose from, the possibilities are endless. Understanding how to select and use colors properly and effectively can impact the quality as well as how users comprehend and use your website.

Before selecting and applying color to your projects, it’s essential to gain an understanding of:
* Which colors pair well with others
* What color schemes are available to produce effective designs
* Which emotions each color evokes and communicates
* How contrast plays a vital role 
* What color combinations you should avoid

Let's explore color theory and how you can select meaningful hues to effectively communicate the message of your site and pair them effectively for elegant layouts. The website to your right is the design that you will be working with throughout the lesson to apply your new color theory knowledge.


Introduction

Even though we’ve explored multiple possibilities in terms of selecting color schemes, when it comes down to choosing the right combinations, a designer must determine the “feel” of their website.

Every color has a different context and meaning, and color psychology can impact how people perceive a design and relate to the colors used. Choosing the right colors can help nonverbally communicate the context and emotion of a product or service.

Each color has a specific meaning (both positive and negative), which can evoke emotions from a user. For instance, here’s a list of words often associated with colors:

* **Red:** Passionate, energetic, angry
* **Orange:** Optimistic, playful, fun
* **Yellow:** Welcoming, intellectual, impatient
* **Green:** Prosperous, balanced, growing
* **Blue:** Peaceful, loyal, cold
* **Purple:** Imaginative, royal, spiritual
* **Gray:** Unemotional, compromising
* **White:** Innocent, pure
* **Black:** Luxurious, powerful

It’s also important to note that color associations may vary from other parts of the world as well. However, when selecting colors, be sure to choose ones that help reinforce the overall message and tone of the website!

A color wheel showing each color with its meanings, along with three blocks for white, black, and gray. Refer to the exercise text for the colors and their associated words.

Color Psychology

Now that you’ve learned some basic color theory, let’s explore how you can select and apply color to your designs.

As a designer, it’s vital to understand how properly harmonizing colors will enable you to create elegant and usable designs. The color wheel comes in handy when deciding which colors might fit with one another, and using it can allow you to create a variety of color schemes.

Color schemes (or color palettes) are the result of pairing two or more colors together. The colors you select can make or break your design, however, knowing your options will put you in a better place to determine what is best for moving forward.

When deciding which colors to use in your design, there are four different color schemes to consider:
* Monochromatic
* Complementary
* Analogous
* Triadic

Each of these can work to your advantage depending on how you want your designs to display. Let’s explore each type of color scheme and apply it to our site to see how they differ.

Four color wheels, each depicting the relationship of the colors within a different kind of color scheme: Monochromatic, Complementary, Analogous, and Triadic

Color Schemes

As depicted in the diagram before, a complementary color scheme utilizes colors opposite from each other on the color wheel. For instance, if you were to select blue as your main color, it would create maximum contrast and intensity with orange.

<img src="https://content.codecademy.com/programs/ui-design/color-wheel/Complementary.svg" width="60%" alt="Image of the color wheel selecting complementary colors: orange and blue"></img>

Complementary color palettes are very common in logos and uniforms. For example, the Los Angeles Lakers and Minnesota Vikings feature purples and yellows; the Chicago Bears and New York Mets incorporate blues and oranges. These complementary schemes provide a dramatic display of color, which can be applied to websites as well.

<img src="https://content.codecademy.com/programs/ui-design/lakers.jpg" width="60%" alt="Lakers uniform showing contrast between purple and yellow"></img>

Complementary color schemes are popular on the web as they have high contrast in the color pairing. 

They can seem clashing if complementary colors are used for large areas that are directly next to each other. However, when used strategically, they can draw attention to certain elements on the page that you want users to focus on.

Complementary Designs

The most basic color scheme possible utilizes a single color with varying shades and tints to create a monochromatic palette. 

<img src="https://content.codecademy.com/programs/ui-design/color-wheel/Monochromatic.svg" width="60%" alt="Image of the color wheel showing a monochromatic palatte "></img>

Each color in the scheme is derived from the base color. While all elements within the design may feel similar, you can help eliminate the monotonous feeling with high contrast. This means when you are selecting a monochromatic color scheme, it’s important to select a much lighter and much darker shade of the main color.

These monochromatic color schemes are beneficial in that they provide an organized impression when applied to your designs. The use of a single color can provide an immediate sense of harmony.

Monochromatic schemes can also consist of black and white, with varying shades of gray, as you see in our current site. However, let’s enhance it by selecting a different base color and applying a monochromatic color scheme to our website!

Monochromatic Designs

Color contrast plays a major role in design as well. Colors opposite of each other on the color wheel tend to have a higher contrast. Colors that fall next to each other have a lower contrast to one another.

When applying color to your designs, it’s vital to ensure contrast levels provide clarity to the users for the elements on your page. For instance, you wouldn't want to use a light color on a white background or a detailed background. It’s essential to try and increase the contrast of your designs in order to promote ease of use and legibility.

This is also the reason why you often see dark gray or black text on a white background. The high contrast between the two colors provides the best ability for users to read the information without any difficulty.

Before we begin to add color to our website, let’s add contrast to the text elements to ensure the readability of our content is ideal.

Color Contrast

Now that we’ve talked through how to choose the proper colors for your designs, there are some best practices to consider as well.

**Use neon colors sparingly.** While the use of neon colors can feel hip, they are often hard on a user’s eyes.

**Avoid vibrating colors.** Vibrating colors result from pairing two colors with high saturation together that may be complementary to one another. It creates a glowing or moving effect, which also can be hard on one’s eyes. 

For example, the red and green pairing that is common with Christmas cards is very glaring when presented on a screen. See the example to the right to notice how intense and distracting this pairing feels. 

**Use backdrops to separate vibrating colors.** In the example, the white backdrop behind the green card reduces the space where the contrasting colors (red and green) are directly next to each other, but the overall effect is still too intense for most websites.

**Avoid color combinations with insufficient contrast**, including:

* Bright colors on top of bright colors
* Light colors on top of light colors
* Dark colors on top of dark colors

Even if there's enough contrast in these pairings for the different colors to be legible, they likely won't create enough contrast to attract the user's attention. 

Remember that **most users skim websites!** They are not reading every word and checking every menu—you need to guide the user to the most important content with good color choices.


Four red Santa hats sitting on a textured green patch, which sits in front of a white rectangle over a red background. The reds and greens are all highly saturated, making them visually intense when presented next to each other on a screen.

Best Practices

There are a few different options for setting colors in CSS that we covered in <a href="https://www.codecademy.com/courses/learn-css/lessons/color" target="_blank" rel="noopener">Learn CSS: Color</a>. Take a look at the code below to refresh yourself on the different ways of setting color in CSS.


```CSS
h1 {
    color: Yellow; /*Keyword */
}
h2 {
    color: #8FBC8F; /* Hex Code */
}
h3 {
    color: rgb(23, 45, 23); /* RGB*/
}
p {
    color: hsla(34, 100%, 50%, 0.1); /* HSLA*/
}
```


When thinking like a designer, HSLA is the preferred syntax for setting colors. Why?
* The CSS color keywords only give us a few options.
* Hex Codes and RGB values cannot be intuitively adjusted. For example, you get feedback on your design that one color needs to be a little brighter, that does not translate to intuitive changes within Hexadecimal codes or RGB values. 
* HSLA is the most semantic system of setting colors with CSS.

Let's review what each value means:
* The "pure" color is set with the Hue. This is expressed as the angle in degrees around the color wheel.
* Saturation refers to the intensity or purity of that hue. Colors with full saturation (100%) are the color itself, colors with no saturation (0%) are completely grayscale.
* Lightness refers to the lightness of the color. 0% is black, 100% is white.
* A, or alpha, refers to the opacity. 0% is fully transparent, 100% is fully opaque.

Using values that have semantic meaning gives the designer more direct control over the color scheme, and more direct ability to manage contrast and create related color schemes.