When making digital art, I would often be annoyed by the artificial impression of my colors. Wether I was using Procreate or programming in Javascript, the results would often look so ... well... digital.
Looking around in the digital art scene I found out, I'm not the only one with this issue. There seems to exist some kind of a digital art color gamut, which makes this art stand out. And not always in a good way...
I started Googling around to find some answers. As always a fully new and interesting universe appeared. I will no share every detail here with you, but just of the important lessons I learned.
A brief visit to Munsell
Do we really need to go back to this guy born in the nineteenth century? Oh yes we do, because this man was an artist as well as a scientist. So he didn't only understand the nature of color, but also how they affect people.
I'm not going to explain all about the nifty and intricate details of the system. You can read all about that on Wikipedia. I'll just show you why his system is really top of bill for artists. The great thing about this system is that it is calibrated to what people really experience. I'll show you what I mean.
If you're really into it, you can go to this site to even better understand what a genius he was.
Comparing my standard colors with Munsell's color circle
We - digital artists - usually just apply the sRGB-gamut to our works. Just because it is probably the default on our tools and everything from designing to displaying and printing works smooth like that.
Nothing wrong with that! But we need to realize, that sRGB doen NOT cover all colors! It's a sub-set of nature's colors that can be reproduced by our equipment.
Let's have a look at the diagram below. It shows the standard IEC 1931 gamut, containing all visible color within the horseshoe shaped area. Within this area, the sRGB triangle is drawn; it contains the colors that can be displayed on your computer. The colors outside the sRGB triangle - the gray area in the picture - cannot be displayed! That's quite a large chunk...
What I did
First step
To compare my usual sRGB colors with Munsell, I started with copying the twenty colors in swatches from the circle above. This picture shows the Munsell color circle with maximum Chroma (saturation), of which all colors fall within the sRGB limits.
Second step
I made swatches with my standard sRGB gamut. Twenty swatches, each separated 18 degrees (360 / 20 = 18) and every color at full saturation (100%) and mean lightness (50%).
For comparison, I made a third set of swatches containing the standard web colors. But since there's only 16 of those colors, the set is not really comparable.
In comparison with Munsell's balanced colors, some of the HSL-color really are way out of range.
Especially the cyan, green, magenta and even blue can be much lighter and saturated than f.e. the red, orange, yellow and purple.
I don't even want to discuss the standard RGB-web colors, because they're so limited! Those colors are useful, of course, but only when you have a specific purpose, such as in vintage pixel art.
In the animation below, the color wheel of my favorite app is stepping through the Munsell color circle. It really shows the irregular distribution of the Munsell colors along the wheel. And remember: the Munsell colors are the regular distribution according to our human perception!
My lessons learned
- The Munsell colors are not evenly distributed around the circle. There's relatively a large part use for greens. The steps of the color wheel are larger at pure blue, green and red. Other colors are closer together!
- Do not trust the color wheel of your favorite drawing app! It won't give you exact complementary colors and it wont give you equal lightness!
- Go easy on the GREEN-CYAN-BLUE series of colors. Keep the lightness down from the maximum
- Likewise on MAGENTA
- For RED, ORANGE and YELLOW, don't mind to use the maximum lightness-saturation
- Same for PURPLE
Extra: Color codes
As and extra, I wrote down tbe color codes of the swatches. So you can do some experimenting yourself.
### Munsell color circle with maximum chroma (within sRGB gamut)
color: hsl(345, 100%, 47%); # Munsell's red
color: hsl(22, 100%, 49%);
color: hsl(34, 100%, 47%); # orange
color: hsl(42, 100%, 47%);
color: hsl(51, 100%, 47%); # yellow
color: hsl(58, 100%, 47%);
color: hsl(71, 100%, 42%);
color: hsl(131, 100%, 40%);
color: hsl(163, 100%, 33%); # green
color: hsl(170, 100%, 33%);
color: hsl(177, 100%, 32%);
color: hsl(183, 100%, 34%);
color: hsl(190, 100%, 34%); # blue
color: hsl(196, 100%, 35%);
color: hsl(205, 100%, 37%);
color: hsl(270, 100%, 49%);
color: hsl(288, 100%, 39%); # purple
color: hsl(306, 100%, 36%);
color: hsl(323, 100%, 41%);
color: hsl(333, 100%, 44%);
### HSL-colors with maximum saturation in sRGB gamut
color: hsl(0, 100%, 50%); # sRGB red
color: hsl(18, 100%, 50%);
color: hsl(36, 100%, 50%);
...
color: hsl(324, 100%, 50%);
color: hsl(342, 100%, 50%);
...