Communicate with colors! Colors can soothe, energize, uplift or attract the user. They can convey style, glamor or excitement. After a brief look at color theory, we will show how monochromatic color palettes can be remarkably effective in web design, as they can communicate a single thought, emotion or feeling, and also use white, grey, neutral colors such as beige and black to balance their designs.
The color wheel – your basic design tool
Sir Isaac Newton developed the first circular diagram of colors in 1666. Since then, scientists and artists have developed many variations of this very useful tool – the color wheel of 12 colors. The web uses an RGB (red, green, blue) color model which is an additive color model because the web is a medium that lights up, rather than an RYB – red, yellow, blue (artistic) color model which is a subtractive color model. The three secondary colors are made by mixing the three primary colors. Mixing the primary and secondary colors gives us six more tertiary colors. Besides the basic color wheel, digital tools like Adobe Kuler, Colors on the Web, and ColoRotate among others can help you explore hundreds of themes.
Hue, Saturation, Brightness
Hue is the technical term for what we call color. Saturation is the intensity of a color – when you desaturate a color it comes closer to grey. Colors with lower saturation are more muted and dreamy – those with higher saturation are more playful and high-energy in feeling. Brightness is how close a color comes to white.
On the web, colors are expressed in their hexadecimal or hex values. Web-safe colors are the standard on the web today and ensure that colors look the same on all monitors, browsers and computer systems.
What are tints, tones and shades?
Adding white to a color gives you a tint of that color. Adding black to a color gives you a shade of that color. Adding grey to that color gives you a tone.
Color harmony delivers visual interest and a sense of order. It is a balance between the blandness of under-stimulation and the visual overwhelm that results from overdoing it with too much contrast and jarring colors. Harmony is a dynamic equilibrium.
Color palettes (combinations of colors) develop from color harmonies. Understanding how to use them effectively will go a great way to enhancing your website design. Here are some of the popular color palettes traditionally used in design:
Monochromatic colors are all the colors (tints, tones, and shades) of a single hue. Although this color palette looks balanced and visually appealing, it may lack contrast. This can be achieved by using tints and shades of the color to enhance the theme. Shades of a single color convey a psychological or emotional message, while the accent color draws attention to important page elements.
Analogous palettes use colors that are close to each other on the color wheel. This communicates consistency while variations of the dominant shade are used to create richer nuances than the monochromatic color scheme.
Complementary colors are on opposite sides of each other on the color wheel, for example red and green, blue and orange, yellow and purple. This color scheme at its
most basic is just two colors and the contrast can appear harsh, but can be softened
with tints of the hue or by leaving white space between the two colors.
Split-complementary color scheme adds on two more colors neighbouring the complement of the base color – yellow with red-violet and blue-violet, for example. This scheme also offers the visual contrast of complementary colors without the intensity.
Triads are any three colors equally spaced around the color wheel. They offer contrast while retaining balance and harmony. Using one color in larger amounts than the others places the visual accent on that color and draws the eye to important elements. The pure hues have similar saturation levels and can become overwhelming. Using tints, tones and shades of the pure hues can help you create a more sophisticated design.
Tetradic color schemes using four colors arranged into two complementary pairs are generally more challenging to work with, but offer richer variety. Let one color be dominant and see that there is a balance between warm and cool colors in your design.
Adding neutrals like black, white, brown, tan and off-white adds balance to the design and softens jarring elements. Although white or black go well with any color scheme, think of using a very light grey or dark grey to add more visual interest than white or black.
Let’s take a look at some examples of website templates that use monochromatic color palettes. Teamed with white, grey, beige or black, they produce a single-minded focus on a thought, emotion or feeling, keep things simple and stay clear of clutter.
Shades and tints of red make subtle differences in the text panels
in this website template for an insurance company and draw the attention
of different target audiences from families to agents and brokers. The
template is divided into sections to neatly present information – from the slider
with large text and changing images, to different kinds of insurance services
in gallery format, to customer testimonials. The grey background makes
body text highly readable and a blog connects with different audiences.
Shades of blue with white speak of integrity, trust and efficiency in
this template for a civil bank. Notice the large elegant condensed fonts
in the header and numbering. The menu, login and footer are in shades
of blue and the header banner has a shaded blue background. Body
text is on white and grey for easy readability with the footer in blue.
Services are presented in a gallery viewable by category and the blog
engages the user with useful content.
This template uses golden-orange in the logo, header and menu to
communicate vitality, optimism and self-control. A blog and gallery in
different media post formats helps the company communicate with
different target audiences with useful content.
Graphic circles in the header in shades of green change color while
text changes in the slider. Text turns green on hover. Projects are
shown in the gallery and more details and news are featured in a blog.
Red is stimulating, attention-getting and motivating. In this template the
homepage has many design elements woven together to present an attractive
design for a restaurant – the logo in script font with cutlery graphics; red boxes
with serrated edges present the slider and contacts; an image slideshow with
grid animation behind the red slider box; red graphics and grey dotted lines on
a white background bordered with textured grey; transparent red overlays
appearing on hover over food displays; people in circles that enlarge on click
while testimonials change below.
Shaded green in the homepage forms a background for fresh agri-produce
in an image slider with grid animation. Inside pages have images with
green borders that turn a darker green on hover. The green theme is
continued for buttons, menu and link text. Pages have dark green content
on a white background. Black headlines provide contrast and better
readability. Agricultural products are shown on a light green background
in a gallery viewable by category. FAQs are presented in an informative
This is a beautiful minimal design gallery template with a shaded purple
menu with pink and white fonts, suitable for showcasing a portfolio for a
model agency or an art and photography website. Images zoom into
full screen view on clicking the thumbnails in circles.
Scallops and stitches evoke the feel of table-linen and make an
appropriate design element for a product that will end up on your
table – olive oil. Photographs in green on the slider have large white text
on a transparent overlay and buttons that turn green on hover. The
header and menu drop-downs in different shades of green provide
balance and contrast. The site is divided into sections of a very light
textured grey with scallops and photographs. More photographs below
with tinted overlays continue the green theme in a more muted way
while allowing messages to stand out in white.
This template in blue and grey has a slider with changing graphics
and text playing on the word “PRO” to give the image of a progressive,
modern company. The gallery can be viewed by category and the
blog provides a platform to engage with the customer with constructive
The header and menu are designed in shades of blue with the blue logo
on a white circle. A central image of water polo accessories in a water
splash with a cool blue overlay highlights the changing messages in white
in the slider. Below the slider, a grey banner welcomes members to the
water polo club. Blue icons and text highlight important content. Images of
members are shown in an image carousel in the gallery.
This template has a distinctive look with its photo overlay header and text slider,
orange drop-down menu, white circles with orange icons drawing attention to
services, content blocks in shades of orange and text background in shades of
white. Services are presented in a gallery with options to upload content in image, slideshow, gallery, audio and video format. The blog features useful content that
This template for an insurance company in shades of orange has a warm,
reassuring look. Balanced with white, black and grey, it makes a pleasing
combination. The icons in white draw attention to the types of insurance
offered by the company and the icon boxes change to a lighter orange and
animate on hover. The fonts in orange and black spell out “clear and simple”
insurance and “Get a quote” buttons turn orange and invite action. An orange
banner turns grey on hover attracting attention to Business Insurance, and
content is laid out in easily readable numbered columns. Services are
presented in a gallery where content can be uploaded in image, gallery,
slideshow, audio and video formats. Images have orange borders
and can be viewed by category. Useful content can be provided via the blog.
Orange is a stimulating color and attracts attention but is not as aggressive
as red. Orange and grey banners turn different shades on hover in this
Tools Store Responsive PrestaShop Theme leading into different product
categories. The image slider animation with changing promotional content
showcases popular tools in action and highlights special offers. Tool categories
with orange rollovers are neatly placed on the left menu. Featured products lead to
pages with image zoom, image carousels, product descriptions, stock availability,
pricing, shopping cart, social sharing icons and related products. The template has
options for 5 languages and 2 currencies and has a sitemap for ease of navigation.
Search bar, shopping cart, account and login buttons are placed prominently
at the top.
Now let’s take a look at some web templates using red with black,
grey and white. Red draws attention and both black and white contrast
with red. Black makes red look darker and white makes it look lighter.
This minimal web design in red, black and beige is striking and effective for
an interior design company showcasing its work. Get your customer seated
on the smart couch portrayed and walk him through your company – your
staff, your services, your advantages. Drop-down menus in red and black
with stylish arrows on left appear to “talk” to the customer blurb-style and
invite a look through the site. Pages slide in on black transparent overlays
with white and grey text. The portfolio is stylishly presented in three formats
with grey borders that turn white on image zoom. News is presented in a blog.
This template with its black header and grey menu highlights the images of
software in the slider. Red text boxes with white text and black rollovers
attract attention. They lead to pages with product descriptions, slideshows,
pricing, reviews, availability, shopping cart and social icons. Banners and
buttons in red draw the eye and invite action. The product menu in light grey
has red rollovers to invite user engagement.
The red menu, black transparent drop-downs and black header create
a background for a display of beautiful lighting products for the home, as
shown in the image slider with elegant fonts. Four banners in grey with
hover effects showcase interior lighting while a black banner shows exterior
lighting. Shop Now buttons in red lead to pages with product descriptions,
product images with zoom, reviews, prices and shopping cart. The footer
with a background image showing warm lighting , shows article excepts that
lead to blog posts. The template has a portfolio and a blog to neatly present
products and useful information to customers.
This flat web design in toned-down red, black and white with a tinge
of color is easy on the eyes and lets your electronic products stand out.
Menu animations and hover effects on featured products lead the user
through the site and into Quick Views of products with slideshows,
descriptions, pricing, special offers, availability and social sharing icons.
The Catalog on the left can be viewed by stock availability, by product
condition, by manufacturer, by price, by top sellers. The template has
a footer with important links with sitemap, contact, search, shopping cart,
account, language and currency options placed on the top.
Look out for more articles on color palettes in web design. The next in
our series will be analogous color palettes.