Every web designer has to deal with colour. You spend hours working up colour schemes for your website design and then having to make sure you have all the correct values to enter into the code. To make the tricky subject of colour a little easier for you, here are my top five colour tools for web designers. I use these free web apps when creating a mock-up and developing a website.
Colour tools help enormously. From colour scheme designers to colour converters, using colour tools as part of your web design process will save you huge amounts of time and frustration. Why pore over a colour chart when you can simply wiggle your mouse over a selection and have the codes pop up for you in HEX, RGBa and HSLa.
Here are my top 5 most useful colour tools for web design:
I love this colour wheel tool. That’s not to say it doesn’t have its limitations but it is excellent for comparing colours based upon the following selections:
- Mono: single colour;
- Complement: two colours opposite each other on the colour wheel;
- Triad: three colours at an equal distance from each other on the colour wheel (also known as triadic harmony) where there is one primary colour and two accent colours;
- Tetrad: this tetradic rectangle colour scheme uses four colours arranged into two complementary pairs;
- Analogic: an analogous colour scheme is one colour with two complementary colours (either side of the primary choice) where you have one primary colour, a second to support and a third to accent;
- Accented Analogic: like the analogic scheme above but with a fourth diametrically opposite accent colour on the colour wheel.
There are also a few settings you play with depending on your project. Choose your colour palette – RGB colours, Web Colours or Opaltone Colours; and take into account your users vision with the colourblind settings. You may also export your palettes into five different versions from ACO to GPL versions. You can even generate the necessary code to copy and paste into your stylesheet.
Color Scheme Designer 3 is a great tool for working up colour schemes for your web design, or graphic design, projects.
CSS Coloratum is great in its simplicity. No colour wheel or settings to play about with but a great colour converter producing and converting values by keyword or in RGB, HEX or HSL.
This minimalist web app allows you to enter a colour value and have its converted equivalent instantly displayed. In addition, the plain background colour changes to match that of the value you entered making sure you get the colour you were hoping for.
Quick and easy, simple yet effective. CSS Coloratum is a wonderful little app that does the job nicely.
HSL Color Picker is a colour wheel tool but one with a little more freedom of selection. Drag the cursor anywhere on the colour wheel including up and down for lighter and darker colours to choose your ideal colour. Once you’ve found your colour there is an additional slider to fine tune how light or dark you want the colour.
One of the great things about this colour tool is that it will remember your selections while you remain on the website. Ten slots to fill with different colours to get your design just right. Then take your colours through to one of three options: Color Converter, Multi Model Color Blender or HSL Color Schemer.
You don’t have to click through to one of the other tools if you don’t want as the HSL Color Picker gives you the values in HSL(a), RGB(a) and HEX. You may also pick colours by name.
A must in every web designer’s virtual toolkit, the HSL Color Picker does the job nicely.
4. RGBa & HSLa CSS Generator for Internet Explorer by Kimili
UPDATE: This colour tool is no longer available and I have been unable to find an alternative. If you know of an another converter tool then please let me know.
Unfortunately a lot of people still use older versions of Microsoft’s Internet Explorer which do not support HSLa or RGBa. The lower case ‘a’ or ‘alpha’ value refers to the opacity of your colour. You may want your foreground colour fifty per cent transparent allowing the background colour to bleed through. IE9 and above supports the CSS opacity value but not alpha transparency.
As any web designer knows you have to do that little bit extra to get your webpage to display to expectations in Internet Explorer, even though it displays perfectly well in every other browser. This is called a ‘workaround’ or ‘hack’ and is one of those necessary evils we have to put up with if we want to include that all important alpha opacity value in our webpage. Fortunately for us, Kimili have produced this CSS generator tool which does all the heavy lifting for you.
Simply enter your RGBa or HSLa value into the definition field and the IE version will immediately be completed for you, ready to copy and paste.
A tool such as this solving a problem immediately is worth its weight in gold. Even better, it’s free.
My last offering is still a tool but is more of a reference guide if somewhat tangential. Sometimes it is useful to know not only the HEX, RGB or HSL value but also to know the HTML name of a colour and that is what W3 Schools have provided here. Type in any of these colour names into your stylesheet and it will appear just as it does in the W3CS table.
I have found this useful when trying to decipher a client’s colour ideas. The table also gives you the HEX value for the colour which is the value I would always use in my stylesheet.
To help those that are new to colour scheme design I would like to draw you attention to this excellent article on the Hongkiat.com website which looks at the basics of colour theory and colour psychology. This article is an excellent introduction into how and why you should use colour and its effects on your design.
Share this post and your thoughts!
I hope you have found this article useful and now have a few more tools in your web designer’s bag. I would be very interested to hear what color tools you use so please let me know in the comment field below.
Please share my top five colour tools for web designers on your social media networks.