Last updated July 10th, 2015 at 09:20 am
Do you come across web and blog templates or themes that are ideal layout wise but the colors do not suit you or your site’s purpose. These are relatively easy to change via a templates CSS style sheet but you may need some help choosing the correct color combinations. There are numerous free online tools to help in your decision, so many that it can take time just choosing which tool to choose. Rather than creating a long list of what is available I have chosen a selection of a variety of the more comprehensive but easy to use free tools:
Mimicry is the highest form of flattery
If you are short on ideas, or are just unsure what other colors you can add to those you already like, browsing other websites can be useful but time consuming. Screenalicious, which showcases websites, also displays the color palettes off each featured site, along with the corresponding hexadecimal numbers.
If you have seen a website whose colors you like but are having trouble reproducing them I Like Your Colors will tell you exactly what they are. Simply type in the site URL and you will be given a graphical representation of the colors and their numbers. Here are the results from the Mashable site:
The Firefox Addin Colorzilla not only provides an eye dropper and a color picker tool but allows you to analyze and save a color palette of any webpage.
DOM Color Analysis Results
Color Palette Generators
Then there are the many color palette generators. A few stand out from the crowd with regard to features and ease of use:
Adobe Kuler allows you to explore and vote on color schemes created by others as well as create, save and share your own. You can generate a color theme from scratch or use colors from an uploaded image or from Flickr. If you are not feeling creative you can choose from the gallery of user created schemes.Your swatches can be downloaded as Adobe Swatch Exchange (.ase) files for use in Adobe CS (2,3 and 4) programs. Kuler is integrated into CS4. If you do not have these Adobe products an Adobe Air application, Color Browser, allows you to import and save downloaded .ase files to.organize your favorite color palettes locally.
Color Lovers offers simple and more advanced color palette creation tools; although I find the simple tool harder as it offers no suggestions as to color combinations. As with Kuler you can browse and search for user contributed color palettes and use these yourself. Color lovers provides a whole host of other features to help you with your creations. Vote on the user created palettes and patterns and submit your own. View a showcase of websites to keep up with color trends. Connect with others via forums and groups. Follow their colorful blog. Proclaim your love of Color Llovers to the world by purchasing their T shirts.
Aviary Toucan allows you to create a color palette from scratch or choose colors from imported images (from Flickr, Facebook, Picassa, by URL or from your computer). A “color deficiency preview” shows you how a color palette will appear to those with various different kinds of color blindness.
Color Jack has two tools, Color Sphere and Color Studio, providing you with plenty of ideas and suggestions as well as catering for your own creativity. Export your creations to a bookmark, delicious, illustrator, photoshop or to a URL.
Colors On The Web has 3 basic color tools and mixers as well as articles covering color theory, color terms, combining colors and contrast..
Absolute Color Picker is a free downloadable program that lets you select and pick colors using various color models. It also features a color picker, color scheme generator, color history builder, color scheme management system, screen color grabber (eyedropper)
If you just prefer to choose from existing color palettes rather than create your own there are a number of sites, in addition to those mentioned above, that offer listings with search capabilities including:
- ColorCombos – they also have a tool to “grab” colors other websites.
- Colors on the Web.
- Color Schemer Gallery The Color Schemer products are not free but you can use their gallery and forums without buying..
- Color Hunter is different in that its user created palettes come from uploaded images and its tags are based on the type of image as well as colors.
Yet more tools
Your header image needs to be in line with the other colors on your site. You may have an image already chosen and then base your other colors on this. If not, Idea Labs clever MultiColr Search Lab can help you choose images using colors you have already decided on or just give you ideas for an overall color palette This tool searches through 10 million Flickr Creative Commons images based on your choice of up to 10 colors. They also provide other tools which search the Alamy stock photo site.
Google have very recently integrated color search tools into their Image Search. You are able to filter Google images by the predominant color. Click on “All colors” above the search results and you can choose one of the 12 available colors based on your search terms. For example this was a result of a search for beach sunset filtered by the color pink:
To ensure accessibility for those who cannot distinguish colors easily there are tools to check for legibility and contrast on your site. In addition to the Color Deficiency Preview tool in Toucan, ColorSelector is free desktop software from Fujitsu for judging the legibility of background and text colors. The online tool, Color Accessibility Wheel, shows you how a background and a foreground color will look to those with three types of color blindness, based on colors you choose.
You may not be interested in whole palettes of colors but just want to know the details of one particular color you see online. Eyedropper tools are the simplest way to accomplish this.
- Instant Color Picker is free to use on one machine, with nag screens, or to buy. More than a basic color picker, this tool allows you to zoom in on websites, save up to 20 colors and copy color swatches as bitmap and paste it to other applications. You can also test color combinations using various layouts.
- My trusty favorite program MWSnap is a screen capture tool which includes a color grabber and measuring tool.
- If these are more than you need try the more color grab only ColorSelector for PC or Mac from Fujitsu or ColorPic
Finally, for WordPress users the Theme Tweaker plugin displays the existing colors from your current theme, and gives you a color picker to replace them. You can also change colors in bulk by for example inverting them, converting them to greyscale.. Once you have chosen your colors, you can preview or activate the new theme. You can save your new stylesheet locally and then upload to your blog server to replace your current theme or create a child theme.
There are a whole host of Firefox addins that will help you with your site colors which I will cover in my next post.
You now have the tools at your disposal to choose your site colors but may not have the know how to implement them into your theme. In upcoming posts I will provide you with instructions and details of tutorials and tools you can use to help you with your CSS stylesheet coding.