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.

##[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.

##[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.

##[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.

##[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.

##[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!

##[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.

##[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.

##[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.

##[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.

##[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.

##[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.

##[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.

##[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.

##[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).

##[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.

##[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.

##[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.

##[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.

##[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.

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

niconj

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

Join Our Newsletter. No Spam, Only the good stuff.