20 tools & resources for getting the right color for your project
Tags: color, css, palette, design
Published: 2021-04-11 21:43:10

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](https://hexcolor.co/palette-generator)
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mwd7qpoi8fkdzxhxz96.png)](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.

<hr />

##[Happy Hues](https://www.happyhues.co)
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk8vkkf2dxugl855rtu5.png)](https://www.happyhues.co)

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

<hr />

##[Piggment](https://piggment.co)
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvhshm0h74b1djo88zj4.png)](https://piggment.co)

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

<hr />

##[Coolors](https://coolors.co)
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x34732xcdrsmzikm9x6i.png)](https://coolors.co)

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

<hr />

##[Colorbox](https://colorbox.dev)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo7on37pxgj4amo5dee2.png)](https://colorbox.dev)

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

<hr />

##[Picular](https://picular.co)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9a97w8v5shr6iil9int.png)](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!

<hr />

##[Trianglify](https://trianglify.io)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqi0so97wpuwt3h8pbx2.png)](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.

<hr />

##[Cssgradient](https://cssgradient.io)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugceclg389m90u51rhog.png)](https://cssgradient.io)

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

<hr />

##[Colorsinspo](https://colorsinspo.com)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqn6anvunnmh1pk882y5.png)](https://colorsinspo.com)

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

<hr />

##[Mycolor Space](https://mycolor.space)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jghi13se6ru48fanp1zu.png)](https://mycolor.space)

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

<hr />

##[Colorable](https://colorable.jxnblk.com)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spxatk8go84pu9j2h74s.png)](https://colorable.jxnblk.com)

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

<hr />

##[CSS Peeper](https://csspeeper.com)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds5q139pg0r81rx0weem.png)](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.

<hr />

##[Calcolor](https://calcolor.co/blend)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neltwn4g687b21whosjr.png)](https://calcolor.co/blend)

Explore the different shades between 2 colors of your choosing.

<hr />

##[Gradient Animator](https://www.gradient-animator.com)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odrhznurwnk5j9bjucd1.png)](https://www.gradient-animator.com)

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

<hr />

##[Adobe Color](https://color.adobe.com/create/color-wheel)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpxnzj04lyoxdd5ywo98.png)](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).

<hr />

##[CSS Matic](https://www.cssmatic.com)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk6j3ehcz1gc0k5afpuz.png)](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.

<hr />


##[Muzli Colors](https://colors.muz.li)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkfgc427ue97qkzhpfvy.png)](https://colors.muz.li)

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

<hr />

##[Make Tints and Shades](https://maketintsandshades.com)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofll6fmvpvth0txve9ck.png)](https://maketintsandshades.com)

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

<hr />

##[Shadowlord](https://noeldelgado.github.io/shadowlord/#89467d)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13mwfdvp738k7brl606z.png)](https://noeldelgado.github.io/shadowlord/#89467d)

Dynamic and straight to the point tints & shades generator.

<hr />

##[Mdigi Tools](https://mdigi.tools/color/)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y651ocvl5in7632wuvaw.png)](https://mdigi.tools/color/)

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

<hr />

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