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.
This beautifully designed template for an online store maroon-pink-white
makes a candy pink statement with pink ribbons for the menu, panels
and prices, pink stitches, white italic text and images of mostly pink candy
on the image slider. The customer finds it very easy to shop by price,
compare products, take an online poll, search, navigate and buy products.
Featured products on the homepage lead to details, prices, shopping cart
and product slideshows with image zoom.
Green and mustard with grey express growth, nurturing, adaptability,
cheerfulness, energy, wisdom and reliability – excellent qualities for a
tutoring website. The homepage text slider enables you to place specific
messages that speak to tutors and students. Links below the slider lead
into the site for more details. A gallery attractively presents information for
students in image, gallery, slideshow, video and audio formats. A blog
presents resources for students and parents. The footer in grey highlights
locations and classes.
In this website for an adoption agency the colors blend together
harmoniously to give a message of hope and cheer to parents who
long to love and nurture a child in their home, and to birth mothers/ parents considering abortion or looking for an adoptive home. Green spells growth,
red is love, yellow tells of happiness, hope, creativity, joy and fun, pink
shows affection, calmness and innocence. Uplifting stories, useful articles,
tips and news can be shared in the gallery and blog.
Purple looks sensual, elegant and magical. In this template purple makes
a style statement in the header, footer and captions with a light fuchsia hue
in the treatment of the images and a deep fuchsia for the background color of
the body text. Bold fonts and capitals in white fonts provide variation.
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
The yellow header catches the eye instantly along with the contrasting
red and orange menu drop-downs. Orange hovers invite the user to click
the images of the variety of pastas and ravioli available while orange
buttons below lead to the gallery with orange hovers, with media tent in
image, slideshow, gallery, video and audio formats. Neat grey icons
expand on hover on the homepage and text leads into the blog with
comment forms. The orange footer has images with circles that change
to squares on hover.
Purple and blue (the colors of royalty) work well together in this template
with a ribbon menu, awning border in the footer and a textured background
with a ripple effect. This template uses circular design elements consistently
all through the site – in the logo, the slider, the homepage, the blog and the
gallery. Circles bring featured holiday destinations into focus and when clicked
they lead into detailed information about the place and its attractions. The
content slider has changing images of holiday destinations, with descriptive
text and pricing. These design elements work together to create a pleasant,
outdoorsy holiday feel. The gallery in image, slideshow, gallery, audio and
video formats can be viewed by category. The blog has travel articles with
comment forms that engage the site visitor.
This template presents minimalism in web design with colors and circle
shapes forming the menu on white. Semi-circles in color create curiosity
in the mind of the user. Images appear in the circles on hover, with an option
for a matching dropdown sub-menu. On clicking the images, pages zoom
into the screen with large script headlines and page content in small neat
capitals. Circular gallery images enlarge on click and can be viewed as a
Black makes colors look richer while providing a sophisticated, formal appearance.
In this template, black is balanced by white with a tinge of color, on which black
text stands out. The homepage slider has animated text and images on black with
a color strip prompting the user to Read More. Slider text is presented in elegant
grey capitals. The menu is on color blocks in shades of green and orange with black. Content is presented on white with color images. Logos in the footer are visible on
hover. The text slider continues through the site with the menu below. Projects
are depicted in a gallery with captions, leading to more content.
Muted red and orange contrast with grey and black in this charity website
where the colors bring an invigorating look into a world that appears dull
and cheerless. Real-life situations are highlighted along with practical ways
to help. Services are presented in a gallery and the blog engages users
with news, case studies and events.
Soft Analogous Colors
The traditional colors of pink and blue for baby girls and boys are used
in this website design, in soft tints on white. The background illustration
is mostly in blue with touches of pink, and the menu and fonts in blue for
readability, with pink for rollovers. Pink buttons with blue buttons reverse
this trend. Banners in blue and pink with stitches on the borders take you
into specific girls’ and boys’ sections and neutral sections. Product pages
have details on the product, image zoom, community polls and reviews.
Navigation and buying is easy with all login, checkout and account
information on top and useful links in the footer.
Muted Analogous Colors
Muted green, yellow and red color blocks with hovers highlight product
categories and prompt ‘shop-now’ action in this Print Store Responsive
Magento Theme. The slider in dark grey and other colors and product
background in light grey help the products to stand out while providing
contrast. Buttons in grey turn red on rollover. Neat fonts in grey capitals
present a sophisticated look in the drop-down menu, product text and
footer. Product pages have details on the product, image zoom,
community polls and reviews. Navigation and buying is easy with
all login, checkout and account information on top and useful links
in the footer.
Analogous Colors Using Overlays
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.
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. 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.
Color is a fascinating topic and there’s more coming up in our series
on color palettes in web design.