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.

Image of the color wheel selecting triadic colors: dark blue, orange, and light green

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!



In the styles.css file, change the background color of the .button-primary and .button-secondary classes to #92AE4A.


Update the text color of the .main-content-benefits h2 class to #BD6152.


Next, change the background color of the .main-content-cta section to same as the color above.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?