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.

Values, Contrast, Subjects, and Grounds

Designers care about contrast because the higher the constrast the easier it is to read and process things on a web or printed page. Also, visuals with higher contrast sell better. In other contexts this isn't necessarily true, but for humans reading text and buttons quickly, it's very important to increase the contrast. But, increase the contrast of...what exactly? Just make the text dark?

Contrast only exists when one shape is placed inside a larger shape. It's impossible to have black text floating in space with nothing around it but the void. Who knows, maybe that's how Cthulhu reads, but for us humans everything has a background, or "ground". The text that you want to make high contrast is only considered "high" or "low" contrast when compared to the background you place it on. In painting we would call the text the "subject" since everything has a ground, so you might have a button, a checkbox, or a simple line. Those would all be "subjects" placed on a ground.

Another key concept is that contrast is the difference in values of the ground (aka the page) compared to the subject (aka the text) and has almost nothing to do with color. Color can add certain perceptual effects (such as making things seem brighter than they are with higher chroma), but in general color only confuses contrast rather then "fix" it.

What do I mean by "contrast is the difference in values between ground and subject"? If I use the 9 point scale, and I set the ground to a value 9 (pure white), and the text to a value 1 (pure black), then I can measure the contrast as 9 - 1 == 8. The subject (text) is 8 values different from the ground (background), and that is a high contrast:

However, if I set the background at a value 5 (middle), and set the text to value 3 (light middle) then 5 - 3 == 2 contrast, which isn't as high as 8.

Simple. Once you remove color the contrast issues are easy to figure out. Just subtract the higher number from the lower number of the subject and ground and that's your contrast. If you need to increase the contrast then make that difference a larger number. Can't read your fancy value 5 logo on the value 3 header? Then you need to move the value of the logo, header, or both farther away in value.

Translating Values to CSS

The easiest to understand color system in CSS is "hsl", or "hue, saturation, luminance." Hue is the name of the color, like "red", "violet", but in CSS this will be some number. Saturation is how intense a color is, with 0% meaning the color is totally gray. Finally the luminance is how light or dark the color is, and that's what we want to work with here.

That means, we can easily create a value scale by setting the hue and saturation to 0 and adjusting the luminance like this:

I've found this scale tends to balance the values out well such that you can actually see the difference between them, but using 9 values is still not practical. I suggest you stick to only these 5 values to start off since they give you enough to make things visually sophisticated, but also give you a good range of contrast. 5 values is also a small enough number that you could memorize these codes to make them easier to use.

As you work, if you find you need more values then use the others from the full 9 value scale, but focus mainly on these 5 for most of your design. Always be practical though and if you find you need to "tweak" a value to make something work then do it.

Using Value Numbers in CSS

Finally, how does one use these color codes? In CSS anything that can take a color name like "red" can take a color code, and the color codes are preferred over the names. I use the names mostly for debugging purposes (or if I'm lazy and could care less). I first create a piece of CSS that establishes these values as variables:

:root {
  /* light values */
  --value9: hsl(0, 0%, 100%); /* not used too often */
  --value8: hsl(0, 0%, 99%);
  --value7: hsl(0, 0%, 90%);
  --value6: hsl(0, 0%, 85%);
  --value5: hsl(0, 0%, 80%);

  /* dark values */
  --value4: hsl(0, 0%, 44%);
  --value3: hsl(0, 0%, 33%);
  --value2: hsl(0, 0%, 22%);
  --value1: hsl(0, 0%, 11%);
  --value0: hsl(0, 0%, 1%);
}

We'll learn about CSS variables more later, but basically if you put this at the top of your CSS file then you can use it like this:

p {
  background-color: var(--value7);
  color: var(--value2);
}

Now all <p> tags will have a terrible value 7 gray background with a low contrast value 2 text like this:

CSS variables make it easy to then adjust these values if you don't like them, or later add colors that you want without changing the rest of your CSS. Simply change the variables.

Lesson Challenge

Find another simple website to copy, but this time attempt to translate their colors to values using the system I describe here. There's a trick using your smartphone that should help you with this:

1. In your phone there should be an option to turn the screen to "monochrome" or "grayscale". This is an accessibility feature for people who are color blind so they can more easily read the screen. Find this feature on your phone.
2. Next, you should be able to assign a button click to turn this on and off. On my iPhone I have this set to triple press on the close button on the side of the phone.
3. Once you can turn your phone monochrome and back with a button click, open your camera and do it. This feature is an Operating System level feature, so every application is converted to monochrome no matter what, including your camera. The camera will still capture images in color.
4. Finally, aim your camera at the website you're trying to copy and like magic you now have a nice little monochrome lens to study it with off your main desktop computer. You can also load the website in your phone and switch the phone to monochrome to see what the website looks like in monochrome.

I use this trick with my phone to also help me with painting. Sometimes it's difficult to judge the differences in value between two things I'm painting, so I open the camera on my phone, switch it to monochrome, and have a look. Painters have been doing this for hundreds of years using black mirrors, red color glass, and other similar value viewing devices.