Everyone has a favorite color, but let’s say your favorite color is Red. What shade of red? What’s the hex value? RGB? RYB? CMYK? Pantone code? Is it a websafe color?
My high school colors were gold and blue, yet one year the yearbook committee decided to make the yearbook shades of one color to save some money on printing. For some unknown reason they chose the color Red for the yearbook cover. They decided that the lettering would be 90% red, and the background color would be 50% red. Can you guess that we ended up with a Pink yearbook? We all learned a lesson in the importance of color that year.
When designing a website, it’s important to choose colors that compliment each other well and are consistent with your brand. Here are the three tools that I use the most that will help you to do just that:
ColorZilla: This is a powerful Firefox add-on with a collection of tools to help you select colors for your web projects. The Eyedropper tool gives you the RGB and hex values for anywhere that you point to on any webpage, as well as the CSS selector of any area you point to. The Ultimate CSS Gradient Generator helps you to create CSS gradients that you can save and bookmark to reference later. Color Picker and Palette Browser help you find just the right color by allowing you to select colors from a list, thumbnails, or palette and provide the color values in HSV, RGB, Lab, CMYK, and Hex. In addition, these tools provide the CSS code that you can copy and paste into your style sheet. Want more? Use the Webpage DOM Color Analyzer to analyze the colors on any page on the web. It will give you a color palette for the selected page, and list each color with values and CSS selectors it’s associated with.
Javascript Hex Color Preview: I use this tool all the time. It comes in handy when you’re looking at a bunch of code (especially CSS) with hex values and you can’t remember what the color actually looks like. Just enter the hex value into this web-based tool and the color renders in a nice square to see if it’s what you thought it was. Use this tool in combination with a screen shot to create the perfect palette to show your customer or your web designer.
COLOURlovers: You’re not the only one in search of the perfect color palette. COLOURlovers is a web-based community of people who love color! Browse over a million existing color palettes or create your own. You can also browse nearly a million seamless patterns (think web page background image) or, you guessed it, create your own. Start from scratch or color in an existing template to really customize something great for your site.
What are some other tools you use to select colors for a website?
