21 Color Palette Tools for Web Designers and Developers

| Get awesome (and free) stuff here


There are many elements that come together on a gorgeous website. One of which is color.

Guest writer Safira Mumtaz has compiled a list of 21 color palette generators to help you find the perfect color scheme. Take it away, Safira!

Color is an essential part of design. And choosing the perfect color scheme is a step all designers, and artists, must go through. A color scheme can make or break your art, design, or project.

Below are 21 tools to help you choose the perfect color palette for your project.

1. Coolors

URL: https://coolors.co/

Coolors gives you the ability to upload an image of your choosing and make a color palette based on the colors found in that image. With Coolors, you can export and save the generated color palette as PDF, PNG, SVG, SCSS or COPIC. Moreover, there is a Coolors app for Android or iOs smartphones, and it also has an Adobe Photoshop and Adobe Illustrator plugin.

2. Adobe Kuler: Color wheel

URL: https://color.adobe.com/create/color-wheel/

adobe-color-wheel
This is an official Adobe tool to help you generate a color palette. There are two options for generating color schemes: you can play around with the color wheel and generate color schemes according to the color chosen, or upload an image and let the Adobe Kuler generate one for you. Then, you can save the generated color palette in your Creative Cloud library (if you have one).

3. Paletton

URL: http://paletton.com/

Paletton lets you choose one base color for the layout, and then it displays various similar shades in small boxes that match your chosen color. With Paletton, you can then share the color palette by generating a link for it. Fine-tune your palette by choosing “adjacent colors” to your primary color and shades matching them, or a “triad” or “tetrad” option where you can create vision simulations for three to four color schemes.

4. Pictaculous

URL: http://www.pictaculous.com/

pictaculous
Pictaculous works only with images, by allowing you to upload an image, and generating a color scheme based on it using Kuler and COLOURlovers. Afterward, it creates an Adobe Swatch file that you can download.

5. Degraeve's Color Palette Generator

URL: http://www.degraeve.com/color-palette/

Degraeve's Color Palette Generator is a simple tool that lets you paste the URL of an image online, and then it creates a color scheme based on that. It’s simple, with no other features. But it gets the job done.

6. Colllor

URL: http://colllor.com/

Colllor generates a color palette only from the color you choose in the color picker. Based on the chosen color, Colllor generates shades/tints, tones, and mixed or similar color palettes.

7. CSS Drive: Image to Colors Palette Generator

URL: http://www.cssdrive.com/imagepalette/

In this tool, you can upload an image or put the URL of an image to generate color codes and a color scheme. It shows color schemes in three different ways, giving you light, medium, and dark palettes.

8. PaletteGenerator

URL: http://palettegenerator.com/

With this tool, you can upload up to 20 images to generate a color palette. You can change colors using the slider. To choose colors from a small fragment of the image, you can use the sample selection.

9. Material Palette

URL: https://www.materialpalette.com/

material-palette
In Material Palette, to generate a color scheme you have to choose two colors from the tiles shown. The color palette generated by Material Design Palette can be downloaded or tweeted.

10. Color Scheme Generator

URL: http://www.perbang.dk/color+scheme/

This tool generates color schemes depending on the base color you choose. It also generates color schemes according to various color combination categories such as Monochromadic, Triadic, Complementary Color Scheme, Split Complementary, Double Complementary, etc.

11. Colorschemer

URL: http://www.colorschemer.com/online.html

Colorschemer lets you set RGB and HEX codes in the toolbar and generate the color scheme based on the entered RGB or HEX code. You can lighten the generated color scheme and also darken it. Software for this color scheme generator is available for download on both PC and Mac.

12. Color Palette Generator

URL: https://bighugelabs.com/colors.php

Color Palette Generator generates color schemes from your photographs in just a few seconds. You can add or upload photographs from your PC or by using supported services like Flickr, Instagram, Facebook and Dropbox. The program will then analyze the colors and generate color schemes from the uploaded photograph, as well as providing CSS code for the color scheme. You can download swatches to use in Adobe software.

13. Color by Hail Pixel

URL: http://color.hailpixel.com/

color-hailpixelColor by Hail Pixel keeps on generating color swatches until you are done with the desired color palette. It starts with one color and keeps adding the colors as you move your cursor on the screen; simply click to save a color.

14. Color Wizard

URL: http://www.colorsontheweb.com/colorwizard.asp

Color Wizard generates color schemes based on a color you select. It shows variations as Hue, Saturation and Tint & Shade and enables you to generate color palettes in various categories like analogous, triadic, complementary, split complementary, Tetradic, etc.

15. Palettr

URL: http://palettr.com/

palettrPalettr generates color schemes inspired from the photographs uploaded by users on 500px. You can search the photographs using keywords (the site suggests to search by theme or location); once Palettr returns search results, you can view the photographs along with the color schemes they inspired.

16. Colorotate

URL: http://web.colorotate.org/

Colorotate is a 3D tool for generating color palette for any kind of project you might be working on. It has a few pre-designed color palettes that you can select, as well as an extensive tool for generating the color scheme of your choice. You can download Colorotate as an app on your iPad.

17. ColourCode

URL: http://colourco.de/

In ColourCode, you can generate color schemes by clicking and adding the color on the screen browser. Every generated color has few options for saving the color as Less, SCSS, PNG, etc. You can generate color palettes in categories like monochrome, monochrome light, analog, triad, quad, complement, etc. The generated color scheme can be downloaded in various languages or types.

18. Color Blender

URL: http://meyerweb.com/eric/tools/color-blend/

Color Blender is a perfect tool to generate color schemes with shade transitions in two colors. You can choose color one and color two in this tool and let them blend. You can also choose how many shade midpoints you want to have between the chosen colors.

19. COPASO : Color Palette Software

URL: http://www.colourlovers.com/copaso/ColorPaletteSoftware

COPASO is a tool under the hood of COLOURlovers. It is helpful in generating a rich color palette in one of three ways: (1) based on your color choice, (2) based on uploaded images or (3) by entering CMYK or HEX values. You can save the generated color palette or publish it by giving it a name.

20. Hex Color Scheme Generator

URL: http://www.2createawebsite.com/build/hex-color-scheme-generator.html

This Hex Color Scheme Generator is one of the simplest tools for generating color schemes. All you have to do is enter the HEX code of the chosen color you want as the basic color; then, It generates three colors that are similar or complement the base HEX color you chose.

21. ColorExplorer

URL: http://www.colorexplorer.com/colorpicker.aspx

Color-ExplorerWith ColorExplorer, there are four ways to generate color schemes. These include color picker, image color import, CSS/HTML color import and website color import. You can add colors to your palette via any of these methods.

About to launch your website?

Get my helpful pre-launch checklist to make sure you're on the right track.

Don't worry. I'll never, ever spam you! Powered by ConvertKit

Conclusion

Some of the color palette tools in the list above serve a bunch of needs and come with great functionalities. The job of deciding a color scheme is an important one, but it’s not something you have to do all on your own from scratch. I hope these tools will be of help for you in any kind of project you might be working on.

If I have missed out any of your favourite color palette tools, let me know by commenting below!

About Safira Mumtaz

safira-mSafira Mumtaz is a writer and graphic designer with a love for photography. In her free time, she’s either listening to music or watching movies. Her motto is “think it, do it.” You can find Safira on Twitter.


  • Thanks so much! I’m totally color challenged. This is a huge help:-)

  • Ramon Carroll

    Wonderful compilation and very big help. Thank you.

  • Thanks a lot for this! I hate having to save a bunch of bookmarks for similar things, so I’ll just save this page instead and return when I need color help!

  • I’ve never seen Color by Hail Pixel—I think it just became my go to color picker. Congrats on putting together a great list!

  • Great list! I use color-hex.com frequently but will be considering some of the resources you recommend here.

  • Rudy – Smart Money Today

    Great tips and thanks for sharing your tools.

    I just recolor my website to give a professional look and create a brand.

    I wrote down the entire process step by step how I picked the colors and the tool I’ve used.

    Would be great to have your opinion so others can benefit.

    P.S I’m not a professional designer, only a financial blogger.

    • Hey! If you want feedback on a site consider joining my online community newbiecoderwarehouse.com. People ask for site feedback there all the time :)

  • Dirk Zaal

    Dissapointed. They are all the same for me, only different approaches.
    What I was hoping for wasto find an online tool that let you live alter colors on a choosen website-page using its CSS files.

  • b888
  • Thanks for this awesome list of color scheme tools.

    I’ve just recolor my website as I’ve decided to make it a brand.

    I’ve shown in simple steps how I choose the perfect colors scheme by using https://GetHexColor.com

    This tool is useful to generate “complementary and analogues colors” necessary to create a strong brand and impact on your website.

  • cindy

    how about https://loading.io/color/random/ it can generates similar palettes from palette