Learn Color Theory
This course will teach learners how to use color in websites to create effective designs.
Start
Color Theory
Lesson 1 of 1
- 1Color 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…
- 2If 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…
- 3There 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. …
- 4All 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…
- 5On 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…
- 6You 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 …
- 7Color 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…
- 8Now 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…
- 9The 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…
- 10As 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…
- 11Analogous 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…
- 12Triadic 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…
- 13Even 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. …
- 14Now 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…
- 15Congratulations! 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
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory