DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

A Handy List of Resources for Picking the Perfect Website Color Palette

by Richard Bayston

Creating an effective color palette is a vital part of designing a website that works. But how do we get there?

For some projects, you already have one or two colors picked out – maybe they’re your logo, or brand colors, and you’re working within those limitations when you create your site.

For others, you’re starting from scratch.

And some projects just need tweaking – minor adjustments to the color palette to make it more beautiful or usable.

Whether you’re a seasoned pro looking to outsource some of the spadework of design, or you’re building a website for the first time, these tools have you covered.

First, let’s start with a brief introduction to color theory. This chart was designed for classrooms, but it does a good job of explaining the basics.

color theory

Source

There are rules based on how different colors are constructed, that tell us what’s likely to look good with what. We can also use these rules to know what’s going to stand out or blend in.

What the chart above doesn’t cover is tone, tint and shade – ways of making the same color stronger, brighter or darker.

tint shade tone

Source

Armed with this knowledge, we’re ready to get started.

What is a color palette?

A color palette is a selection of colors that you’ll use for a project – a palette is what oil painters mix and carry paint on when they work.

When we build a color palette, we’re looking for colors that work well together.

For our purposes, that has to mean ‘work well together for website design,’ not ‘make a room look restful.’ So this color palette:

a color palette

…looks nice together. But there isn’t enough difference between the colors for elements of a website to stand out from each other. We need something that’s both harmonious, and distinct: people have to be able to locate calls to action, menu elements and important copy intuitively and rapidly.

This version:

another color palette

…is basically the same, but modified so that while it remains harmonious, certain elements stand out way better.

A very similar color palette is in action over at Werkpress.com:

werkpress

You can see that while the colors are harmonious, website elements are clearly distinguishable, so copy is legible and the eye knows where to go. CTAs stand out, and menu items are clearly visible.

Does picking the right color palette matter?

The Institute for Color Research (CCICOLOR) says that the average person will make a judgment about a person, product or environment within 90 seconds. That judgment is mostly subconscious, and between 62% and 90% of it can be attributed to color alone.

So picking the wrong colors or color combinations has the potential to blow your results before you even consider anything else.

Picking the right color palette means picking a palette that matches your brand’s identity and values. For instance, if you’re trying to sell life insurance, what colors would you reach for?

I’m guessing not black, orange and gold.

It’s not a bad color combination per se.

(It works fine for Lamborghini.)

lambo

It’s just all wrong for that market.

Different color palettes tell your users who you are, what you stand for and what to expect from you. Lamborghini’s site is all about luxury and power because, well, like they say, they’re Lamborghini.

Groupon takes a different color approach, with lots of white and a signature green for its branding and conversion elements:

Groupon

Source

Picking a color palette is essential if you don’t want a website that looks like a horrorshow.

Picking the right color palette is essential to branding, UX and conversions.

Here are 19 color palette resources to set you up with the perfect palette for your website.

Getting Started

First, do you need inspiration?

1: BrandColors

BrandColors Website Colors

BrandColors shows you how leading brands use color to differentiate their businesses, tell their brand stories and let their customers know what they stand for. You can scroll alphabetically through a list of corporations, nonprofits and startups, or search by brand name.

Looking for a readymade palette?

2: ColourLovers

share your color ideas and inspiration

ColourLovers is a forum site for palette design, with almost 2 million palettes submitted by its users. You can hunt up ‘palettes that include this color,’ browse, or follow designers. Often, you’ll find variants of the same palette, giving you hue and saturation options ready made.

ColourLovers palettes

(Complete with whimsical names.)

3: ColorSchemer Gallery

ColorSchemer

ColorSchemer lets users create and upload their own color schemes. You can browse them by submission date, rating, or number of uploads, as well as searching by keyword.

4: ColoRotate

colorrotate

ColoRotate comes with a library of color schemes you can browse, select from and modify. If you want to build your own from scratch, you can, with a 3D color tool. And you can use the scheme you created straight in PhotoShop or Fireworks, with the ColorRotate plugin and iPad app.

Match Your Branding

But what if you already have images, logos or branding that your website colors have to match?

5: Color Hunter

Color Hunter

Color Hunter isn’t a tool with a massive range of functionality, like some of the all-in-one powerhouses on this list. Instead, it’s a solid solution for one thing: tracking down a particular color. Go to the site, then drop an image in and the tool will create a palette for you from the image. This is a solid way to create color palettes around images you need your site to harmonize with, and you can also use it to reverse-engineer the palettes of sites you like the look of.

6: Pictaculous

Pictaculous

Pictaculous generates color palettes from photos – upload a photo, and Pictaculous will suggest colors to match it. As well as offering you a palette based on the photo you upload, Pictaculous will offer ready-made color schemes that match.

These tools will generate entire color palettes.

7: Adobe Color CC Color Wheel

Adobe Color CC Color Wheel

This tool used to be known as Adobe Kuler, and it started out as a basic color comparison site. Now, it’s a full-power color palette construction system. It lets you try out, compare and save color combinations based on a color sphere. You can choose types of palette and generate five-color palettes with various levels of input from the tool including fully custom and near-automatic.

8: Paletton

Paletton

Paletton lets you build a color palette fast. Select the scheme you’d like: mono, complementary, triadic, tetradic, analogous or accented analogous. Then, when you change one color in the scheme, the others change to match it.

9: Color Spire

Color Spire

Color Spire builds you a color palette from a single color. You select a starting color, and Color Spire suggests a palette of colors to use in combination with it. It also provides a preview, letting you see how the colors it recommends would look in a sample website.

10: MudCube Color Sphere

MudCube Color Sphere

(Source: http://htmlcolorcodes.com/resources/best-color-palette-generators/)

MudCube’s Color Sphere is a Chrome plugin that helps you harmonize colors, control for colorblindness and identify hex codes. You can also export color schemes directly into Illustrator, PhotoShop and CoIRD.com.

11: Cohesive Colors

Cohesive Colors

Cohesive Colors takes your current palette and lets you manipulate it, adding an overlay tint in the color of your choice and generating a new palette from an existing one quickly and easily.

12: Hex Color Scheme Generator

Hex Color Scheme Generator

This tool lets you generate colors that work in combination with a color you already have. It’s a little more basic than some of the color sphere tools in this list. You paste a Hex number into the tool or click on the color wheel, and it returns with a set of 3 additional colors that match, complete with Hex codes.

Building Your Colors

Some of these tools need you to have a color in mind to begin with. If you don’t have branding you need to match, and BrandColors didn’t show you anything that caught your eye, you can start from scratch.

13: The Color App

The Color App

This iOS tool lets you make fine decisions between similar colors, by laying them out clearly with some space between them rather than in gradients, as in color wheels and spheres. Big color grids let you use your whole screen (iPad Pro users, rejoice!) and it also lets you sample colors, find RGB, Hex and HSLA values and create color palettes from scratch.

14: Color

blue

Color, by HailPixel, lets you really nail down exactly which color you want, and then gives you the Hex code for it.

purple

Hover over the screen and the color changes very slightly as you move – it’s like a color sphere that constantly feeds back in Hex codes. Move across the screen for color, up and down for saturation.

Get the Codes for a Color

If you’ve seen a color somewhere and you don’t know exactly what to call it, these are the tools for you.

15: SpyColor

SpyColor

SpyColor gives you information about any color, including the Hex, RGB, CMYK and other codes. The tool shows you range of scheme types like complementary, split-complementary, triadic, clash and analogous, on each color page.

16: HTML Color Codes

HTML Color Codes

HTML Color Codes finds hex codes for image colors in your browser. You select a picture from your desktop and click ‘view image,’ then mouse over it to get Hex codes for the different parts of the image.

Test Your Palette

Once you have a color palette in place, you need to know if it’s going to work for a variety of visitors.

17: Check my Colours

Check my Colours

Check my Colours lets you check your colour palette’s foreground and background colors, making sure that they provide sufficient contrast for someone having color deficits. If you want to colorblindness-proof your site, or just get the most effective and intuitive color combinations from a UX perspective, this tool is invaluable. Drop a URL in and it spits out a report:

Check my Colours test done on 90 elements

…that basically goes through all the code for your site and grades all the visual elements in it on visibility.

Matching Images

Now your color palette is in place and you know it’s super visible, you’ll need some images to match.

18: TinEye

TinEye

TinEye is better known as an alternative to Google Image Search. But it also works as a way to explore color combinations, using a database of over 10 million Creative Commons license photographs harvested from Flickr. If you’re looking for images in the perfect color combination, this is a great, easy-to-use way to hunt them up.

19: Designspiration

Designspiration

Designspiration lets you select up to five hues from a full-page palette, which gives you the opportunity to see the colors clearly. Then, the site displays all the images in its database with that color combination. It shows you Hex numbers clearly, and lets you click on individual Hex numbers. You can save images to collections on the site as well as downloading them.

Conclusion

Creating website color palettes is a craft – not an art exactly, still not quite a science. But with these tools to help you, it should be simpler and easier to create palettes that look great and work.

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Richard Bayston

Richard Bayston creates copy and content at RBCopywriting.com, mostly about tech, digital marketing and content strategy. When he’s not doing that, he’s arguing amicably with his wife and Googling the answers.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

Show Me My Heatmap

@CrazyEgg Thanks for no longer truncating naming conventions of exported snapshots. Saves so much time!

Nicole Mintiens

@Nicole_Mintiens