Skip to main content ↓
Three color blocks with corresponding color codes in HSV, RGB, and CMYK models. From left to right: dark blue with codes HSV (232, 53, 55), RGB (66, 76, 141), CMYK (53, 46, 0, 45); bright red with codes HSV (0, 100, 100), RGB (255, 0, 0), CMYK (0, 100, 100, 0); and bright orange with codes HSV (27, 95, 91), RGB (232, 111, 12), CMYK (0, 52, 95, 9). Below each are sliders and input fields for color adjustment.

12 Useful Web Tools for Designers

When it comes to design, there’s a plethora of free web-based tools to help you accomplish tasks such as color palette selection, creating unique fonts, editing images, and testing typography. In this article, you’ll find a bunch of handy online utilities for designers.

kuler Create

kuler Create - screen shot. kuler is a web-based application by Adobe that helps you create and share color themes. You can peruse the user-submitted color themes or create your own color themes with the kuler Create web tool.


pixlr - screen shot. pixlr is a web-based image editor with a Photoshop-like user interface; pixlr has similar features like layers, filters, and even a Clone Stamp tool.

For more image-editing web tools, check out this list of web-based image editors.

Wellstyled Color Scheme Generator

Wellstyled Color Scheme Generator - screen shot. Wellstyled’s Color Scheme Generator is a simple web tool that helps designers produce color themes. It has an intuitive interface and the ability to bookmark generated color themes.


FontStruct - screen shot. FontStruct is a web-based tool created by font retailer FontShop for creating, editing, and sharing fonts. The FontStructor tool is a simple and innovative font editor for designers who want to create beautiful type.

You’ll need to sign up for a free user account to access the tool.


Typetester - screen shot. Typetester allows you to test, tweak, and compare screen typography. It has a variety of typefaces that include web-safe fonts like Arial and Verdana – but it can also use your personal fonts.


TypeNavigator - screen shot. TypeNavigator is a very clever web tool that can help designers identify typefaces. It’s great for hunting down a font you saw that you’d like to use on your own designs.

Dummy Text Generator

Dummy Text Generator - screen shot. The Dummy Text Generator is a versatile and useful web application for generating dummy text.

Though branded as a “Lorem ipsum generator for web designers”, it will also come in handy for designers working on print layouts.


BGPatterns - screen shot. BGPatterns is a web tool for generating tiled patterns. Its intuitive (yet robust) user interface will allow you to tweak, edit, and resize a wide range of patterns.


Dabbleboard - screen shot. Dabbleboard is a convenient web-based collaborative drawing tool that’s designer-friendly. Create web layouts, design user interfaces, or draw freehand with other fellow designers.

For more web-based collaboration tools, check out this list.


PicMarkr - screen shot. PicMarkr is a web-based custom watermarking tool that you can use to protect and prevent design theft. It’s great for mockups or copyrighted designs that you publish online. - screen shot. is a favicon design tool. With the, you can either create favicons from scratch or upload and edit images from your computer.

For more favicon tools, check out this list of web-based favicon generators and resources.


templatr - screen shot. templatr is a handy web application for  creating web page templates. It has a very simple user interface, making itself an excellent tool for quick-and-dirty mockups of web layouts.

Related content

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator