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.
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.
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:
…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.
…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:
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.)
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:
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 18 color palette resources to set you up with the perfect palette for your website.
First, do you need inspiration?
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?
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.
(Complete with whimsical names.)
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?
4: 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.
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.
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.
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.
8: 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.
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.
10: 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.
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.
12: 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.
Color, by HailPixel, lets you really nail down exactly which color you want, and then gives you the Hex code for it.
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.
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.
15: 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.
16: 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:
…that basically goes through all the code for your site and grades all the visual elements in it on visibility.
Now your color palette is in place and you know it’s super visible, you’ll need some images to match.
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.
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.
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.