Color-Wheel for HSB and NeoPixels

Here is a helpful color-wheel for using NeoPixels with the HSB color mode. I had to make a printable version when I switched from the RGB to HSB mode and thought I would share it here. I go into more detail on my Instructable for a visual tone piano.

HSB stands for HUE---SATURATION---BRILLIANCE and is just another way to represent the colors for NeoPixel code. I have used the RGB (red, green, blue) mode for so long the HSB mode threw me for a loop until I drew myself a picture of how it works.

I would have probably never used HSB unless Adafruit's amazing Circuit Playground board started using HSB as its beginner-friendly color mode. Now, Microsoft's MakeCode visual programming platform also offers HSB as an alternative to RGB. So I had to learn it.

Here's a helpful color-wheel showing how the HSB color space mode works with NeoPixels. The image also shows the basic code used to set the color on Adafruit's wonderful Circuit Playground Arduino board.

I have used RGB, CMYK and even LAB color spaces in Photoshop and Illustrator, but had always avoided HSB for some reason. So I originally felt that HSB didn't give me the precise control I was used to. However, after using it for a while I have come to like it.

Being able to set a basic color with a single number, and modify its intensity with a second (and third) number is a quick and slick method. I might not be able to get the perfect sick-acid-green or a eye-popping-pink-gold with a single color number, but honestly, I don't need to for most of my applications. The 256 mixtures of primary color duos gives me enough choices for most basic applications. And it's certainly simpler for beginners.

The free MakeCode online programming environment lets you play with HSB color mode. The model (upper left) shows the result of changing the values. It's a great way to try switching from RGB to HSB without even owning a board.

I was so used to mixing color in RGB and CMYK modes that I thought it was simple. Then I watched some new users struggle to make the color they wanted. It was painful just to watch and I remembered how confusing and complicated it really is. Suddenly, the HSB mode made perfect sense to use as the default color mode.

Basically, the HSB model mixes from:

• pure red, 
• adds some green to make yellow, 
• then subtracts red to get pure green,
• adds some blue to get blue-green,
• subtracts green to get pure blue,
• adds red to get purple,
• and subtracts blue to return to pure red

The result is 256 hues and that's enough for most NeoPixel projects. The MakeCode environment exposes all three elemnts of HSB, so its a great way to quickly learn how to manipulate colors and intensity - you don't even need an Arduino, just used to online model and play with the values in code.

As an Amazon Associate I earn from qualifying purchases.
Shop through our Amazon links to help support this site.

Also find me on:

FACEBOOK -or- INSTRUCTABLES -or- YOUTUBE

Follow @tangoofthegeeks