Like any profession, there are tools and resources available to make your life as web designer easier. The more useful and time-saving your tools, the more time you can focus on important tasks such as coding and designing. As for me personally, any tools I come across that help me do my job quicker, better and more efficiently,  I certainly save and refer back to. Here is a collection of 15 useful online tools and websites for web designers that I frequently use.


Adobe Color Wheel

Have a color you know you will be using in your web design project, maybe a color in the logo, but don’t know where to go from there in regards to creating the perfect color scheme for your project? Then Adobe Color CC is exactly the tool you are looking for. Adobe Color CC allows you to create and save various color schemes. Simply plugin a hex color code (for example, #0babc4) and then choose whether you would like the color scheme to be analogous, monochromatic, complementary, compound, etc etc. Extremely easy and useful.


Firebug website

Firebug is an extension for the Mozilla Firefox browser and an incredibly useful tool that allows you to debug and inspect HTML, CSS and Javascript. This tool is a must-have for anyone working in web development.


Screenshot of What's My Browser Size website

As straightforward as it sounds, this Web app shows you the current size of your browser window. This can be useful in designing responsive websites.


Screenshot of Hailpixel Color Dot website
Screenshot of Hailpixel Color Dot website with color setting options

Color by Hailpixel is the perfect tool for finding and exploring color combinations and color tones. Simply hover your mouse across your screen in order to see and admire the never-ending variations of colors. As soon as you come across the color you like, click on it and continue searching for the next color. The app provides you with all the hex color codes you selected, which is very convenient.


Screenshot of Brusheezy website

Brusheezy is the go-to place for Photoshop resources. There you will find an infinite array of Photoshop brushes, patterns, textures, PSDs and much much more – basically anything and everything Photoshop-related. All of the resources on Brusheezy are free to download and, depending on the license, free to use in your projects.


Screenshot of Google Fonts website

There are many font websites on the Web, but most of them you need to pay for the rights to use the fonts for commercial use. The wonderful thing about Google Fonts is that their entire catalog of fonts is free and open source, accessible to anyone for any project, both personal and commercial.


Screenshot of Unsplash website

Unsplash offers free high-resolution stock images that you can use in your web design projects. What’s great is that all the photos on Unsplash are licensed under Creative Commons Zero, meaning you can copy, modify, distribute and use them for free (including for commercial purposes), without having to ask permission from or providing attribution to the photographer or Unsplash.


Screenshot of Pixabay website

Like Unsplash, Pixabay is another great website and resource for free-to-use stock imagery for your web design projects.


Screenshot of Iconfinder website

Based in Copenhagen, Denmark, Iconfinder works with a community of local and international icon designers. They are continuously expanding and adding to their very large collection of icons available for download. Some of their icons are free to use without permission, others are free to use with attribution to the author, and others are for sale, but for very reasonable prices (usually $1 or $2).


Screenshot of Favicon.cc website

Favicon.cc is very convenient for it allows to you create a favicon from scratch using their online app, or by uploading an image of your own and transforming it into a favicon. Compared to other favicon generators, I find favicon.cc to be one of the best for the simple fact that it’s easy to use and the quality of the favicon is high (and not super-grainy like the favicons created by other favicon generators on the Web).


Screenshot of Fontsquirrel website

Did you find an image with a beautiful font, but can’t figure out which font it is? Simply upload the image to Font Squirrel’s Font Identifier and their app will tell you the name of the font. Very easy and convenient.


Screenshot of Freepik website

Freepik is a great source for illustrations and graphic design. I have personally used to it to create very beautiful and detailed infographics. What’s great about Freepik is that the content can be used in both personal and commercial projects (with a link to Freepik).


LastPass Website

Remembering your own passwords is difficult enough, try remembering the passwords of all your clients’ websites. Mission impossible! For this I use a free app called LastPass. It is a password management tool that makes it very easy to save and manage your passwords. What’s great is that LastPass is cloud-based, so you can log in and a retrieve your passwords from wherever, whenever.


Screenshot of Awwwards websites

Need a little inspiration for your next project? Awwwards is a showcase of award-winning websites from the around the world. You can browse websites by award won (nominees, sites of the years, etc), by category (architecture, blog, ecommerce, fashion, etc), by color, and even by country.


Screenshot of Dribbble website

Another great source for inspiration, Dribbble is a community of designers that share with each other, other fellow designers, what they are working on. The community consists of web designers, graphic designers, illustrators, logo designers, icon artists, typographers, and other creatives which share screenshots of whatever project(s) they’re working on, making it a great destination for attaining new ideas for your projects.