Color Formats
How do we describe color?
What color is the last food you ate? The simplest description is a range of hues: red, blue, yellow – you get the idea. For choosing and talking about color, using hue becomes unclear quickly – is chartreuse a green or yellow? Is there a real difference between red violet and violet red? What color greens are “kiwi green” and “lime green?”
[ image of green kiwi and green lime ]
To separate these two greens, we could use words like “bright,” “deep,” “dull,” or “vivid,” but how do those words translate to a pixel* color?
[ optional image of a figure looking at a kiwi at their computer, different color options popping up above their head that could all be “kiwi-colored” ]
[ gameplay screencap(s) : the same objects different colors in different games ]
*pixels are the tiny squares that combine to create color on digital devices.
We need a way to map these colors to exact values. Enter HSV… or HSB. And also HSL.
Hue, Saturation, Value / Black / Lightness
Hue describes a color with a single word.
A hue can be as broad as red, blue, cyan, green, yellow, or magenta – any color word in the entire spectrum of visible light.
[ image: visible light rainbow with assortment of color names ]
Saturation measures a hue’s intensity, separating vivid, lively colors from dull tones.
Think of saturation level as measuring how “colorful” a color is, with the lowest level being grayscale.
[ image: two tulips, one desaturated and one intensely red – caption “A desaturated color appears more washed out, like a pastel light rose.” ]
Old faded images are an example of desaturated palettes, while most children’s shows use highly saturated worlds.
[ mostly monochromatic palette(s) – i.e., sepia – Papers Please? – and possibly one that’s vibrant ]
Value** / Black / Lightness (interchangeable) all refer to the amount of light in a color, ranging from white to black. **Value gets used as a synonym for “level,” too – for example, “the saturation value is 50.”
Regardless of a color’s hue or saturation, a color with at the highest amount of lightness will be completely white, and will be black with none. “Low-key” palettes are dim and dark, while “high-key” lighting is brighter.
[ image(s) of low-key and high-key lighting, in games or photography / film ]
The digital world mixes red, green, and blue to create colors, each on a spectrum of 0–255. The higher the amount of each color. the more saturated the color is – so red (0) / green (0) / blue (255) is the blue-est blue.
[ images of color wheel or picker with RGB values (layout TBA) ]
When all colors are to the max (255) on our screens, we see white.
[ a few images of pastel colors, ranging up to white ]
Many of us think of bright light as no color, but white light contains all color wavelengths. Seeing blue in The Real World is seeing all colors of light absorbed except blue – and screens work this way, too.
[ diagram or light bouncing into object, blue reflecting ]
A set of red (0) / green (0) / blue (0) means there is no red, green, or blue in the pixel. What would the color be?