Communicate with colors!  Colors can soothe, energize, uplift or attract the user. They can convey style, glamor or excitement.

Analogous color palettes in web design analogous color palettes in web design

This is the second article in our series on color palettes in web design.  The first was on monochromatic color themes, which use all the shades, tints and tones of a single hue. This article will focus on analogous color palettes that use two or three colors close to each other on the color wheel, including shades and tints of those colors. Analogous color palettes typically use one color as the dominant color while the others are used to enhance the scheme. However, there are variations on this scheme – for instance when a powerful background color like black is used.  Analogous color schemes also provide richer nuances than monochromatic color schemes.

Mediken – Medical & Clinic Service WordPress Theme

Green and blue expresses growth, nurturing, adaptability, cheerfulness, energy, wisdom and reliability – excellent qualities for a medical website.

Mediken - Medical & Clinic Service WordPress Theme

Oncherity – Charity, Donation, Nonprofit Elementor WordPress Theme

The colors blend together harmoniously to give a message of hope and cheer. red is love, yellow tells of happiness, hope and creativity.

Oncherity - Charity, Donation, Nonprofit Elementor WordPress Theme

 Template 50457 – Modern Church Responsive WordPress Theme  

Yellow, mustard and shades of green with neutral grey make a calming, uplifting combination in this website template for a church.  The main homepage images have hover effects and the photos in circles enlarge on click.  A shaded green banner highlights verses from the Bible.   News and events in the church are presented in image, slideshow, gallery, audio and video formats and can be viewed by category.  The blog enables the church to engage with its people and tell others about their ministry.

Christian Responsive WordPress Theme

Analogous Colors Using Overlays 

Template 51129 – Travel Insurance Responsive WordPress Theme 

A lively picture of a girl on a beach is the central image for this travel insurance company. Orange is the predominant color and different kinds of insurance are highlighted in color blocks in muted shades of mustard, orange and green  presented in semi-transparent overlays  that allow the image to show through.  White rollovers on each text block draw the reader’s attention to “read more” and lead into the site. Icons in white stand out on orange and call attention to more benefits offered by the travel insurance company. Banners  in orange and mustard with rollovers reveal more information. The menu with  red drop-downs and rollovers in white allows easy navigation
along with the  footer with useful links.  The gallery can be viewed by category and content  can be uploaded in image, slideshow, gallery, video and audio formats.  Travel tips, testimonials, FAQs can be presented in the blog.


Template 51129 - Travel Insurance Responsive WordPress Theme 

Template 51120 – Tea Store Responsive Magento Theme

This template in green and yellow makes a pleasant and soothing combination, with the header graphics evoking the golden yellow of the
tea brew and the brown of the tea leaves, and the green template elements echoing the green tea plantation background. Photo overlays judiciously applied in black and brown provide a rich and compelling look to the images while allowing text to stand out in the banners and slider. You can also use a different slider plugin to create this effect.

Green drop-down menu and shopping cart buttons take a customer around the site and help her make buying decisions.  The yellow buttons provide more details about the featured  tea  and clicking it leads to a product page with product images with image zoom, price, shopping cart, product reviews, opportunities to compare products or participate in polls. Account, login, checkout, language, currency and language options are prominent at the top.

Template 51120 - Tea Store Responsive Magento Theme

Color is a fascinating topic and there’s more coming up in our series on color palettes in web design.

Color Design Resources:



Pinterest