网页调色之简单易行秘籍

关于过渡色与对比色的调配，原来如此简单易行！各位不妨试试。

英文不难所以就偷懒不翻译了。

Dave Shea posted an interesting article this week on coming up with a good colour scheme.

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'.

Less can make more

I find it easier to implement this technique using Macromedia Fireworks rather than Photoshop.

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 (in the case of the Status Mortgages site) from a photograph, and create two 50 x 50px squares that I fill with that colour. These are placed over the black and white bases.

Then I 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.

(Swatch colours from Status Mortgages)

I have uploaded my Fireworks PNG source file for anyone who is interested.

Vischeck

One of my essential tools when designing colour schemes is the Vischeck plug-in for Photoshop. This handy tool simulates different forms of colour deficiancies and I mainly use it for checking that link colours contrast sufficiently with normal body text.

Updates

Steve at Slayer Office has created a fanstastic Color Palette Creator tool from this technique. Steve, you're the man!

Patrick Fitzgerald of Barely Fitz design has also created an interesting solution inspired by this column.