Monochromatic and grayscale color schemes are not new in web design, but they are still around, and still being used to great effect. It is not unusual to find minimal grayscale web designs these days, and for the purposes of this article I have not included many using that color scheme in this article.
It is often a brave move to use one predominant color in a design, and this can work very well or completely miss the mark! Here we have selected some site designs that use a main color throughout the site effectively.
Web Design Using a Monochromatic Color Scheme
Verde
With such a name, it is no surprise that the landing page is green. If you stay on the landing page, the background and the name change shades, but remain green. The interesting thing about this site is that as you scroll down, the rest of the site is grayscale – unexpected, but clean and beautiful.
Toomas Tartes
This freelance designer uses a turquoise color throughout his site. There is also a touch of parallax scrolling, and the site is quite minimal in design.
Flavinsky
This is the portfolio of French digital art director Flavien Guilbaud. The whole site is presented in a grayscale color scheme, and each page you visit has a different large number (06 on the home page) – I didn’t quite get what the numbers represent… but perhaps someone will be able to tell me!
Jacob Grubbe
Large white type on a bold blue background… but when you land on this site there is nothing other than a pink flashing cursor and the words ‘Start typing’ – and you have to to get this page to do anything – it doesn’t matter what you type, but you have to keep typing if you want to see Grubbe’s full bio. A few words are linked using the cursor-pink color – a good site to waste a little time on!
Netlife Research
This Norwegian agency use a green color scheme with some noise added for texture. The whole site uses this same background color.
Cirq
This Californian winemaker uses black and white images with a grungy red text throughout the site.
War Child
This UK based charity aims to provide help for children in conflict-affected countries. They have used the same red and black color scheme for some years, although the site design has changed.
Blank
This art direction and graphic design site uses a pink overlay on all its elements that are presented in a grid-style layout. Many of the images are constantly changing.
The Nikola Tesla Institutes of Medicine USA
This is the site of the Costa Rican branch of the Nikola Tesla Institutes of Medicine. They use shades of purple and blue throughout the site – it is a slight step away from the usual blue for health sites.
Paralotna
This site uses a very bright and bold yellow as the main color scheme for its site design.
Imavex
This digital design and marketing agency uses shades of orange throughout their site, another example of a bold color in web design.
Cam O’Connell
Perhaps the inclusion of this site is pushing the point of monochromatic design a little – the landing page is a pinky red color, and every page is a different, but monochromatic color.
ID Neon
This Swiss site uses a slideshow of black and white images on the landing page with large orange type for the text. As you scroll down the page, the same orange is used throughout, and the background is black. There are also some cool scrolling effects.
Crossroads Alliance
Similar to the previous example, this site uses orange on a black background, but they also use a black texture in places to add a little interest to the design.
Theme Squad
This site uses a paper texture in a pale green color throughout the site. They use a typewriter-style grungy font, making the site seem quite retro in design.
HAG
This model-making company use a red transparency on a mountainous background image, and further down the page, they use hexagonal links to their products that also use the same background, as well as a location pin. The other images on the page are black and white, and the text is in shades of gray and same red color used on the hero area image.
Studio Stylistik
This Canadian dance studio uses a black background with a halftone transparency, and touches of blue throughout the site. The end result is a very stylish site to suit their name.
Nutone
This site uses a solid pink color on its landing page with large typographic links to 3 categories on their site. As you scroll down the page it is mainly grayscale with subtle touches of the same pink color.
3Coasts
This site is mainly white on green – quite a few different shades of green. Except one section that is black on white with a host of programming labels with green backgrounds.
Mass Effect
This is the only other grayscale site design featured in this round-up. Mass Effect have a very minimal design, very light colors, the hero area image is set on a gray background, and the headline text throughout the page is black, but in a very thin font. The content text is quite a pale gray.
Humblebee
This one is just for fun! The site is a URL shortening service, and is topically on a bright green background with a stylized bee at the bottom of the page.
Conclusion
Although monochromatic site design is not really trending right now, such designs still pop up from time to time, and the brighter the color, the more unique and attention grabbing it is – for good reasons or bad!
Have you designed a monochromatic site? Do you love the style or hate it with a passion? Please share your links and opinions with us in the section below.