Value: light and dark
Squint at a painting and the colors fade. What's left, light and dark, is what makes it work.
- Munsell scale
- 0 (black) to 10 (white)
- Lightest pure hue
- Yellow
- Darkest pure hue
- Violet
Value is how light or dark a color is, from black (at the extreme, Vantablack, which reflects almost nothing) to white, whatever its hue. Albert Munsell built it into his color system in 1905, with a value scale running from 0 for black to 10 for white. A canary yellow sits near the top of that scale and a navy near the bottom, even though both are strong colors.
Painters like to say value does the work and color gets the credit. Turn a painting to greyscale and it still reads if the values are right. Squinting is the classic trick: it blurs detail and hue and leaves the big shapes of light and dark. Girl with a Pearl Earring reads as a lit face against a near-black ground before you even notice the blue and yellow. Leonardo's sfumato, soft blending without outlines in the Mona Lisa, is value handled with extreme subtlety.
Hues have natural values. At full strength yellow is the lightest color and violet the darkest, which is why a yellow can't be deep and pure at once: darken it and it slides toward olive or mustard. Value also shifts with its surroundings (see simultaneous contrast). Judging value is often harder than judging hue, which is why ColorHub's eye gym drills 'lighter or darker?'
Value is the key to harmony and readability. Designers check text contrast by value, which is why yellow text on white fails and navy on cream works. Close values feel soft and atmospheric, far-apart values dramatic: compare the fog of Monet's Houses of Parliament or Friedrich's Wanderer above the Sea of Fog with the hard light of Vermeer.
Swatches
- Black · value ~1
- Charcoal · value ~3
- Grey · value ~6
- Silver · value ~8
- White · value ~9.5
Colors
Sources
- Munsell, A. H. (1905). A Color Notation. Boston: G. H. Ellis.
- Livingstone, M. (2002). Vision and Art: The Biology of Seeing. Abrams.
- W3C, Web Content Accessibility Guidelines (WCAG) 2.1, contrast ratio.
Hex values are screen approximations. Every page lists its sources.