05: Value (Not Color) Codes

In this course I will remove color so you can focus on the important topics necessary to control CSS. Color is easily added after your application works well and is understandable in monochrome. With that in mind, I'm going to teach you about values instead of color.

The concept of values comes from painting and representational art. "Representational art" is any art where the painting or drawing tries to look like a real thing. A painter sees a basket of apples, and the painting looks like a basket of apples. There's wide variation in "looks like", with one end being photographic and the other end being almost totally abstract but still viewable as "a basket of apples". This is different from abstract art where the painting or drawing doesn't try to look like any particular thing, but even abstract art still has to think about values in the art.

A value is simply the level of dark vs. light. If I'm doing a painting of an orange with light on one side, the side that's receiving light might have a "bright value" or "lightest value", but the side that is has no light (the dark side) would be "middle value" or "middle dark value". If you have a gray object that's hit with a light from the side it might have a "middle value" on the lit side, and a "dark value" on the shadow side. I have blue eyes so the blue part of my eyes would probably be "light value" and the iris of my eyes would be "dark value".

When painters talk about values they use either a 0-9 scale to say how dark or light something is, or they use words like "middle", "light", and "dark". While painters will refer to a 0-9 scale they really only use 3-5 main values, and might add 2 more for extreme darks or extreme highlights. Very rarely do they actually calculate out exactly 9 values since most people can't really tell the difference between that many shades of gray without training. Typically painters will focus on three main values:

They'll do most of their work in those, then expand that to 5 values as they refine:

Finally, when a painter gets to the very end they might need to add on extreme accents of light and dark, at which point their palette of values expands to 7:

Then, to be complete all of the values you would probably ever need in the full 9 scale are:

The key thing to remember is that you can translate the human idea of "a dark color" to an actual numeric measurement. Painters tend to be confused about whether "9 means most white" or "9 means most dark", but you'll find in the next section that using 9 for whitest and 0 for darkest matches up better with CSS color codes.