A Simple Color Tool Built For Learning [Screencast]

Posted: 23 May 2013 05:30 AM PDT

As I’ve said on a few occasions, I don’t consider color one of my strengths as a designer…yet. It’s one of the reasons I set studying color as a goal for this year. On Monday I began sharing my new exploration of color and I mentioned working on a color tool to help me. I also said I would show it to you today.

I decided the best way to do that was with a screencast and so in addition to the simple tool I built here’s my very first screencast.

Note: This post includes a screencast. If you don’t see the screencast above, Click here to watch.

Don’t get too excited about either. The tool is very basic and meant as a learning tool for myself rather than something to use for choosing a color palette and the screencast is likely rough given it’s my first attempt at one. Hopefully you’ll find something worthwhile in both.

Why I Built a Color Tool

Generally, it’s not a problem for me to make some color decisions. For example I usually know in my head what I want to use as a dominant color and I even have a sense of what colors to pair with it as as subdominant and accent colors.

What turns out to be somewhat problematic for me is finding that exact color I’m looking for with so many possible choices. Why settle your cursor in exactly one spot on a color picker and not a nudge to the left or right just a bit. Naturally part of the reason relies on an eye for color, but I’m looking for deeper understanding about why you would make one choice over another.

Right now I tend to choose an initial color with what I hope is an improving eye and then use my tool of choice (ColorSchemer Studio) to point me to the rest of the colors I’ll use in a palette. The end result is usually something that works, but never quite what was in my head.

I also have a tendency to rely heavily on various grays and use color sparingly. It’s a safe way to work with color, but I’d like to have the skills to do more. I thought building a tool that would only include a few things I’m currently learning about would help me learn those things. As I learn and explore more about color I’ll add more to the tool.

The Color Tool

If you want to see what I built the screencast is the best way to see it. If you want a quick version of what it does read on.

At the moment it’s 4 simple blocks in the center of the page, each with a default background color. Adjacent to each are a series of sliders and inputs to adjust the hue, saturation, and lightness of the block. There are also RGB and hex displays so you can see their resulting values as you make adjustments to the hue, saturation, and lightness.

One reason for this set up is so I can see the mathematical relationships between colors. I’m curious to know things like how would I increase saturation only by changing a hexadecimal color value.

Another reason is so I can quickly find things like the complement of a specific hue and see how it looks against the initial color or how a single hue looks over several different saturation or lightness values.

Again it’s all very simple and basic at the moment, though I do have ideas for how to expand the tool and develop what I think will become a more useful learning tool.

Watch the screencast. It’s about 13 minutes long and it’ll walk you through the tool and why I think it’ll prove helpful. Let me know what you think of it and any suggestions you have for improving it. It’s not currently online, but if you think it would be useful for you or would like to play with it that can easily change.

Also let me know what you think of the screencast. I made a couple of mistakes when recording that I managed to correct well enough during editing, but I could certainly use some feedback to help me make the next one better.

Thanks.

The post A Simple Color Tool Built For Learning [Screencast] appeared first on Vanseo Design.