Using a Monochromatic Color Scheme

- by Jim Jones

Introduction to Monochromatic Color Schemes:

The meaning of the word ‘monochromatic’ comes from the two words, mono (meaning ‘one’) and chromatic (meaning relating to color or colors). Put the terms together and you get ‘one color.’ A monochromatic color scheme derives from a single color adjusted by different shades and tints.

A monochromatic color palette for the color green with a HEX value of #638F3F can look like this:

Creating a Monochromatic Color Scheme

There are many ways to put together a monochromatic color scheme for your website. First thing to remember when putting together a color scheme is the rule of contrast. The rule is use at least one dark color, one medium/dark color, one medium color, one medium/light color, and one light color.

Next choose your color. In this case we will use a blue with a HEX value #003296.

The easiest way to create a monochromatic color scheme is to use the color with different tones of gray or brown.

You can also base it on the different values of the same color.

An Example of a Monochromatic Website

For my example I used Thermal Paper Rolls, POS Paper & Credit Card Paper. Notice at first glance that does not appear to be a monochrome website. A huge Save 5% green ball sticks out that like sore thumb against the otherwise all blue & white website. However, using Red Alt’s I Like Your Colors online tool ( I am able to analyze exactly what colors where coded in the CSS. The results turned out that only white, gray, light blue and blue were coded for this site. Notice how a single color site accentuates the colors of images. The green off the calculator and green ball jump off the page.

The color scheme for looks like this:

Advantages to monochromatic color schemes

The main advantage to using a monochromatic color schemes is ease of use. It is easy to create the palette because you don’t have to worry about color combinations clashing. There are less HEX codes to look up. The designer can easily pin point the different values of each swatch, which makes it easier to determine contrast and readability. Another advantage is that the simplicity of the website allows images and content to stand out. The final result is a clean, legible website. The single color will set the mood of the site, so choose your color wisely!


Monochrome websites are not the most popular color schemes among web designers. Truth be told, it can be boring to only use one color. However there is always the debate on attractive design versus functionality. Most of the time a website needs to be easy to navigate, look at, and read. Getting too far down the rabbit hole of creative design may cause your website to miss this target. I find monochromatic colors schemes are most helpful for photography sites, some online stores selling a lot of product, and any other site that either features images or a lot of content.

Works Cited

Chapman, Cameron. “Color Theory for Designer, Part 3: Creating Your Own Color Palettes – Smashing Magazine.” Smashing Magazine. N.p., n.d. Web. 30 May 2011. <>.

“I Like Your Colors – Red Alt.” Home Page – Red Alt. N.p., n.d. Web. 30 May 2011. <>.

“Thermal Paper Rolls, POS Paper & Credit Card Paper @” Thermal Paper Rolls, POS Paper & Credit Card Paper @ N.p., n.d. Web. 30 May 2011. <>.

This entry was posted in Design. Bookmark the permalink.

Leave a Reply