Color Theory
Lesson 1 of 1
  1. 1
    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 pro…
  2. 2
    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…
  3. 3
    There are a few different options for setting colors in CSS that we covered in Learn CSS: Color . Take a look at the code below to refresh yourself on the different ways of setting color in CSS. …
  4. 4
    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 or…
  5. 5
    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…
  6. 6
    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 …
  7. 7
    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 on…
  8. 8
    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 enab…
  9. 9
    The most basic color scheme possible utilizes a single color with varying shades and tints to create a monochromatic palette. Each color in the scheme is derived from the base color. While all el…
  10. 10
    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 cr…
  11. 11
    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 thir…
  12. 12
    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 equid…
  13. 13
    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. …
  14. 14
    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 f…
  15. 15
    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…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo