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.

Image of the color wheel selecting analogous colors: blue, light blue, and green

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!



In styles.css, update the .button-primary background color to #60B3BD.


Update the .main-content-benefits h2 text color to #65A3C7.


Update the background color of the .main-content-cta to #65A3C7.

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?