in 24tips

24tips: beyond websafe colours

7 Dec: Back in the day, websites needed to work on 800×600 screens and use only one of the 216 officially-sanctioned ‘web safe’ colours only. Bless.

Color Scheme Designer

Now, we can use colour properly, creating sites which are appealing, on-brand and accessible. Here are some of my favourite tools:

  • Digital Color Meter is, apparently, bundled with Mac OS so if you’ve got a Mac, you have this fantastic little utility lying around. Fire it up and it gives you an eyedropper you can move around your screen, able to quickly copy the hex code (the six digit reference code for a colour anywhere on your screen – great for matching backgrounds to pictures or logos.
  • Color Scheme Designer helps you get to grips with the basics of colour theory, finding colours which ‘go together’ in laymans’ terms, according to their colour wheel position
  • The SlayerOffice Color Palette Creator is an old staple of mine – feed it a base colour and it will show you the hex values for various lighter and darker shades. Ideal if you have a dark corporate colour to work with and want some lighter backgrounds for sidebars etc.
  • Jonathan Snook’s Color Contrast Analyser tackles an important problem not usually picked up by automated accessibility testing tools – is the difference between a text colour and its background sufficient to meet the industry standards? (of which there are a couple). Great one to settle arguments with (and check you’re legal)

What’s your favourite colour utility? Link ’em up in the comments and we can build this list.
24 helpful tools and techniques for doing web stuff cheaply

  1. Great list of tools – will certainly check some out when next facing the challenge of creating well-coloured things 🙂

    I’ve been using Kuler (http://kuler.adobe.com) in the past for it’s nice feature of taking colours from an image and working with those – and selection of colour ideas from others to browse.

Comments are closed.