Color Guide: Using Purple For Your Website

You have to be pretty awesome to pull off purple. But if you scheme it correctly, it can look pretty great.

Royal Hues
Throughout history, purple has been associated with royalty, prestige, and extravagance. Today, it’s a favorite of many, especially women and teenage girls. This gives purple a “feminine” reputation, but as with any color, it can convey many messages. It all depends on how you use it.

The value of purple is that it is a combination of two very different colors: energetic red and cool blue. The combination of these colors creates a shade that has a bit of color pop, but isn’t too warm or overwhelming. Purple has been used to illustrate magic, mystery, serenity, and even spirituality. Purple is also often used to give youth or edge to a site, since it is a bit unconventional for a business color scheme. If you’re looking to appeal to younger or more modern crowds, purple could be a great choice. As many still associate purple with femininity, it might not be the right choice if you’re looking for a strong, industrial atmosphere.

Purple is especially diverse depending on the colors it is used with. Pair it with yellow, and you get a contrast that screams energy, flair, and luxury. But use purple with greens or blues and you can create a feel of serenity with a touch of warmth. And of course, the shade of purple is meaningful as well. The more reddish the shade, the more warmth and energy it holds. Using more blue creates the coolness that many find calming, especially if the shade is light, as of lilacs. Also, because of the flexibility of purple shades it can contrast with both white and black. Purple and white creates a clean, professional look, but the hint of red brings a bit of edge and personality. As purple can give a feeling of mystery or wonder, many companies use a reddish purple with black to give a feel of opportunity for the future.

Examples

Themify

Themify: This company uses a darker, but more reddish purple to contrast with black and white. Using a darker purple along with a  background pattern or gradient creates a header that seems out of this world. This is a very common way to use purple, but it works for this site because the focus is on WordPress themes.  Why not flaunt your design prowess in your advertising,  and give viewers a taste of what can be done on their own site?
Update: Well, this is awkward. During our search for cool purple websites to bring to you, we found this one which uses the same background as Themify This a great example of why you should be picky about your website design. Using a theme from an external site can be used by anyone else who likes it. Personalized design rules!

OneRoar

One Mighty Roar: This site successfully uses purple to look professional. Not an easy task, One Mighty Roar uses purple as an accent by incorporating it into their logo, using it for buttons, and giving links a purple underline. This brings some personality and flair to the site, but just enough to still be professional and clean.

Kent

Kent Covenant: I like that this site uses a background gradient without creating the “deep abyss” or “outer space” look. The idea of wonder, opportunity, and bright futures is a great concept, but the gradient or outer space background is a bit overdone. This is a clear design that in no way relates to the great beyond, but it still brings a bit of hope with it. Also, the site is clearly trying to appeal to the younger generation, and purple certainly gives the page a young, hip look.

Woman

Woman to Woman: Alright, here’s where that stereotype of femininity comes in. But you can’t ignore the power of a color on a certain demographic. If you’re trying to get more female customers, or if maybe your product is designed for women, consider using purple. Light hues bring thoughts of serenity, peace, and trust. It’s not as blatant as pink (some women are anti-pink), but it still has some girly-ness to it. And it’s pretty.

Desk

Salesforce Desk: The shade of purple for this site has more blue than red, making it more cool and crisp. This works well with the white and black in the design, but doesn’t darken the page too much. Using a white header for the toolbar and a black footer brings the eye to the top of the page, where most of the information is. Also, the same shade of purple is used throughout all of the accents, which is very important for a clean page. Consistency is key!

Cadbury

Cadbury: Does this site remind you of Willy Wonka? Purple and brown combine to make a playful, imaginative atmosphere, which is great for a candy or chocolate business. It’s perfect for getting the attention of children, and the dark purple accents the chocolatey brown nicely for a splash of fun color and contrast. Also note the different shades of purple, which help draw attention to different parts of the website while still using purple. This is a successful attempt of using multiple shades of the same color, simply because no one color is overdone, and they don’t contrast each other too much.

PurpleSue

Purple Sue: The concept behind this design illustrates art, beauty, and creativity. I like the way that various shades of purple are used on top of each other, because it creates some contrast but also brings a bit of texture and design to the page. Again, using multiple shades of the same color can be done!

Carbon

Carbon Made: This site is a little different than ones we’ve already examined. It doesn’t use a ton of purple, but just enough to introduce contrast to the light blue background. The shade of purple used has a bit more red in it, which is why it contrasts the blue so well and keeps the fun, imaginative feel of the page. As purple is in the company logo, it is crucial to incorporate the color into the web site design. Remember this, folks: your logo and your website should work together, not be different elements.

Culinary

Culinary Culture: I’m sad to say this site was under construction at the time I wrote this post, but you can get an idea of its design by the transition home page. I like the way this web site uses purple to bring all of the other colors together. In reality it is an accent, used to bring attention to titles, menus, etc. But with the purple grapes in the center image, and little bits of purple all over the page, it really brings consistency and flow to the page. Also, purple is used with the cream background to bring color and contrast, while still keeping the page clean and organized.

Celestial

Celestial Grace: This is a great example of how purple can convey spirituality. Depending on your business concept, there can be a fine line between creating a serene atmosphere versus a spiritual one. This site focuses on mental and spiritual health, and purple is used effectively to make the viewer feel both mystery and peace at the same time. However, I would be careful with using spiritual elements with your web site. Unless you’re focused on spiritual or mental health specifically, some people might be turned away by elements of divinity. Also, as purple indicates mystery, it’s easy to get carried away and create an atmosphere that’s a little too edgy and strange.

We hope you’ve enjoyed this color series, and that now you have a better understanding of how to use color in your designs.