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

Nicolas Jeremias — Sun, 11 Apr 2021 21:43:10 +0000

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

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

Happy Hues

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

Piggment

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

Coolors

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

Colorbox

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

Picular

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

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

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

Colorsinspo

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

Mycolor Space

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

Colorable

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

CSS Peeper

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

Calcolor

Explore the different shades between 2 colors of your choosing.

Gradient Animator

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

Adobe Color

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

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

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

Make Tints and Shades

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

Shadowlord

Dynamic and straight to the point tints & shades generator.

Mdigi Tools

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!

DEV Community: Nicolas Jeremias

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