Color Coordinate Your Web Pages

pictaculousThe Internet has made it possible for millions of people to write articles and create websites.  However, the Internet has not magically provided these millions of people with writing and graphics skills.  That’s one of the key reasons I love the posts about writing here on Blogging Tips.  Likewise, I am really pleased with a new family of free tools that offer color coordination to those of us who were not blessed with the color coordination gene!

Pictaculous takes an image that you upload and based on the colors in that image it generates a selection of color palettes. So with one upload you can get expert advice on a design palette.  To show this in action I created a screen capture of Blogging Tip’s header and uploaded this to Pictaculous.


Pictaculous created a primary palette made out of colors directly extracted from the image – the five large color blocks on the top shown in the screen shot above.  This alone is an awesome resource as now you know the hexadecimal codes to use in order to match text and other website or blog components to the exact colors.  If you are using an Adobe product for your design, you can download these colors right into Adobe products by using the Adobe Swatch File (.aco) for the palette you’ve just created.

Pictaculous also taps into the design site Kuler from Adobe and ColourLovers to suggest ten related color palettes that coordinate with the colors of the image you uploaded.  This feature is the key reason why I use Pictaculous – it’s like Garanimals for web design.

colors-pallete-generatorBeyond Pictaculous, Colors Palette Generator is another excellent option.  While missing the ability to recommend  a specific matching color palette, it does a great job of matching the color palettes for the image you upload. Actually, you don’t even need to upload the image as Colors Palette Generator will work with an image you provide via a URL.  The web based application creates three palettes with light, medium, and dark colors to match your image.  You can export it as either a Photoshop swatches file or as a CSS stylesheet.  If you don’t use Adobe, the CSS option is a key reason to use Colors Palette Generator over Pictaculous.

Firefox users might also consider the Colorzilla add-on.  With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.  There is a palette browser that allows you to choose colors from pre-defined color sets and save the most used colors in custom palettes.  Colorzilla is more geared towards a developer with a very frequent need for this type of tool.

As with every genre of web based applications, the universe of options is quickly expanding beyond just these applications.  However, these applications are free, easy to use and don’t require any signup.  If you are color-challenged (or colour-challenged), you will love these web sites!

About the Author

David Silversmith is an Internet and Web analytics consultant with more than 20 years' experience managing both technology and customer service for information businesses. He is the former CTO at where he spent 12 years implementing and managing IT strategy. While there, he led the adoption of hosted Web analytics and implemented some of the earliest A/B testing applications to optimize visitor traffic. Silversmith also spent seven years at Nielson Claritas, a leading supplier of demographic information, establishing its technical support and training departments. He's also managed call centers supporting products such as Canon printers, and the Sony Magic Link - one of the first hand held PDAs.

Nicholas Z. Cardot - July 21, 2009

Thanks for these suggestions. I've used colorzilla for Firefox for a while now, but I'll definitely take advantage of these palette generators on my next design project.

    David Silversmith - July 21, 2009

    I've heard similar from a number of friends who've been using Colorzilla – these websites over more options than Colorzilla from a design versus programming perspective.

Leon Dudovich - July 21, 2009

Also big respect! But how I can use this if I made 30 websites in website buidler, do I have to change a designs or what?

    David Silversmith - July 21, 2009

    With a tool like site2you, you are passing many of the design decisions off to Site2you. You get to pick which template you want to use, but within each template you have to work with the design/color options they provide.

Dizi izle - July 21, 2009

Thanks for these suggestions

I Love Geeky Girls - July 21, 2009

Thanks for helping – this will make color design easier for this non-designer. I am good at telling what looks good once I see it, but getting there is another question, and Pictaculous should help a lot with that.

    David Silversmith - July 21, 2009

    You said it – "I'm good at telling what looks good once I see it" and that's what these tools do, in essence they let you see a mockup so you can make good design decisions!

Comments are closed