Learn
Color Theory

Complementary Designs

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.

Image of the color wheel

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.

Lakers uniform showing contrast between purple and yellow

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.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.