How to Use 13 Free Online Color Scheme and Palette Tools
for Web Designers and Developers
There are so many free color scheme and palette tools on the Internet it’s not funny; however I went out and found the best of the best and the worst of the worst and will show you how to use them (or NOT to use them!).
I created my own “star rating system” with 5 stars being the best and of course 0-3 stars being the worst.
Some of these tools are quick and easy to use and give you great information and others have more detail and information.
Discover one you like, explore it, and begin to use and keep me posted!
If you have a great color scheme or palette tool you like to use please leave a comment below with the name or link.
I have purposely left out Color Picker Tools and Image Color Tools – that will be for another article.
Free Color Scheme and Palette Tools
1. Design Seeds
5 Stars: Easy to use and beautiful images of colors found in nature that people post and then the color schemes are shown to the right. Once you hover over the smaller color samples to the far right it will show you the Hex #.
If you click on the smaller color samples to the far right you will discover similar images with that color and you will be offered to search by theme and even search by color value by adjusting the RGB sliders and then clicking on the color sample.
5 Stars (even through you have to agree to their cookies – ugghh!): Before you can use Coolors you must agree to their cookies; however their “Generator” is pretty cool and it has a quick tutorial. The tools it offers are very quick and easy to use.
Once you click “Start the Generator” you can create color schemes simply by hitting the space bar. You can click on a color to lock it and get “cool color combinations”. You can type in your own Hex # and adjust the color components and change the color scheme order. If you don’t like something you can click the Undo button to go back to previous color scheme.
There is a Refine button to adjust your final palette (Hue, Saturation, Brightness, and Temperature) and even the ability to export your palette as Copy URL, PNG, SVG, PDF, SCSS, and COPIC. I exported my as SCSS and opened in Sublime Text:
Another nice feature of Coolors is you can install on AppleIOS, Android and as an add-on to Photoshop + Illustrator. (FEE)
5 Stars: Material Palette is very quick and easy to use. Just pick any two colors by clicking on them.
Once you have selected your two colors a color palette will be created for you, along with the Hex #’s.
Along with the Hex #’s you are also told which color is the Primary, Dark and Light Primary, Accent Color, Primary text, Secondary Text, Text/Icons, and Divider Color. And look at all the ways you can download your palette!
5 Stars: Adobe Color CC (use to be called Kuler) has some great features and is really fun to use. Using your mouse you can click and drag around the color wheel and see the colors change in the boxes below. You have the ability to select a Color Rule: Analogous, Monochromatic, Traid, Complementary, Compound, Shades, and Custom. At any time you can also type in a Hex # or RGB # under any of the five squares.
5 Stars: Color Explorer has a wide variety of options for your color pleasures, including saving color palettes you’ve created (must create a free account), a color picker, color libraries, color matching, analysis and conversion, and even upload an image to create color palettes!
Color Libraries include choices of: W3C Named Colors, Named Web Colors, Websafe Colors, TOYO®, FOCOLTONE®, and TRUMATCH®.
Color Picker: You can click on a color or type in RGB, HSV, and Hex #’s along with a Color Analysis and the ability to add to a palette.
Color Matching: Using the slides you can adjust Red, Green, Blue, and adjust the Hue, Saturation, and Lightness. Another feature here is Color Matching Algorithm, with choices ColorMatch 5K Classic, ColorExplorer – “Sweet Spot Offset”, Single Hue, Complementary, Split-Complementary, Analogue, Triadic, and Square. You can append to current palette, replace current palette, and save in my palettes.
5 Stars: Color Schemer has been my go to forever. I use it a lot as a color picker; however it really does give you color palettes. You can click on a color, type in the RGB # (click Set RGB) or the Hex # (click Set HEX) and you can also click Lighten Scheme and Darken Scheme. Very easy to use.
The Color Schemer can be downloaded (Fee; however you can get a trial) to a PC or Mac with many, many more features and goodies: http://www.colorschemer.com/studio_info.php
5 Stars: Paletton is powerful for a web designer/developer and has some pretty cool features once you learn your way around it. For choosing colors you can hold down shift and click and drag the dots in the color wheel, you can type in a Base RGB (the Hex #), you can change the Hue, select Monochromatic (1-color) and add one complementary color, Adjacent colors (3-colors) and add one complementary color, Triad (3 colors) and add one complementary color, Tetrod (4-colors), and Free Style (4 colors).
To the right of the color wheel you can hover over a color in the box to obtain the Hex # and clicking the color will give you a TON of information about that color:
Clicking on the “Presets” tab at the bottom of the color wheel you will be presented with an array of colors to choose from:
Clicking the “Preview” tab under the square color sample will give you lots of choices:
One of my favorite tabs under the colored square is the “Examples” tab. Here you can see what your colors will look like on a web page and you can also change the Page Layout (you can have a lot of fun with this!).
Clicking on “Vision simulation” on this page or the main page will show you many different options to test and see your colors:
On the “Tables/Export” tab, under the colored square, once clicked will give you the following (and here you can also click on any color and you can obtain all the information about the color):
If you click on any of the Color list, such as –as CSS, it will create all the css code you need for your colors:
4 Stars: Web Colour Data allows you to type in any URL and will display a breakdown of the colors used, the Hex # of each color and the % of that color used throughout the site. It also displays the hue distribution, where the colors “live” on the color wheel and websites with similar colors (which are clickable). So the next a client says, “I like the colors on this xyz site”, you now have a free and quick way to discover all the colors on that site.
4 Stars: Colour Lovers, a creative community, gives you many different channels to select from: Wedding, Home, Fashion, Web, Print, Craft, and Digital Art; each offering Palettes, Patterns, Colors, Groups (which you can join), Trends, Discussions, and some channels offer Shapes.
Selecting any of the offerings and clicking on your choice will render information about the Palette, Pattern, Colors, etc. where you can obtain the Hex # and RGB #, download various items (you must join and be logged in).
Under Tools, there as several things to choose from, one is being Photocopa. You can upload an image (the image must already be on the Internet) and get the colors from the image (you can make your image private or share with community). Clicking on any color on the right will put the sample color in a box on the left, which you can hover over to see the Hex #, RGB #, and the HSV #.
Another choice under Tools is Copaso, which is a Color Palette, were you can either click on a color in the box, or the color wheel (you can choose up to five colors), or type in the Hex #, RGB #, or HSV #. Plus you have five various choices to choose from under the color wheel.
10. Color Rotate
3 Stars: I found this a little clunky to use; however it does offer some beautiful color schemes. Sign up using your Google account. You must fill out your profile to save a palette. You can save palettes and add a tag and rename it.
It took a while to figure out how to get the Hex # for the colors (which they have labeled as the RGB #).
First click on a color you want to get the Hex # for and then you need to click this button:
See where it says RGB: #FF4Doo? Well there is your Hex #. You can also use the sliders to change/adjust the color. When I visited, they offered 29 pages of color schemes.
I would NOT bother with the next three color schemers; however I’m going to show you anyway as you “might” like them.
1 Star: Instant Color Schemes comes from Yahoo. Click on one of the names or dates from the List of Color Schemes, which then takes 5 related images from Yahoo Image Search and then shows the most prominent 6 colors from each image. Each column of colors is taken from a single image.
1 Star: To use this you must have a URL of an image you want to obtain the color scheme for. When I tested this I never got anything until my third image URL and then it worked well.
0 Stars: Color Scheme Designer allows you to type in a base color, using a Hex #, or RGB #, and in return will give you a “Test Pattern: Webpage Layout” color scheme. What I don’t like about this one is that you have five squares that only change color if you click on them and give the square a new value. It gives you the ability to click Brighten, Darken, Saturate, and Desaturate your base color choice or the square selected. You can also click on the color wheel.