A Simple Color Tool Built For Learning [Screencast]

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.


« »

Download a free sample from my book, Design Fundamentals.


  1. Hi Steven, just want to let you know how interesting, clear and insightful your blog is. I am not a designer. I know nothing about design. But I want to understand and feel fascinated by the world I am glancing over. Your posts have opened a window for me. Thanks a million for the knowledge you share with us, your far-away and unknown readers!
    Laura, Caracas

    • Thanks Laura. That’s nice of you to say and always nice to hear. It’s hard to know if the things you write are helping and connecting with others so it’s always good when someone lets me they are or aren’t for that matter.

  2. Hi Steven,

    The colour tool looks really useful. I too am trying to improve my knowledge of colours and my scheme picking skills. I’d love to experiment with the tool, have you put it online somewhere? Or have you got the code on github or somewhere so I could have a play locally?



    • Thanks Colm. I haven’t put in online yet. I meant to work on it a little more first, but I haven’t had the time. I did promise I would place it online somewhere though, didn’t I?

      I’ll add it to the top of my list. If I have time I’ll put it somewhere this weekend or at least add the code to Github so you and others can play with it. If I don’t get to it over the weekend, I promise I will during the week.

  3. This is a great screencast. I would absolutely use this tool. Great job and cant wait to see this tool in full action.

    • Thanks Shad. I placed the tool on GitHub. A few people asked me to put it somewhere.

      I wish I had more time to work on it. I’ve been collecting some ideas for what I could do with it, but I haven’t had any time to work on them. At the moment the tool is just what you saw in the screencast and still rather basic.

  4. Hi Steven, I’ve only just learning about colour and your explanations here and elsewhere have been very helpful.
    Did you ever make this tool available

Leave a Reply

Your email address will not be published. Required fields are marked *