How to Design with a Monochromatic Color Scheme
Working with colors can be scary. For me, it helped to understand the different types of color schemes out there. The more I understand about colors the easier it is for me to work with them, naturally. One common color scheme that is not the most talked about is a monochromatic color palette.
I’ve written this blog post to explain how you can work with a monochromatic palette or scheme. I’ve made sure to include plenty of examples to show and not just tell. When talking about colors and how to use them, it’s important to have something to look at as well. Let’s get started by talking first about what exactly is a monochromatic color scheme.
What is a monochromatic color scheme?
A monochromatic scheme, or palette, starts with a single hue. Any additional colors used in the palette are variations of that specific hue either its shades, tints or tones. The idea here is that there is only one color for example just a blue or just a pink. It’s not a combination of various colors or hues. The idea of monochromatic color dates back to painters and other types of artists. But today, it’s a relevant term for both web and graphic designer.
It’s becoming a more popular design option as it provides a more cohesive look for design. A well executed monochromatic color scheme can be a creative way to express a brand. It can bring good attention when done well. You shouldn’t worry about a monochromatic scheme being boring or limiting.
You’re welcome to use any shade or tint of the color/hue to create something invigorating instead of a literally a single color. Using a white and a black is okay in monochromatic color schemes as they themselves are not colors. They help you achieve the various tones and shades anyways.
The landing page for Facebook’s Messenger is a fantastic first example. The design of this website and its various UI elements are monochromatic in the iconic Messenger blue. As far as web design goes, there aren’t many true monochromatic examples.
Even if a website only uses an orange color and its variations it will also include shades of grey as well. And this is already including white and black which most people see as separate colors. Although this is the case usually for text colors. That’s okay. The buttons and links are blue, while the inputs use a lighter grey for text and border color. That’s completely acceptable.
Another example is that of a landing page for DigitalOcean. The home page features a bright blue as its main color with a few different variations in the graphics throughout the page.
The inputs, the buttons and even the links are all colored blue. Some of the text in the graphics are blue too. If there was ever a monochromatic website example, it’s this one.
How to choose the right palette?
There are a few steps you need to make to even begin working in monochrome. First, decide on the brand colors. Let those guide be the decision making process for you. It’s silly to just pick a color on a whim to use in your designs whether the palate is monochromatic or not. If you’re in charge of a redesign including colors then again pick what is right for the product and its brand. Most brands have just that one specific hue that’s tied to the logo and identity of the business. It’s more often than not going to be the main focus color on the website as well. That’s the color to use.
When designing a whole website I’d urge you to decide if the whole thing needs to be in monochrome. Working with only a monochromatic palette can become frustrating. For instance, how can you make something stand out if everything is the same shade of red or green? Maybe all you need is just a single section to make it more interesting.
Another thing to note about the monochromatic palette is the amount of emphasis on the color itself. Let’s take SendGrid’s website for a minute. If you click through their site, you may not even notice that it’s monochromatic because the emphasis is subtle.
On the pricing page, there is very little blue except for some key pieces of information like links and a few buttons. The FAQ section and the footer are also blue and monochromatic. The design calls for a limited amount of color on this website. It just so happens to be the same blue color. Here the monochromatic color palette is not in the user’s face. It’s all up to you how intense you want to make it.
WeDo is another soft example of a monochromatic color scheme. The website has more shades of grey than it does of its blue color. Either way, you can call this design monochromatic. The web page is not overflowing with color at all. The blue is noticeable but it’s not over the top.
The same can be said about the different shades of grey too. WeDo is another example of how pleasant and simple a monochromatic website can look.
I have found another example of subtle color but much more monochromatic. Although not all of the lookback’s website is in true monochrome, we can still examine the homepage’s header. The background here is a light blue. The input has a blue border that’s also the color of the CTA button. Both the email capture and the iPhone have a slight blue shadow too.
The text is even a dark shade of blue actually. The icons below the email capture are a blue shade as well. This is the most monochromatic example yet even if the graphics in the iPhone are are other colors. Like I’ve been saying, there is always a color balance you can bring to a design whether it’s with a monochromatic color scheme or not.
Faux Monochrome Color Schemes
A big concern with using monochrome is that if everything is the same shade of a color, it’s hard to make something stand out. It can be a struggle I agree. That’s why you often see faux monochrome designs. Lookback’s home page isn’t just made up of the blue color there is also a pink button further down. This is without mentioning the graphics and photos.
I wouldn’t call those color schemes monochromatic if they use more than one color. But, there is nothing wrong with using a monochromatic color scheme as your starting point or incorporating it as a major element of the overall design. Let’s talk about three different examples of this approach to give you a better idea.
The first example is Simple. The website is mainly blue, white and grey. The colors are great, and the use of it is very interesting, at least on the home page. Sometimes the headings are blue, sometimes they are a dark grey. It’s fun that the design mixes it up.
One other thing the design mixes up are the colors. Sometimes there is a very light beige background pattern on a section. The pattern varies too, which is a constant theme of this design style. But the important thing is that the pattern is not blue, it’s beige. Although the majority of the home page is, in fact, monochromatic, the beige pattern breaks this color scheme.
The second example is a landing page for UXPin. Their landing page is very similar to the rest in this article. But they used full colored logos and photos. They also use a few different colors in their graphics like green, brown and yellow.
The landing page is mostly filled with black and blue throughout. I think the designers here wanted to keep the blue as the main color and keep the design monochromatic as far as they could take it. Again, that’s perfectly fine to do so and add the color variations as needed.
The last example here is the homepage of Vero. Most of the site is focused on this teal shade of blue. Most of the sections have a specific color scheme. The one included in the screenshot has a light blue background and a blue link color. Yet in the accompanying image, there is a small hint of yellow, green and purple.
This kind of color pattern is true in a lot of sections here. Even the hero section does it. It’s mostly blue until it needs another color. Vero’s website is a good example of starting with a monochromatic color scheme and adding onto it to better the overall design.
Do you like the way a monochromatic color scheme looks in web design? Would you now consider using it in your designs?