Select colors based on how viewers actually perceive them.
Use Munsell colors to...
1.
Indicate UI modes clearly.
2.
Compare data with minimal bias.
3.
Time travel into the future!
As designers, we have a lot of color spaces to choose from (RGB, HSV, HSI, CMYK, etc.), but none of these take into account the end-to-end viewing experience.
To do so, you need to consider both how colors are illuminated (screen) as well as how the human eye processes them (brain).
That's where Munsell colors come in. Albert Munsell divided up the color space into perceptually uniform and independent dimensions based on how the eye processes them.
Behind the scenes, it's quite tricky to work with — the resulting color space is not a clean little box, cylinder, or sphere. But the Munsell color system is one of the best models we have to pick colors that are truly uniformly perceived.
And as a designer, that's awesome.
Step 1. Calibrate
The screen you're using changes how your design is perceived. Ideally, all screens would be the same, but they're most definitely not.
So first things first, make sure you're using this on the screen you care about designing for — a particular phone, tablet, laptop, projected screen, etc.
Now drag the sliders below so that each box blends; this approximates the screens gamma parameters. When viewed from a distance, the dots in each section should fade and appear uniform.
2.20
2.20
2.20
Step 2. Select a Base Color
Chances are you already have a color (or colors) that you want to use. So go ahead and select it below.
or manually set the Hex.
Hue
Value
Chroma
Note that the non-linear nature of the Munsell system means that you can easily max-out the Value dimension. This makes sense; our eyes are more sensitive to greens and reds than blues.
Make sure the Value of your color isn't maxing out before continuing.
Step 3. Meet your Munsell friends
Hue friends
4
5
6
7
Chroma friends
4
5
6
7
Value friends
4
5
6
7
Step 4. Take them out for coffee
Yay, colors! But now what?
The colors generated above are special. Assuming you set the gamma correctly (step 1) and picked a color with non-extreme Munsell value (step 2), they should be very pleasing to the eye.
Notice how the Hue friends (same Value and Chroma) all feel like the have the same importance. No single color should stand out more than any other, and that's ideal for representing data types. So your Hue friends are a goto set of colors when indicating different types, modes, or classes of information and interaction.
The Chroma friends are ideal for indicating the strength or severity of something. Things like: How much rainfall? How loud is the volume? Or what does my heart-rate look like over time?
And the Value friends, well they're great for conveying importance. Since the Munsell value is equivalent to how well lit a color is perceived to be, you can virtually shine a spotlight on something (or dim something out) by selecting a member from this group. For UI designers, these are great as rollover (highlight) and disabled (dim) interaction states.
Remember, each of the friend groups have different preferences and talents so don't get 'em mixed up!
Have at it
Feel free to use these colors however you wish!
You're also welcome to use the code under the hood however you like. It's all just html/css/javascript so fiddle around and use it to make more awesome things.
As designers, we have a lot of color spaces to choose from (RGB, HSV, HSI, CMYK, etc.), but none of these take into account the end-to-end viewing experience.