The best colour tools for web designers

[Rss Bot 1]

As web designers, one of the most important choices we make has to do with our colour selections. Choose the wrong ones, and you might just lose out on an opportunity. It's true – the colours we choose can have a psychological impact on those who view them.

For example, red is generally viewed as a high-energy colour, while blue implies calmness and peace. To illustrate this point, consider the colours you might use on a website selling children's toys versus a site for a law firm. Chances are, you'll go with bright, vibrant colours for the former, and muted tones of blue and grey for the latter.

But how do you know which colours work well together? Luckily, you don't have to be a master at colour theory to put together a workable colour palette. To help you with the important task of colour selection, here are some of the best free colour tools on the web (plus one special bonus at the end for Mac users).

01. Adobe Color CC

This has been around a while, but is still incredibly useful

Free tool Adobe Color CC has been around for a while, and it's one of the best colour tools out there for picking a colour palette. Not only can you create your own colour schemes, but you can also explore what others have created. 

Select a colour from the wheel or from an image and apply colour rules such as only using complementary colours, monochromatic colours or shades of the colour you select, to generate a colour palette. Or, click on each colour and explore the colour wheel to customise the selection. As an added bonus, you can save the themes you create to your Adobe library.

02. Colordot

Use simple mouse gestures to build up your colour palette

Colordot by Hailpixel is an excellent free online tool for creating a colour palette. Using simple mouse gestures, you can select and save colours. Move your mouse back and forth for hue; up and down for lightness; scroll for saturation and click to save a colour to your palette. Click the tog icon to see each colours RGB and HSL values.

It also has a $0.99/£0.99 iOS app that allows you to capture colours with your camera.

03. 147 Colors

This free tool runs down the standard CSS colours

When you're responsible for generating easy-to-read CSS, sometimes using standard colours and colour names is the way to go. Thanks to 147 Colors by Brian Maier Jr, you can get a glimpse of all of them, and pick the ones that work for you. 

It contains the 17 standard colours, plus 130 other CSS colour names. Filter the results by shades of blue, green and so on, or choose from the full rainbow of 147 colours.

04. Color Palette Generator

This colour tools from Canva is useful for creating a colour palette based on an image

The Color Palette Generator by Canva is perfect if you're looking to create a colour palette from an image. With this tool, you can upload an image and the generator will return a palette of the five main colours contained in it. 

You can click on the colours you like and copy the HEX value to your clipboard.

05. Material Design Palette

Create a palette based on Google's Material Design principles

With the Material Design Palette you can select two colours, which are then converted into a full colour palette for you to download, complete with a preview. 

The company also offers Material Design Colors, which enables designers to see the different shades of a colour, along with their corresponding HEX values.

06. ColourCode

Save and export colour palettes as SCSS, LESS or PNG files

ColourCode by Tamino Martinius and Andreas Storm is similar to Colordot, but it offers a bit more guidance. With ColourCode, you can set different options along the colour wheel to create a different combination. 

You can also save your palette or export it as a SCSS or LESS file. You can even export to PNG, if you'd like.

07. Color Calculator

Select a colour and a colour harmony, and this tool will generate a colour palette

The Color Calculator is straightforward: you select a colour and a colour harmony option. In return, you get back the results of your recommended colour scheme. 

What's nice about this site, however, is that it also goes into a little bit of detail about colour theory and how it relates to your colour choices.

08. HTML Color Code

This suite of tools includes a list of standard colour names

This bulging free suite of tools by Dixon & Moe includes an in-depth colour picker with plenty of explanations of colour rules; a series of colour charts featuring flat design colours, Google's Material design scheme and the classic web safe colour palette; and a list of standard HTML colour names and codes. 

This site also offers tutorials and other resources for web designers, and options to export results from its tools as HEX codes, HTML, CSS and SCSS styles.

09. W3Schools: Colors Tutorial

This free tutorial includes links to a number of handy colour tools

If you're looking for an all-in-one solution that includes a guide to colours, as well as a number of different tools, then the Colors Tutorial at W3Schools is the perfect choice.

Not only can you learn about colour theory, colour wheels, and colour hues, but you'll also be able to use the other tools it has, such as the Color Converter. With this tool, you're able to convert any colour to-and-from names, HEX codes, RGB, HSL, HWB and CMYK values.

10. Digital Color Meter (Mac)

Mac's built-in tool lets you grab colours from your screen

OK, Mac users... this one's for you. With your machine's built-in Digital Color Meter tool, you can 'grab' a colour from anywhere on your screen, then get the values for that colour as a decimal, hexadecimal, or percentage.

Plus, you can even 'copy' the selected colour as a text or image.

Read more:

• If celebrities were Pantone colours
• The world’s favourite colour revealed
• 7 tips to manage colour better on the web

View the full article