Colour is an important part of any design, it immediately sets the tone and helps to communicate the mood of your message.
Tones of a colour can be easily matched, but just because a website has the colour red doesn’t mean you add any old red and expect design harmony.
So when a friend, who is creating a slideshow for a class reunioun, asked, “how do I match my school colours?,” I thought that would be a great topic for a post.
There are two easy ways to get the numbers you will need to match your colour to an existing colour. If the colour is online, I would highly recommend using Firefox’s ColorZilla extension.
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.
I use this handy extension frequently, it’s so easy to grab the RGB or hex colour values from a design element for use in Photoshop, or to use in your CSS.
Speaking of, there is an easy way to grab any colour anywhere on your screen using Photoshop.
Simply select the Eye Dropper tool and take a sample from an area by clicking and dragging from your Photosop document to where the colour is. This will load colour into the foreground colour box of the colour picker, for use in your design.
Once you have your colour, time to create a great palette using Adobe Kuler (as outlined in a previous post).
My first Kuler colour palette - Dettah iceroad. Made from a photo on Flickr.
Harmonious colour schemes can make or sink a project, so it’s best not to just wing it.
I have seen websites transformed from blah to beautiful with a simply tweak of css colours.
So when I spotted kuler, Adobe’s web-hosted application for generating color themes, I figured it might be worth checking out. It was.
Its Air app, kuler desktop, is great for instant colour browsing – you can search by key words and it will find thousands of suitable swatches for whatever mood you want (how many swatches it finds depends on how many users have tagged using that word). You can also flip through highest rated, newest, most popular and random.
Grabbing colours is a cinch, through copying html colour code or downloading an Adobe Exchange file.
Check out this Layers Magazine tutorial on how to integrate files into Creative Suite.
But if you have time, have some fun with the colour create and your own palettes. To do this, you’ll have to go to the kuler site.
Click on ‘create’ and choose from one of the six rules for colour harmony and begin to play with the sliders on the colour wheel.
The most fun feature for me was ability to upload or use Flickr photos to create palettes – my first palette is in screenshot above, it’s the colours extracted from a Dettah iceroad photo on Flickr. The warm and cool colours work well together, should I use this scheme on my new website …
