Colour: Color Palette v1.2

Some of you may remember that one of my first (and most visited) columns way back in May last year was about creating colour palettes from only two colours plus black and white. For those that missed it then, here is a quick recap on one of my favourite techniques.

The Return Of The Los Palmas 7

When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials as clients want to see the web site ’fit’ within their company style. But when the client only uses one or two colours, I use a favourite technique for creating a whole range of complimentary ’tones’.

I start by making a white Fireworks canvas (usually 250 x 100px) and then adding a 250 x 50px black rectangle to the base layer.

Then I sample one colour from a logo graphic, or from a photograph, and create two 50 x 50px squares which I fill with that colour. These are placed over the black and white bases. I then duplicate these squares and adjust the opacity of each square (usually 100%, 75%, 50%, 25% and 10%) to allow progressively more of the base colour to show through.

This creates ten tones from a single colour and is easy to replicate for further base colours.

One Step Beyond

Steve Chipman of Slayer Office took my technique and created a fantastic online tool which we also use in the studio on a regular basis. Steve took the concept of Creating Colour Palettes to a new level with some interesting twists and clever scripting.

More Madness

Regular readers might have guessed at my love for Macromedia Fireworks. So imagine my delight when I discovered an extension to the most underrated my favourite web graphics application which builds colour palettes using a very similar technique, right there inside Fireworks.

House Of Fun

Ukranian developer Viktor Goltvyanitsa (I hope I pronounced that correctly) has developed a Windows Fireworks extension, aptly named Color Palette v1.2. The free trial version adds an extra suite of colour tools to Firework in a mini-palette to sit in your side bar.

In the Selector, along with the more conventional colour picker is a very handy tool for Web Safe colours. Simply select a colour from the picker and the extension will serve up a side-by-side comparison with the nearest Web Safe colour.

The full (paid for) version adds colour support for HSV, RGB and CMYK as well as the standard HLS.

Blender takes two colours and blends them seamlessly together in up to twelve steps. Mousing over each colour gives a hex read-out of that colour.

Perhaps the most interesting part of this extension is the Mixer which enables you to work on creating two palettes with a range of new tools including one very similar to my technique which overlays up to four chosen colours over white. Chromatic variations can be made with an added colour wheel tool and the resulting swatches can be exported either as separate swatch files, or as colour tables (.act format) for importing into Fireworks or Photoshop. The paid for version also includes a ’replace with palette tool’.

A free Lite version of Color Palette v1.2 is available free and is well worth a look. Hope this helps.

Update

With today’s news that Adobe is to buy Macromedia, all I can add is, Buy Fireworks while you still have the chance.

Replies

1. #1 On April 18, 2005 04:58 PM Dave said:

   Thanks for the info, very, very useful - especially that online tool based on your article!

2. #2 On April 18, 2005 05:15 PM Kemie said:

   Downloading the FW extension, it looks sweet, thank you!

3. #3 On April 18, 2005 05:59 PM Jesse said:

   It is windows only, are there any OS X tools that are similar?

4. #4 On April 18, 2005 06:16 PM steve said:

   Someone should make that plugin for that otehr little piece of software that is slowly becoming mroe popular, hwat was it called? Oh yea, PhotoShop.
   Nice Stuff and Nonsense Andy. Thanks.

5. #5 On April 18, 2005 07:01 PM Andy Hume said:

   He probably should build it to photoshop.

   Who knows what’s gonna become of Fireworks with the Adobe take over news. :~

6. #6 On April 18, 2005 08:31 PM pixeldiva said:

   "Who knows what’s gonna become of Fireworks with the Adobe take over news."

   I fear that they’ll take a few bits and bung them into Illustrator, and take a few other bits and bung them into ImageReady, and when they’re done there won’t be any one thing that does what Fireworks is so superbly good at any more.

   *sigh*

   On topic, that’s a really ace tool. Thanks for pointing it out.

7. #7 On April 18, 2005 08:51 PM harry Jones said:

   Fireworks is dead! Long live Fireworks!

   I wonder what will become of her. Lets hope she doesn’t go the way of other underated software with a cult following…

8. #8 On April 19, 2005 03:58 PM Phil Baines said:

   That Slayeroffice tool is quit handy! Bookmarked.

   So, do you really think that Fireworks is doomed with the news? I do hope not since I share your love of it. It’s my main graphics software.

9. #9 On April 19, 2005 04:44 PM TooL said:

   Dude, loving your work and your articles. When are we going to see a tut on doing that wireframe thingie in fireworks?? I’m itching to find out.

   Thanks

10. #10 On April 19, 2005 08:13 PM Malarkey said:

    @ Jesse: I can’t find an OSX version, why don’t you email the creator?

    @ TooL: Book a place at @media (if you haven’t already. I’m talking about wireframing and mark-up guides in my presentation.

11. #11 On April 19, 2005 10:19 PM Viktor said:

    To Jesse-
    Color Palette must work for OS X, but I did not test this. Possible problems with export *.act files.
    Thanks all.

12. #12 On April 19, 2005 10:57 PM Daniel said:

    This was/is very useful for someone who is non-graphical in nature like myself. THANKS!!

    I modified slightly and created a photo shop document with three layers.

    - 1st layer has a white strip with each 50px square opacity cut down.

    - 2nd layer the black strip with the same.

    - bottom layer .. is the color you want to change

    This is much quicker as I just need to change the one layer to see how the palette looks.

    Thanks Again!

13. #13 On April 20, 2005 03:07 AM Kingsley said:

    Is there a savefireworks.com that I can rant at? Or do I just cling to it irrationally like a BeOS installation?