Twitter Facebook RSS Logo Logo

Purple and Blue Websites are In

Forbes says “Blue and purple are the new black” You can expect many tech products in the market to be blue and purple as these are the trending colors this year.

Purple and Blue Websites are In

But hey, purple isn’t even a real color, right?  Let’s look into that statement.

What is purple?

“In common English usage, purple is a range of hues of color occurring between red and blue. In color theorypurple colors are any colors on the line of purples on the CIE chromaticity diagram (or colors that can be derived from colors on the line of purples), i.e., any color between red and violet, not including either red or violet themselves.
The first recorded use of purple as a color name in English was in 975.”
Source: Wikipedia

Shades of purple

Since red is a warm color and blue is a cool color, the shades of purple derived from combining  the two are called red-purple, purple, and blue-purple.  Red-purples are warm shades of purple, purple is neutral, and blue purples are cool shades of purple. Source

How is purple different from violet?

Violet  is a ‘’real ‘’color that exists on the electromagnetic spectrum. It is visible at one end of the spectrum when sunlight is split using  a prism.  Purple on the other hand is a perceived color  that is a mixture of red and blue, the result of the human eyes and brain working together.  The color purple doesn’t really ‘’exist’’ as there is no wavelength of light we produce called purple. Read more from this great answer on Quora by Bowen Li

Associations with purple

Purple is associated with royalty, wealth, nobility, sophistication, romance and luxury and is used in used in heraldry and logos.  Exotic, spiritual, creative, imaginative, dignified are other associations. Since purple is a color you rarely see in nature, stronger shades of purple tend have an artificial feel to them, depending on how they are used in the design.   Purple has more of a feminine than a masculine association.  It is used in a variety of health, spirituality, fashion, beauty and lingerie product websites because purple calms and soothes more than any other color.

The 12-color wheel 

The 12-color wheel is a quick way to understand analogous and complementary colors. Colors close together on the color wheel are analogous colors, colors opposite each other on the color wheel are complementary colors.  And what is a split-complementary combination, you may ask?  That is when you  use a color along with colors adjacent or analogous to its complementary colors.  These colors make an effective statement without making too strong or jarring a contrast as a complementary color would.

220px-BYR_color_wheel.svg
12-color wheel.   Source: Wikimedia Commons

Purple in web design

As purple is a mix of red and blue, you’ll find shades of red, and pink too on purple and blue websites.  Purple can get overpowering at times, so pair it with white or black.Textures, accents, geometrics, color gradients or solid color can all be used to enhance the appeal of the color when it is used in design.

Purple with analogous colors

Analogous colors are close together on the color wheel, look good when used  together and your design is pleasant and harmonious. Purple, blue and green are analogous colors on the color wheel.

Template 55042 – Globex Business Responsive WordPress Theme with  Parallax, Lazy Load Effect, Slider, Blog, Portfolio

Lavender, blue and green work together to produce a soothing effect while promoting the business capabilities of this global company.   All business people want peace of mind while their businesses move like clockwork – efficiently going the extra mile to provide value.   This is what this responsive website template conveys with its choice of colors and graphics. The parallax slider with hero images focuses attention on the company’s services and strengths.  Content boxes in shades of color on a background of a clock, have lazy loading images that load on scroll. Blog snippets below lead into the blog. An image carousel beside the newsletter signup invites user interaction.  Services are presented in a gallery viewable by category.   The template has a geometric background that gives a dynamic look to the company. Shades of purple are used in the slider, content boxes, buttons and transparent panel below.


Template 55042 - Globex Business Responsive WordPress Theme with Slider, Carousel, Gallery and Blog
Template 58478 – Personal Loans Responsive Landing Page Template with Page Builder

 

Purple and blue inspire trust, prestige and loyalty in this Personal Loans
Responsive  Landing Page Template  with Page Builder that makes it easy to
customize layouts according to your needs.  Use of white space highlights text
and icons that draw user attention to services.  Circular design elements with
zoom effects highlight special offers in banner with a  call to action. Images in
the gallery can be enlarged and viewed as a slideshow., the photos show how
the user could spend  his personal loans.  Icons and text invite the user to calculate
his savings.  Rates and fees in circles with zoom effects catch the user’s eye
on a banner in shaded purple, followed by testimonies and a large banner inviting
the user to Apply Now! More calls to action follow with a contact form in black
with a blue button below, social media buttons and an address.

Template 58478 - Personal Loans Responsive Landing Page Template

Template 58491 – Event International Responsive Landing Page Template with Drag and Drop Page Builder

Template 58491-Event International Responsive Landing Page Template with Drag and Drop Page Builder

Purple and  green are cooling colors providing a harmonious balance, with white space
to highlight text, speakers, contact form and sponsor logos. This Event International Responsive Landing Page Template is perfect for a conference or public event. It provides registration, event details, dates, schedule downloads, videos, speakers, locations, reasons why the person should attend, and fields for customer email and subscription, price lists, registration forms, sponsor logos and contact details with Google map.  The solid green banner and button below provides energy in the action areas. Check out the drag and drop page builder layouts in the live demo. Unlimited page layouts at your fingertips to give added room for your creativity!

Purple with complementary colors

Template 54611 – Private Lawyers Responsive Drupal Template with Blog, Portfolio, Parallax, Lazy Load Effect, Slider

Shades of purple have a dignified and sophisticated look, with content boxes in
red-purple and split-complementary colors orange and yellow.  Black and white photographs in the slider and circular photographs below give the image of a law firm
that knows its business. The photograph of a handshake in a parallax banner in a light shade of brown provides a soft contrast to the purple header, leading into the red-purple footer with social media icons and map. Colored photographs in the content boxes and background banner provide contrast and symbolism.  Services are presented in a gallery viewed by category.  The blog has a professional look and scenarios to be discussed and questions to be answered.

Template 54611 - Private Lawyers Responsive Drupal Template with Blog, Portfolio, Parallax, Lazy Load Effect, Slider

Template 53220 – Travel Agency Responsive Moto CMS 3 Template 

Purple and yellow are complementary colors that catch the eye and lead into content boxes with text about the company.  Travel destinations are showcased, with geometric shapes in transparent overlays to add action to the design. The header slider with fanciful escapades into the unknown, whets the traveler’s taste for adventure.   The gallery with picture captions can be zoomed and viewed as a slideshow. News, destination-specific events and information regarding various places are presented in the blog. The footer is interesting with a cityscape providing a 3D look, superimposed with the company logo, address and social media icons.  This template is suitable for Travel Agency websites, Travel, Sports, and Outdoors websites.

Template 53220 - Travel Agency Moto CMS 3 Website Template

Template 58518 – Online Course Responsive Landing Page Template

Green is a split-complementary color to purple and provides contrast and
vitality in this Online Course Responsive Landing Page Template that invites
immediate responses and sign-ups. With colorful banners, informative
content boxes, icons, images FAQ and sign-up box, a choice of customizable
layouts and easy-to-edit software, this responsive landing page template will help
engage your customers and convert your leads into sales!


Template 58518 - Online Course Responsive Landing Page Template

Template 58248 – Handyman Services Responsive Landing Page Template with
Gallery and Carousel

Template 58248 - Handyman Services Responsive Landing Page Template

This template is designed in blue-purple, for which the complementary color
is orange. Purple with orange make a striking contrast along with white in this
Handyman Landing Page Template with  form, icons for services,  content
boxes to provide information, a zoomable gallery of images that can be watched
as a slideshow, that demonstrates  company’s specific services, the company’s emergency number big and bold on orange (you can’t miss it), testimonials from
satisfied customers, and a call to action, prompting the customer to make an
appointment.  This landing page template will convert leads to business!  A
Google map, company address, contact form with send button in orange, and
social media icons at the footer complete the template design.

Purple with analogous and complementary colors

Template 55045 – Marsy’s Cleaning Service Responsive WordPress Theme with
Gallery and Blog

Template 55045 – Marsy’s Cleaning Service Responsive WordPress Theme with Gallery and Blog

Purple co-ordinates superbly with  pink, yellow, blue, red, grey along with color gradients in backgrounds, transparent panels and effects to create the feel of a company that’s on the go to provide excellent services to its customers.  This template uses stunning colors, banners, a hero image in the header, colorful buttons with rollover effects and content boxes in striking colors with image backgrounds in its design.  A shaded background provides contrast to the products displayed below with content boxes superimposed to demonstrate different types of cleaning services provided. A parallax banner below and text with eye-catching color background emphasizes another service.  A snippet from the blog leads into the blog, with a banner by its side to inform the reader about more areas where the company offers its cleaning services.

Template 55276 – Top Star Model Agency Responsive Website Template

Images treated in color blocks draw attention to models in this Top Star Model Agency Responsive Website Template.  Notice how purple stands out in the header even though it is in a small image, used as an accent color among other colors in this already colorful website with white and grey.  It serves to spotlight a specific type of  model in this model agency template. Buttons and icons prompt user action. Parallax banners, content boxes, a photo gallery, a map, blog snippets leading to the blog, video integration and model profiles make a complete website template for a model agency on the go.

Template 55276 -Top Star Responsive Website Template with Parallax and Lazy Load Effect

Template 54735 – Handmade Candles Responsive WooCommerce Theme with Banners, Product Slideshow, Video, Blog and Gallery

Template 54735 - Handmade Candles Responsive WooCommerce Theme with Banners, Product Slideshow, Video, Blog and Gallery

This Handmade Candles Responsive WooCommerce Theme  captures attention
with its stunning photography, diffused soft-focus background images setting the mood.  Beautiful header banners with zoom effects showcase the candles, leading into pages with descriptions,product slideshow, price, shopping cart, product reviews,
social sharing icons, video and related products. A parallax banner below has lazy
loading images of products followed by featured products, each leading into product pages.  Another parallax banner presents a product video.  Featured articles lead
into the blog.  The footer has useful links and a sitemap. The gallery with zoom
effects can be viewed by category.  The blog layout showcases the products
impressively with content descriptions leading the reader to buy.

Purple as the primary color

Template 56094 – Fitness Club Responsive Website Template with Gallery and Blog

Purple dominates this design while a small amount of yellow makes a cheerful and attention-getting contrast in this Fitness Club Responsive Website Template that is optimized for smartphones, tablets and desktops.  The homepage with hero image in a parallax banner has lazy loading elements  on scroll. Dropdown menus in bold purple and black quickly take the user to different parts of the site. Icons lend interest to text in content boxes in solid c olors with subheads in white.  Text and image panels in white and a lighter shade of purple provide relief  to dark purple. The instructors are presented in circular frames.  Latest News leads into the blog.  Images in the photo gallery with zoom effects on hover, enlarge on click and can be viewed as a slideshow.  A newsletter sign-up and footer links complete the website.

Template 56094 - Fitness Club Responsive Website Template with Gallery and Blog

Template 54024 – Handmade Candles Store Responsive OpenCart Template
with Carousel, Slideshow, Parallax

Shades of purple with soft green and beige make a gentle combination in this
Handmade Candles Store Responsive OpenCart Template.  The template has
a header slider with a diffused photo background and the same image in
closeup in the foreground;   a banner with a sales message;  products leading
into pages with descriptions, slideshows, price and reviews, shopping cart
and related products in a carousel;  video presentation;  social media displays;
parallax banner with promotional messages and a map.

Template 54024 - Handmade Candles Responsive OpenCart Template

Template 56094 – Fitness Club Responsive Website Template with Gallery and Blog

Purple dominates and a small amount of yellow makes a cheerful and attention-getting contrast with purple in this Fitness Club Responsive Website Template that is optimized for smartphones, tablets and desktops.  The homepage with hero image in a parallax banner has lazy loading elements  on scroll. Dropdown menus in bold purple and black quickly take the user to different parts of the site. Icons lend interest to text in content boxes in solid c olors with subheads in white.  Text and image panels in white and a lighter shade of purple provide relief  to dark purple. The instructors are presented in circular frames.  Latest News leads into the blog.  Images in the photo gallery with zoom effects on hover, enlarge on click and can be viewed as a slideshow.  A newsletter sign-up and footer links complete the website.

Template 56094 - Fitness Club Responsive Website Template with Gallery and Blog

Template 58393 – Admin Panel Admin Template for Webmasters with
Bootstrap and Custom Designed Skins

This Bootstrap Admin Panel Admin Template for Webmasters comes with 5 custom-designed skins, besides the set of regular Bootstrap skins.  It is designed in shades of purple with graphics in electric blue, green and purple and highlights in orange.
It contains graphs, tables, maps, calendar, widgets, ghost buttons and icons,
crawler list, country list, browser list, social media, forms, UI elements and
documentation to make your work easy. If you’re managing several projects,
you can save time and effort by changing the color, size and position of elements
and widgets on the fly.

Template 58393 - Admin Panel AdminTemplate for Webmasters with Bootstrap and Custom Designed Skins

Template 55160 – Event Planner Responsive Drupal Template  with Full Screen Slider, Gallery and Blog

The red-purple in this site lends richness to the logo and content boxes.  The full screen slider showcases the  wedding and event planning services of the company. The template features content boxes and banners highlighting special services,  text on transparent panels, ghost buttons. Statistics that change on scroll are presented in colored circles in theme colors that co-ordinate with purple. News and events lead into the blog. Images in the gallery enlarge on click. A newsletter subscription, and a neatly designed blue footer with  address and social media icons with map are presented  below.

55160-Event Planner Responsive Drupal Template with Parallax and Lazy Load Effect, Gallery

Purple and grey

Template 58249 – Country Music Responsive Landing Page Template 

Purple is a strong color, and grey with white space helps to provide the balance.This template blends imaginative, mystic imagery with the excitement of live concerts, to present the essence of this singer and his music.   Shades of purple, blue and grey have a haunting, dreamy rhythm to them and images of country cityscapes blend into each other to call out to audiences in large cities.  Concert dates are provided to give the user a taste of what’s in store.  Information about new albums, audio and video clips are provided.    The singer’s profile in brief is followed by products from the store, newsletter subscription and neat social media icons.

Template 58249 - Country Music Responsive Landing Page Template with Audio Player, Video Integration

Purple and black

We’ve looked at purple in all its glory. Let’s now take a look at the richness of the color blue.   When we see blue used in web design, it ranges all the way from very light blue,
Template 58192 - Paintball Club Responsive Website Template

to midnight-blue to purplish-blue to almost mauve to  greenish blue.

What is the color blue? 

“Blue is the color of light between violet and green on the visible spectrum. Hues of blue include indigo and ultramarine, closer to violet; pure blue, without any mixture of other colours; Cyan, which is midway on the spectrum between blue and green, and the other blue-greens turquoiseteal, and aquamarine.

“Blues also vary in shade or tint; darker shades of blue contain black or grey, while lighter tints contain white. Darker shades of blue include ultramarine, cobalt bluenavy blue, and Prussian blue; while lighter tints include sky blueazure, and Egyptian blue. (For a more complete list see the List of colours).

“Blue pigments were originally made from minerals such as lapis lazulicobalt and azurite, and blue dyes were made from plants; usually woad in Europe, and Indigofera tinctoria, or true indigo, in Asia and Africa. Today most blue pigments and dyes are made by a chemical process”. – Source: Wikipedia

Associations with blue

Blue is the color of the sky and the sea, a natural color that inspires trust.

Blue is associated with trust, loyalty, wisdom, confidence, intelligence, faith, truth, tranquillity, heaven, stability, integrity.

Blue is used to promote health products, airlines, air-conditioners, technology products,
as it is associated with cleanliness, air, sky, water and sea, coolness, intellect,
precision and calmness.

Blue is a masculine color. It has connotations of depth and stability and is used in heraldry and high-impact logos, especially with warm colors red and yellow.    Source

Blue in web design

Blue with analogous colors

Purple, blue and green are close to each other on the 12-color wheel. They are analogous colors that are quiet and harmonious when used together  in a design.

Template 58422 – Unibus Bus Responsive Moto CMS 3 Template with
Carousel, Slider, Parallax, Lazy Load Effect

Template 58422 - Unibus Bus Responsive Moto CMS 3 Template

Transporting large groups of people is this company’s forte, in its fleet of buses that operate with efficiency and professionalism.  Blue forms a transparent overlay on the header for this template for a transport company offering buses for hire, conveying a feeling of trust and stability. Lighter and darker shades of blue are used in the template,
providing a calming effect, with green to provide  an accent color. Icons in blue and green draw the eye to important content.  The template has a dotted map both as a graphic and in the background to show the spread of the company’s activities.  Blog snippets from the home page lead into the blog. The gallery showcases the coaches and services available on hire, from luxury buses to double-deckers to wedding buses to mini-buses and inter-city transport, school tour services, employee transport services and more.

Blue with complementary colors 

Template 58493 – Advertising Agency Responsive WordPress Theme with Slider, Parallax, Blog, Portfolio

Template 58493 - Advertising Agency Responsive WordPress Theme

Blue-green and yellow-orange are complementary colors that do not jar
because of the usage of white and black in this template.  The header image
brings in the diffused blue-greens in this website template, while the yellow-orange
menu and text boxes, buttons, arrows, circles and graphics provide contrast that
catches the eye.  The portfolio with descriptions can be enlarged and viewed by
category.  The blog enables you to showcase your work attractively.

Template 55972 – Pixel Storm Responsive WordPress Theme with Blog, Portfolio

Electric blue in a flow with other colors – Add white space, colorful rectangles, crushed paper texture  and geometrics to the design and you’ve got an innovative, trendy look for
a tech or visual communications company. Red, purple and blue are analagous colors used effectively in this website template. Circles with icons lead into the site.  The portfolio is showcased on the homepage and  can be  enlarged and viewed as a slideshow with descriptions or by category.  Circles, squares and geometric shapes present  design elements with flair.

Template 55972 - Pixel Storm Responsive WordPress Theme with Blog, Portfolio

 

Template 58136 – Contact Lenses Responsive PrestaShop Theme 

58136-Contact Lenses PrestaShop Template with Parallax, MegaMenu, Blog, Carousel, Slider
The gentle soothing shade of blue of this template signals trust. It
showcases contact lenses, products made for sensitive eyes, as
well as associated products.  The image slider shows the product in use.
Banners and content boxes in a carousel lead into product pages with
slideshow, description, price, special offer, shopping cart, video,social
sharing icons,  other products and  a newsletter signup.  The footer has
useful links, personalized account links and a sitemap.  he site can be
customized in 5 languages and  2 currencies.

Template 55966 – Hang Gliding Responsive WordPress Theme with Carousel,
Slider, Megamenu, Blog, Portfolio

Template 55966 - Hang Gliding Responsive WordPress Theme with Carousel, Slider, Megamenu, Blog, Portfolio

“Take off into the wild blue yonder” is the theme of this website, with its
logo designed as a paper plane on blue, polygons on blue and
grey and icons in blue as part of the design.  Spectacular shots of hang-gliding
sell a hang-gliding training program in this website template with
large eye-catching images  in the header slider.   Geometrics merge with clouds to
carry the user away on the spirit of adventure. Events highlighted in circles put the spotlight on the paragliding activity, set in a content box in grey with polygons,
which echo the shapes of the paragliders. A large content box with contact
number and map invite customer response.   Services are presented in a
gallery and news and events in a blog with spectacular photographs that are
sure to interest the hang-gliding enthusiast.

Template 55121 – Softapp Software Responsive Drupal Template with Polygon Theme, Blog, Portfolio

Template 55121 - Softapp Software Responsive Drupal Template with Polygon Theme, Blog, Portfolio

 

Template 54965 – Surfex Surfing Responsive Drupal Template with Slider, Gallery, Blog

Cool blue colors make this a website to love. Hero images of a surfer riding the waves grab attention in the header slider. The header with red menu boxes on rollover and blue dropdown menu makes navigation easy. Content boxes inform the surf enthusiast about the company. Blog snippets with arrows guide the reader into the blog with larger images, text and polls. The gallery can be viewed by category. On the homepage, a handy surf guide is presented in the form of a carousel.  Above the footer, a promotional message about an introductory lesson on surfing is presented on a banner of waves with 3D effect.  Social media icons are shown on the footer in a transparent strip with the waves showing through.    The excitement of surfing is presented all through the website right from the header down to the footer.   The contact page with contact form and map invite user response.

 

Template 54965 - Surfex Surfing Responsive Drupal Template with Slider, Gallery, Blog