History is filled with companies, brands and other institutions that have been associated with a certain color. Italian car manufacturer for example is closely associated to the color rosso corsa, a unique shade of red that began as Italy’s racing color. By that same token, Coca-cola has also been forever associated with the color red and white and confectionery maker Cadbury has the exclusive rights for that shade of purple named, appropriately, as Cadbury purple.
Armed with the above knowledge, picking a color to use in your website should be done with careful consideration. Usability concerns and general attractiveness should obviously take priority but you should also take into account the use of color for branding purposes. Monochromatic design, the practice of using only variations of one color is one trend in web development and design that aims to satisfy all the above requirements.
A less colorful world
Choosing the right combination of colors is an incredibly arduous process. While technically there are only 3 or 4 primary colors in the world (red-green-blue or cyan-magenta-yellow-black), there can literally be millions of composite colors that can be derived by combining any of the primary colors. Finding the perfect combination from that embarrassment of riches can be difficult, which is why going the monochromatic route might be preferable.
Now, even though the term monochromatic infer that we’re solely going to use one shade of color in every facet of the website, for practical reasons the use of a single color palette is used by choosing one base color, typically one of the 12 colors featured in the standard color wheel along with the variations of that base color. These variations are obtained by darkening the base color with black, dulling that color with gray or by lightening that color with white.
The tricky part is when trying to use this approach if your website is going to feature a lot of photography. Obviously, limiting your images to only feature colors that you’ve picked for your website is going to be close to impossible but you could remedy this issue by simply adding a color overlay to the photo you’re using. This method is more effective when used on grayscale images however so you might have to tone down overly loud images first before applying the color overlay.
Colin Chapman, the founder of Lotus Cars that was a dominant force in Formula 1 back in the 60s and 70s designed his cars around one simple philosophy, simplify, then add lightness. You can find that same philosophy manifested today in brands such as Ikea and Muji and the whole concept of minimalism. Monochromatic web design builds around that same concept of simplification as well and streamlining the choice of colors to just one palette does a lot of wonders to your website development process, which will be outlined further.
Monochromatic design helps make some sense of a busy layout
When a particular section involves a lot of elements or when you’re presenting a lot of data such as when we’re talking about an infographic, monochromatic design can help keep things grounded. While it’s true that you want each data to be legible with the use of contrasting colors, too many clashing colors might overwhelm the viewers. Using two contrasting shades of a single or color or pairing them up with white and/or black could solve that problem without making your website look like a box of donuts.
To help illustrate a sense of progression in your website
Bear with me on this, but I’m going to use a pretty weird analogy to help explain this one. In the world of Pokémon, there’s this concept of evolution, where some creatures are capable of transforming into a better, bigger version of themselves. In most cases, the evolution is natural, like the Pokémon Bulbasaur having the bulb on its back blossoming into an actual flower when it evolves into Ivysaur and then into Venusaur. In certain cases however, like the carp Magikarp evolving into the dragon-like Gyarados, they make absolutely no sense. They don’t even have the same color, going from red to blue.
You see, if a certain section of your website has this element of progression, such as when outlining different premium pricing plans or when presenting the chronological history of an entity, you could use progressively darker or lighter shades of the same color to illustrate this progression. Monochromatic design isn’t just effective aesthetically; it can also be used functionally in clever visual cues such as this.
To create divisions between sections while still maintaining consistency
Still related to the point above, you can also use differing shades of the same color as an invisible wall to divide sections within your websites. Instead of using progressively darker shades as a sign of progression, you could also use the same technique as a visual cue for hierarchy to show both the division and relationship between sections. Think of this as color-coding done intelligently, using progressively darker or lighter shades as you move further down or up the hierarchy.
Additional thoughts
As an added note, it might be a good idea from time to time to not always stick to the rules in monochromatic design. For example, even though Facebook’s interface is mostly blue and white, they also selectively use green to highlight important action buttons. You don’t always have to be rigid when it comes to monochromatic design, if there’s an opportunity where you can bend the rules a little bit, don’t hesitate to do so on your discretion.