Image via Wikipedia
In the days of print-only, more colors meant more money. There were no free color scheme tools readily available, and mistakes could be costly.
Choosing a color scheme could be intimidating and mistakes were costly. If you’re not a graphic designer, you may not have a color wheel in your head, or the knowledge to know when it’s OK to “break the rules.”
I remember struggling mightily to use percentages of some Pantone shade (10% or 40% or similar) to make it look as if there were more “colors” on the page. Now, on the web, it doesn’t really matter how many colors you use. Just do use them (if everything is all one color it’s tough to read).
But how do you know which colors to choose? Luckily, there are plenty of places online that can help.
Free color scheme tools
If you’re not sure which colors look well together, here are some tools that will help.
Paletton This tool works differently from most online color schemes. It’s based on the classic color wheel. You can select monochromatic (one color in different shades, for better contrast), three adjacent colors, three contrasting colors, or four-color combinations. Click on one of the dots on the wheel to change its color (hue on the wheel) or to move the different colors (dots) closer together or further apart. Based on your choices, the box on the right will change so you can see how your colors look together. The web color shows up in a little box under the wheel.
Color Hunter Color hunter allows you to create color schemes from existing images. You can use one of the images on their site, select an image from a website, or upload your own. The site then breaks down the images into color chips, with the web color hex number listed underneath and the original image on the right.
ColorSchemer – Online Color Scheme Generator If you already have a color you want to use (say a logo image or a company brand color), but need to know what goes with it, try this color generator. Type in the RGB or hex number into the little boxes on the left. The right side will show a series of sixteen color chips that complement your initial color. You can then lighten or darken the overall color scheme. I wouldn’t use all sixteen colors in one site though. Stick with three or four.
ColorCombos.com – Combo Library – Web Color Combinations Library Combo library has several different ways to choose a color scheme. You can search for colors by common names (such as aqua, baby blue, or brown). Or, you can start with a hex code. It also has pre-made combinations (so you can just pick one that’s already there). If that doesn’t work for you, try one of the popular colors (along the side). Finally, you can find an existing site you already like, plug in the URL and find out what the colors are.
Material Design Pick any two colors you like. Click on them. A full palette of eight colors that work together will show up on the right of your screen. The colors are marked with their hex colors and the palette has instructions on how to use each color on your site. For example, dark blue as a primary color, yellow as an accent, black as text, and so on.
Coolors.co It doesn’t get any simpler than this. There’s a changing display of color schemes right on the web site. Hit your space bar to pick one. Click the “get started” button and you’ll see a range of colors. Click on a color you like (to lock it in) and press the spacebar. Poof, a new palette, with the hex numbers listed. You can also use an existing image.