Dec 31, 2010
What’s the quickest way to whip up a beautiful color palette for a new website?
1. Start with Kuler, a free online tool from Adobe.
2. Register and sign in so you can download a color swatch for your chosen palette(s). Not signed in? Then you can’t download. (Pay attention to WHERE you save the file!)
3. Open Photoshop and find the Swatches panel.
4. Open the Swatches panel menu and select Load Swatches.
5. Find that file you downloaded in step 2 and select it.
6. The last colors in your Swatches list will be the new ones from Kuler (open the Swatches panel menu and select Small List to see the hexadecimal color codes as shown below).
There you have it! To learn more about using Kuler, watch this video at Adobe TV (6 min. 34 sec.).
It’s useful to finalize a color palette in Photoshop before you start coding your CSS. Test all text and link colors against the background colors where they will appear to ensure that the contrast is okay.
Smart Tip: Save the palette as a PNG-24 file and upload to a Web server or Dropbox. Then test it by opening that file on every computer you can get your hands on. Hues and contrast can vary widely on laptops and desktops, Mac and Windows. Make sure your palette will work for all users!
Learn more about Web color and Photoshop: The Mysterious “Save For Web” Color Shift, by Doug Avery.