DEV Community

Cover image for 20 tools & resources for getting the right color for your project

20 tools & resources for getting the right color for your project

niconj profile image Nicolas Jeremias ・4 min read

It all started with me thinking: "I need to revamp my website and add some color urgently!".

That took me into browsing different sites looking for a nice color combination that would reflect myself in.

But since I'm a huge procrastinator I ended up listing tools and websites to get the colors instead of actually picking some for my site.

Here are all the sites I've visited and played a little with in my, procrastinated, journey of finding some colors for myself:


Alt Text

Pick a color, extract colors from an image, generate beautiful gradients and palettes using this free and complete web tool.

Happy Hues

Alt Text

A curated list of beautiful pallets displayed as you change them.


Alt Text

Create your own gradient or pick one from a pre-built extensive list of nice samples.


Alt Text

A beautiful palette generator, very versatile and with the option of testing how different types of colorblind people would see them.


Alt Text

Create shades and tints quickly and in a very customisable way.


Alt Text

Just type the name of what you want to get a color from and Picular will give you back a list of colors matching your search!


Alt Text

Okay, you got me, this one is not necessary under the "color" category, but think these are just mesmerising and wanted to share them.


Alt Text

Generate your gradient with this friendly and straight to the point tool.


Alt Text

A full suite of tools, pickers, palettes and also tutorials about color related topics.

Mycolor Space

Alt Text

Swiftly create a full palette, and several related palettes, from a single color of your choosing.


Alt Text

Check if your background and font color contrast correctly with this simple but extremely powerful tool.

CSS Peeper

Alt Text

Do you want to extract the colors and inspect the html elements from a site? Then this extension is all you need.


Alt Text

Explore the different shades between 2 colors of your choosing.

Gradient Animator

Alt Text

Generate a gradient css animation in no time with this site.

Adobe Color

Alt Text

Explore trends and create your own color palettes with this extremely and easy to use chromatic wheel by Adobe (they also have a chromatic-simon-says if you feel up to the challenge).

CSS Matic

Alt Text

Not only you’ll get a gradient generator, but also you can play around with a very helpful Border Radius and Box Shadow sandbox.

Muzli Colors

Alt Text

Pick a color and several palettes will be generated for you.

Make Tints and Shades

Alt Text

Get your tints and shades based on one, or several, base colors.


Alt Text

Dynamic and straight to the point tints & shades generator.

Mdigi Tools

Alt Text

A full suite, not only with several color tools, but also with dev, design and writing tools among others.

I hope them help you finding the best color combination for your project!

Discussion (0)

Editor guide