The Ultimate List of Color Related Tools for Front End Developers

The proper tool can speed up a process of development drastically. It seems to be an acsioma. So, this is the list of tools which I am using a lot. I find them convenient, they help me a lot. As an example of my workflow: I generate a palette from a given colour and grab HEX codes of some colours from the palette, then test how these colours are combined in gradients, then create SVG shape(s)/wave(s) and apply them to the page I am working on.


Url: https://paletton.com/

This service lets you generate a colour palette based on the given colour code. It can be triad colours, or adjacent, or tetrad. Later you can see all these colours in the table format with both HEX and RGB colour codes. Very convenient if you want a copy-paste ready solution.


Url: https://uigradients.com/

It is a beautiful gradient preview tool. Somehow I cannot find a way of adding more than two colours. However, this tool displays gradients full-screen, which is incredibly convenient! It also lets you get CSS code instantly or download the gradient as JPG image (I do not know why it would be needed for a developer though 😉 ).


Url: https://www.grabient.com/

Another one gradient generator/explorer tool. This one is more advanced in terms of setting: it is allowed to add more colours as well as it is possible to set a precise angle. Still, only linear gradients are available. It also has an export to CSS code of the chosen gradient.

React Color Extractor

Url: https://react-color-extractor.surge.sh/

It is a preview for the JS based script with the same name. However, you can use it, why not?) So, what it does is it generates a colour palette based on the image uploaded. It means that the uploaded image will be parsed for colours used in it and then you will get HEX colour codes of all significant colours of your image.


Url: https://www.blobmaker.app/

It is a web tool that helps you quickly create random, unique and organic-looking SVG shapes. You have three settings: colour, complexity and contrast. Use it to mix and match your perfect shape. And yep, they always unique even for the same settings. You can download an SVG of the generated figure and use it on your project.


Url: https://getwaves.io/

It is very similar to the previous tool, but this one lets you generate waves. The flow is the same: tweak settings, mix and match, download the final result.