The 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 elements within the design may feel similar, you can help eliminate the monotonous feeling with high contrast. This means when you are selecting a monochromatic color scheme, it’s important to select a much lighter and much darker shade of the main color.
These monochromatic color schemes are beneficial in that they provide an organized impression when applied to your designs. The use of a single color can provide an immediate sense of harmony.
Monochromatic schemes can also consist of black and white, with varying shades of gray, as you see in our current site. However, let’s enhance it by selecting a different base color and applying a monochromatic color scheme to our website!
Instructions
Notice the insufficient contrast around the gray links and buttons. Because this gray is a medium tint, neither white or black shows up on top of it with enough contrast.
Let’s change it to a nice, dark navy blue!
In styles.css, change the color of the <a> tag to #0D1C32.
This will change the “About” link (at the top of the page) and the links in the footer to a dark navy blue (you might need to scroll to notice these changes).
Let’s make the same change to the buttons on the site.
Change the background color of the .button-primary class to the same dark navy blue (#0D1C32).
Let’s update the background color of the .footer to follow our blue monochromatic color scheme.
Because there are dark navy blue links within the footer, let’s use a light periwinkle blue. Use the hex code#ECF3FF.
The main buttons on this site are prompting the user to download the application. But there’s a second type of button, which prompts the user to subscribe. We should use a different shade of blue to differentiate this button from the others.
Change the background color of the .button-secondary class to #627FB0, which is a slate blue.
Let’s use this slate blue as an accent color elsewhere. The “page hero” is a design term that refers to the banner (image, often paired with text and a background) that is placed front and center on the page.
Change the background color within the .page-hero-header class to use the slate blue (#627FB0).
Make the background color of the .main-content-benefits class #F5F9FF. This will be the lightest shade of blue that we use, which will improve the legibility of the text in front of it.
The text in front of that very light blue can be the dark navy color that we use elsewhere on the site. Notice that we are re-using the same shades of blue in different elements, to create harmony, while still ensuring contrast.
Update the color of the .main-content-benefits h2 to #0D1C32.
Update the background color of the .main-content-cta section to the same color (#0D1C32). This is the background color that surrounds the call-to-action for the user to subscribe.
It’s often helpful to give distinct sections of content their own background color, to create visual groupings that convey how information is grouped.
Change the .main-content-info class background color to #627FB0.