DEV Community

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

Posted on

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

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:

Hexcolor

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.


Piggment

Alt Text

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


Coolors

Alt Text

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


Colorbox

Alt Text

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


Picular

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!


Trianglify

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.


Cssgradient

Alt Text

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


Colorsinspo

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.


Colorable

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.


Calcolor

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.


Shadowlord

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!

Top comments (0)