Akshay Chougule

Posted on Feb 22, 2020 • Updated on Feb 25, 2020

Productive Tools🚀 For Web Development😎

#productivity #angular #react #javascript

🦸FRONTEND ESSENTIALS

In modern times, our lives have certainly become a bit more dynamic.
Being aware of this, We'll be exploring broad category of tools.So let me show you some tools I find extremely useful, either because they make my life easier or because they push me to write more accessible code🕴️.

Color 🌈

1.Colordot - A color picker for humans

2.uiGradients - Beautiful colored gradients

3.Stylify Me - Online Style Guide Generator

4.Colors and Fonts

Fonts 📣

FontSpark | Discover Better Fonts

Icon 🎩

Noun Project

CSS 👑

CSS Grid: Style Guide

Logo 💎

Logaster logo maker

Animation 👾

5.Steam inspired game card hover effect

6.UnDraw

7.Animista

8.Vivify - CSS Animation Library

9.CSS Animation Library for Developers and Ninjas - cssanimation.io

10.Magic Animations CSS3

11.vector illustrations – Ouch.pics

12.Illustrations Vectors, Photos and PSD files

13.MIT Vectors

14.Humaaans: Mix-&-Match illustration library

That’s it for now! Just a quick overview of some of the tools that make my work a little bit more productive. I just hope I helped you in this choice and thus, make your life more arranged and creative.

Top comments (31)

Color Tools 🌈 • Oct 20 '20

Hi Akshay; Can you add our online color tools to your list please?

Color Tool Name	Link
Color Palette Generator	hexcolor.co/palette-generator
Color Picker Tool	hexcolor.co/color-picker
Gradient Color Generator	hexcolor.co/gradient-generator
Image to Colors Palette Generator	hexcolor.co/image-to-colors
CSS Color Extractor	hexcolor.co/css-color-extractor
Color Contrast Checker	hexcolor.co/color-contrast-checker
Bootstrap Material Theme Colors	hexcolor.co/material-design-colors

Corentin Bettiol • Mar 12 '20 • Edited

Thanks I really liked colordot :D

Kevin Kirchner • Oct 9 '20 • Edited

Have you seen the grayscale.design color palette generator?

You set the color values you want and then add your colors. It will find the colors that match your color value scale for you! In other words, you can theoretically design in grayscale to get your contrast just right, then simply swap in your colors and you'll maintain the exact contrast ratio. It's pretty epic.

Praveen Kumar • Feb 23 '20

Appreciate the effort❤️

Julia Flash • Feb 23 '20

love this. And have used a lot of these!!! :-)

Rene Padillo 🇵🇭 • Feb 23 '20

cool! thanks for sharing 😀

wegissilveira • Feb 23 '20

Thank you so much for this.

Vlastimil Pospichal • Feb 23 '20

paletton.com/

David Paine20 • Jun 25 '20

Thanks for sharing the list of amazing tools.
You must check that tool as well
url-decode.com/
That tool contains 100+ Web utilities, related to numbers, Unit converter, Developers, String, IP tools, and Converters as well.