Twitter Facebook RSS Logo Logo

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.

Analogous Color Palettes in Web Design

Template 48005 – Sweets Candy Responsive Magento Theme

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.

Template 48005 - Sweets Candy Responsive Magento Theme

Template 45716 – Tutoring Private Responsive WordPress Theme 

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.

Template 45716 - Tutoring Private Responsive WordPress Theme

 Template 51008 – Adoption Organization Responsive Joomla Template

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.

Template 51008 - Adoption Organization Responsive Joomla Template

Template 41894 – Fashion Style Responsive WordPress Theme 

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.

Template 41894 - Fashion Style Responsive 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.

Template 50457 - Modern Church Responsive WordPress Theme

Template 50738 – Food & Restaurant Responsive WordPress Theme 

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.

Template 50738 - Food & Restaurant Responsive WordPress Theme


Template 41896 – Outdoorsy Travel WordPress Theme 

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.

Template 41896 - Outdoorsy Travel WordPress Theme
Minimalism and Analogous Colors

Template 49538 – Hotel Flash CMS Template 

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
slideshow.

Template 49538 – Modern Hotel Flash CMS Template
Analogous Colors on Black Background

Black makes colors look richer while providing a sophisticated, formal appearance.

Template 35840 – Business Joomla Template with Slider Animation and Gallery

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.

Template 35840 - Business Joomla Template with Slider and Gallery

 

Template 41359 – Charity Circle WordPress Theme

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.

Template 41359 - Charity Circle WordPress Theme

Soft Analogous Colors

 Template 41811 – Infant Baby Responsive Magento Theme

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.

Template 41811 - Infant Baby Responsive Magento Theme

Muted  Analogous Colors

Template 49292 – Print Store Responsive Magento Theme 

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.

Template 49292 - Print Store Responsive Magento 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.  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.

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner