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

Paint buckets
Source: https://unsplash.com/photos/krV5aS4jDjA

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 website screenshot
Hexcolor website screenshot
https://hexcolor.co/palette-generator

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

Happy Hues website screenshot
https://www.happyhues.co

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

Piggment website screenshot
https://piggment.co

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

Coolors website screenshot
https://coolors.co

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

Colorbox website screenshot
https://colorbox.dev

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

Picular website screenshot
https://picular.co

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 website screenshot
https://trianglify.io

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

Css gradient website screenshot
https://cssgradient.io

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

Colorsinspo website screenshot
https://colorsinspo.com

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

Mycolor space website screenshot
https://mycolor.space

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

Colorable website screenshot
https://colorable.jxnblk.com

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

Css peeper website screenshot
https://csspeeper.com

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

Calcolor website screenshot
https://calcolor.co/blend

Explore the different shades between 2 colors of your choosing.

Gradient animator website screenshot
https://www.gradient-animator.com

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

Adobe color website screenshot
https://color.adobe.com/create/color-wheel

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 website screenshot
https://www.cssmatic.com

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 website screenshot
https://colors.muz.li

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

Make tint and shades website screenshot
https://maketintsandshades.com

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

Shadowlord website screenshot
https://noeldelgado.github.io/shadowlord

Dynamic and straight to the point tints & shades generator.

Mdigi tools website screenshot
https://mdigi.tools/color/

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!

Fullstack developer, gamer and ocasional carpenter