Shades of Grey
Perceptual gray scales are a method for creating shades of gray that account for the way humans perceive brightness. Unlike evenly divided linear scales, perceptual gray scales ensure that the shades appear visually consistent. This approach is based on the fact that human vision interprets brightness nonlinearly, requiring careful adjustments to create a balanced gradient.
Gradient
Human visual perception of brightness, like that of many other stimuli, is approximately logarithmic. Thus a linear sequence of grayscale values does not subjectively appear to occur in even steps. Using HSL (hue, saturation, lightness) as our color model, we can do some experiments to illustrate this.
You may know these numbers from font weights. They are used to eliminate weird wording like dark, darker, darkest, but what is in between. So here you go, a granular percentage abstraction which you an easily add.
Day and Night
The current theme adjusts to your system settings by default. You can also toggle between light and dark themes manually.
Try for yourself and see how it works compared to a linear scale!
Lightness
\[L = c \cdot x^k\]
Choose value for \( k = \) 1.13
We calculate the grayscale lightness values using the above power function.
- \( L \) is the lightness value (scaled between 0 and 100).
- \( c \) is a scaling constant to fit values the range [0, 100].
- \( x \) is the index of the gray swatch.
- \( k \) is the perceptual tuning exponent, adjustable via the slider.
Saturation
\[S = c \cdot x^k\]
Choose value for \( k = \) 2
We calculate the grayscale lightness values using the above power function.
- \( S \) is the scaled saturation value.
- \( c \) is a scaling constant to fit the range [0, 100].
- \( x \) is the position (normalized 0-1) for the saturation adjustment.
- \( k \) is the perceptual tuning exponent, adjustable via the slider.
Hue
Self-explainatory, but usually you choose a color opposite of your primary, or in that direction.
About the Concept
The science behind perceptual gray scales lies in psychophysics, the study of how physical stimuli relate to perception. Human vision is more sensitive to changes in darker tones than lighter ones, meaning a small change in intensity in a dark gray appears more significant than the same change in a light gray. To account for this, a process known as gamma correction adjusts intensity values, creating a perceptually even progression of brightness. Additionally, perceptual gray scales sometimes include a slight hue to make the grays more engaging without disrupting their neutrality.
Clarity
The concept of perceptual gray scales originates from color science and the development of display technologies. Early cathode-ray tube (CRT) screens, for example, required gamma correction to match the intensity of emitted light to what users perceived as consistent brightness. Artists and designers have long applied similar principles, understanding that balanced tones create depth and harmony. Modern user interface design builds on this by incorporating perceptual gray scales to reduce eye strain and maintain clarity across light and dark themes.
Perceptual gray scales focus on lightness, the perceived brightness of a color, rather than luminance, which is the measurable intensity of light. This distinction ensures that the grays align with how humans experience them visually. By applying gamma correction and adjusting tonal spacing, perceptual gray scales create smoother transitions, particularly in gradients.
One key advantage of perceptual gray scales is their ability to provide visual comfort. Evenly spaced shades feel harmonious and reduce jarring transitions. They also create opportunities for nuanced design by allowing small amounts of hue to add subtle personality while retaining a gray's neutrality. This approach is frequently applied in design systems, such as Material Design and Tailwind CSS, to enhance usability and aesthetics.
Perceptual gray scales combine insights from science and design to ensure that gray tones feel balanced, comfortable, and visually engaging. By addressing how humans perceive lightness, they improve the quality of gradients, interfaces, and overall user experiences.
How Perceptual Gray Scales Work in HSL
The HSL (Hue, Saturation, Lightness) color model provides a simple yet powerful way to apply the principles of perceptual gray scales in CSS. In this model:
- Hue controls the color. For grays, this is often neutral (0) or slightly shifted (e.g., 240 for a cool tone).
- Saturation affects the richness of the gray. Small values (e.g., 2%-5%) ensure the gray doesn't look flat.
- Lightness determines how light or dark the gray appears.
Example in CSS
-
Lightness values (
95%to15%) are spaced nonlinearly to align with human brightness perception. -
A small hue value (
240, for blue) adds a cool, modern undertone. -
Low saturation values (
2%-5%) prevent the grays from feeling dull while maintaining neutrality.
/* Variable definition */
:root {
--color-gray-100: hsl(240, 5%, 95%);
--color-gray-200: hsl(240, 5%, 85%);
--color-gray-300: hsl(240, 4%, 75%);
--color-gray-400: hsl(240, 4%, 65%);
--color-gray-500: hsl(240, 3%, 55%); /* Neutral */
--color-gray-600: hsl(240, 3%, 45%);
--color-gray-700: hsl(240, 2%, 35%);
--color-gray-800: hsl(240, 2%, 25%);
--color-gray-900: hsl(240, 1%, 15%);
}
/* Usage */
body {
background-color: var(--gray-100);
color: var(--gray-900);
}
.button {
background-color: var(--gray-500);
color: var(--gray-100);
}
Conclusion
By leveraging perceptual gray scales with HSL, you can create gradients and themes that feel natural, balanced, and comfortable for users. This method is particularly useful in modern interfaces where clarity and aesthetic appeal are essential.
Resources
Chromatone
A playful way to explore the HSL model.
Perceptual_Greyscale.pdf
Paper about perceptual greyscale from Max Planck Institute
Perceptual Color Adjustment for Figma
Create perceptual color scales much better than this page ;)
Credits
Interactive editorial by
Tilman Porschütz.
November 2024