As web designers we all have our habits for project management. Some of us start with a wireframe, some of us start in photoshop. Some of us start with semantic code and layout their html structure first (that would be me). Regardless of how you tackle a new web design one thing is for sure, you’ll be putting great focus on color scheme. In fact, there are instances where we get hired solely for the purpose of changing the color scheme and branding of an existing website. I have spent plenty time using the Photoshop color wheel to find the color and/or shades of colors but I find it cumbersome. Do I really want to sit and wait for the splash screen to load the hundreds or thousands of processes PS requires when all I need is the color wheel?
I have experimented with a number of online solutions for color choices in web design over the years and have finally narrowed my list down to 5 tools. My hope is to simplify your process a bit or even better, get some more input from other designers out their who are willing to share the utilities that they keep in their back pocket (or bookmarks bar). Starting with the most basic, here are my top 5:
W3Schools HTML Color Picker
While the HTML Color Picker may not offer the ability to pick matching, contrasting or complimentary colors, I find it to be the simplest, lightest and often most reliable tool for finding a color that I can use. If you are like me, you often browse the web or your favorite sharing sites (Behance, Dribbble, Pinterest, etc) for inspiration. This handy little tool from W3Schools allows you to find colors that are slightly lighter or darker than your original source color. This is especially useful when adding hover, focus and active effects to your CSS.
For those of us that are lay, there is the minuscule added benefit of providing you with the hash symbol before the hex code. Think how many labor hours you can save by never typing shift+3 again! On a serious note, I use this tool daily for finding sets of 3 colors in the same spectrum that I plan to use in my current projects. One downside of the color picker is the inability to save colors that you have used for future reference. It’s a small complaint but something that the rest of the tools in my set include.
ColorPicker.com
I never said this list would win any awards for creative naming; we’re focused on color here, people! This is a great tool if you love what desktop editing software has to offer but prefer to stick to the web. As you can see from the image below, this is essentially a cloud version of the typical software based color wheel.
This tool has the added benefit of showing both the RGB and Hex colors which is great when you like to use a bit of RGBA transparency in your CSS. Unlike the color picker from W3Schools, colorpicker does allow the option to save a set of up to 9 colors for later use which is extremely convenient when working on a larger project. While the tool appears simple at a first glance, if you look below the primary tool area you will find, in very small font, links to create colors scheme based on various complementary patterns. It should be noted that these colors are shown in hex format only but you can easily use a quick copy and paste to discover your RGB output.
Color Scheme Designer
The third utility on our list is very much a more advanced a version of the basic ColorPicker. The base wheel allows you to start with a hue as a starting point and immediately shows a color scheme based on your chosen match/complement setting.
For the novice designer without a background in graphic design some of the settings in this tool may seem complicated or advanced but I encourage you to click around as most if not all of the features are intuitive and easy to understand. As a wheel based color picker this tool is probably my favorite based on the expansive number of color sets that can be created with a few simple clicks. It combines features from the previous mentioned tools and packages them in both an attractive and easy to use manner. I really enjoy the hover tool tip that shows the hex code for colors on almost every portion of their site, if you can remember 6 consecutive digits, it makes pulling colors off of this site incredibly quick and easy. Color Scheme Designer also let’s you choose palettes or settings at random if you’re feeling a bit stuck for inspiration. Maybe you’ll find a scheme that you wouldn’t have thought of on your own!
COLOURLovers
Who doesn’t love crowd sourcing? I tend to think there is great value in drawing inspiration from peers and other talented people. COLOURLovers provides exactly that; think social network for design geeks. This site allows users to name colors that they use and love and assemble palettes that they find to work well together. From single colors to 5 color sets, this collection provides and endless number of options that you can use in your designs.
With multiple browsing options you can look at the latest submissions, trending or popular colors and has pattern and shape sets that you can play with. COLOURlovers takes the design process a step further by even offering tools such as a seamless pattern generator that can be used online (lite version) or on your desktop (studio version). This is one of those sites that as a designer you could get lost on for hours but also serves incredibly well as a quick source of inspiration when looking for a color scheme for your next project.
Hailpixel – Swatch you doing?
Last but not least we have a bit of a wildcard. This tool for me, has been just as much a source of geeky entertainment as it has been a color tool. Created by Devin Hunt, this full screen tool converts your entire browser window into a color picker. Simply move your mouse around the screen and watch the hex color in the center change.
Clicking on any area of the screen saves the current color to the left side of your screen and allows you to continue picking more colors, thus creating your own palette. While I’ve had the most fun using this tool, it leaves the matching/complementing entirely up to you. So if you’re not confident in your color theory expertise, you may want to save this one for entertainment purposes. I have had friends tell me that while the tool is fun to use they found slightly confusing as you are unable to see the static color wheel and have to rely on your cursor position to show your position. In some instances it is also a bit tricky to find an exact color as the tool updates with great accuracy. All in all, I’ve had fun with it but I’m not sure I would use it for a production grade website.
Bonus Tool (Colorable):
Now that you’ve spent the time to select the perfect color combinations take an extra step to make sure your text is legible! Designer/Developer Jackson Black created a great tool that scores the contrast between two colors. Before you place that block of colored text over a new background, run the colors through Colorable – your visitors eyes will thank you!
Use Them in You Next Website Design
Hopefully I have opened your eyes to a few new color tools with this post. I would love to hear about and check out some of the sites that I didn’t mention. Feel free to drop some links below or tweet us anytime. Happy designing to all!