11 Mar 2013

10 Free Tools to Pick and Test Your Perfect Color (for Better Usability)

There are a lot of elements to making a good website that you have to consider. Fonts, borders, headers, general layout, accessibility… point after point to check and recheck. It can be a little bit hectic, but ultimately the work pays off. But that doesn’t mean you can’t take shortcuts where you can find them.

One of my favorite types of shortcut is color testing. You can find a ton of tools out there that were created to make the process a little bit easier. Sometimes a lot easier. These are my ten personal favorites.


1. Colorblind Web Page Filter

Colorblind Web Page Filter
The colorblind are usually not going to be able to see a website as it actually is. There isn’t much you can do about that, as compensating for every single one is usually impossible. But you can at least make sure they can see everything, such as background images and font colors. Just use this helpful web page filter that will show you how your site looks from the point of view of different color visual deficiencies.


2. Color Ramp Creator

Color Ramp Creator
Every once in awhile you might find yourself needing a color ramp. This allows you to easily make one, adjusting the hue value, hue shirt and base color richness on a tester picture. They have four, eight or sixteen step available.


3. Piknik

Piknik
This is one of my absolute favorite designer websites. It works by allowing you to move your mouse across the screen to create a new shade or color. That’s it, the entire page will show the color. You can click to lock it, and it gives you the RGB, HEX and HSL details. You can also favorite or copy it.


4. Color Scheme Designer

Color Scheme Designer
Come up with an entire color scheme with this simple creator. It provides a color wheel with warm, cold and intermediate tones. You are able to select the mono, complement, triad, tetrad, analogic and accented analogic tones. It creates a simple colro board, and lets you see an example of a site using the colors in both light and dark.


5. Pictaculous

Pictaculous
Pull the colors from an image. Just upload an image or browse their gallery. It will give you a palette using all the colors in the photo, so you can seek it out for your own design. Simple to use, effective and accurate.


6. Accessibility Color Wheel

Accessibility Color Wheel
Test the accessibility to colors on your background, foreground and even invert them. It shows it all through text to the side, then gives you the hex value. You can also put in a hex value in order to bring up a specific color.


7. Kuler

Kuler
This is an incredibly popular site that lets you create your own color palettes, or else see other people’s. Used for both web design and home design/decor, you will be sure to love the features here. You can even join their community to connect with others.


8. 0 To 255

0 To 255
Tones are everything when it comes to color. You can find the perfect one of any shade here. Just click on a main color to begin, and it will show you all the tones with their allotted code. There is no sign up involved, and you don’t even have to connect via a social network.


9. ColorHexa

ColorHexa
Type in a color value and get the full information about it. That includes gradients and color blends. Don’t know the color value? Check out their full list to find out.


10. Contrast-A

Contrast-A
Create a palette by selecting several colors and finding the very best combination of tone. This one is simple to use but more feature heavy than most. You can also customize if with different ratios and levels, including the side and ratio of text.

Know of any excellent tools for finding and testing the perfect color scheme for a site? Let us know in the comments.