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

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 the styles.css file, 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.

Folder Icon

Sign up to start coding

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

Already have an account?