When developing frontend, in 100% of the cases I have to work with colors, alignments, gradients or measurement units. Although in my beginnings I used to develop these particularities in a more artisanal way, over time I have created a small collection of resources that make my work easier. Therefore I have grouped some of the tools that I use on a daily basis to facilitate and speed up my developments.

CSS Gradient

It is rare that in an application we do not have to develop one or several overlays with its corresponding gradient. I don't remember the last time I developed a HERO without one.

CSS Gradient is a gradient configurator that can help us a lot to translate the designs into code. It allows us to generate the gradient code 100%. customizable. It is highly configurable and allows to generate complex gradients in a simple way.

Color Name

Have you ever seen this in a color variable configuration file?

$color_gray: #B5B5B5B5
$color_dark_gray: #767676
$color_darkest_gray: #494949
$color_really_darkest_gray: #252525
$color_the_most_darkest_gray_in_the_world_almost_black: #13131313

Or maybe?

$color_gray_1: #B5B5B5B5
$color_gray_2: #767676
$color_gray_3: #49494949
$color_black_1: #252525
$color_black_2: #131313

Me too many times. Because of this problem I found the website color-name.com. With it we can find out the name of a color from a hexadecimal although we can also look for the color by its name if we know it. I find it useful if I have confusing variable names, it helps me a lot to have them well organized.

The color variables would be as follows:

$color_philippine_silver: #B5B5B5B5
$color_sonic_silver: #767676
$color_outer_space: #494949
$color_raisin_black: #252525
$color_chinese_black: #131313

This tool is, in short, a great help to have our color variables well organized and, above all, to avoid the fact that adding a new one is not a headache.

HTML Color Codes

A lot of tools that help me also regarding color. Selectors, search engines, color converters...

You will find a lot of resources that will help you when you have to deal with colors in the frontend.

Pixel Converter

Pixel Converter is a website where we can find several tools for converting pixels to other types of measurement, such as, for example, to REM, EM, VW and even inches or percentages.

The most interesting thing is that all the conversion tools offer us the mathematical formulas to be able to create our own conversion functions in our applications. They are usually very simple and I assure you that they are very useful.

Page ruler

Finally I leave you an extension for Google Chrome. In this case it is Page Ruler.

It is a simple extension that overlays a grid on our website. It also allows to measure (in px) elements by making click and dragging.

It is very useful for visually checking element alignments.

The big drawback is that the color of the grid is not configurable so it is difficult to see on dark pages.

Dev Toys (Extra)

Dev toys is a suite which brings together a handful of very useful tools for day-to-day development. In this case, they are not exclusive to development frontend since we have converters, encoders, decoders, formatters, comparators and a long etcetera.

I met her thanks to Miguel Angel Sanchez and since then I use it in my daily work. The number of tools is increasing and, although it is true that we will always have to resort to other applications for specific developments, it seems to me a good base to work with.

Conclusion

These tools may not be the best or the most used. They are not the only ones either, as there are dozens of websites that offer similar help. They are simply some of the ones I use and, therefore, I invite you to propose alternatives that will enrich the development of your frontend.