Color, the known and unknown
When studying the CSS framework Bluma, I found that it use a very smart way to determine the text color based on the bg color, utiliizing the
color luminance to decide to use black text or white text, which is interesting and I found some interesting facts to note it down.
Steven Bradley wrote an great article about color luminance, and here are some details:
- Our eyes have rods（视杆细胞）and cones（视锥细胞）to perceive light/dark as well as different color information; rods are responsible for seeing in low light and are sensitive to light/dark, while cones are responsible for distinguishing different colors. Moreover we have S-cones (blue), M-cones (green) and L-cones (red) for short, medium and long wavelength. – three primary colors.
Luminanceis the measurement of the intensity of light that reaches our eye, while
valueare only the perception of an object’s luminance.
Lightnessis the brightness relative to the brightness of a similarly illuminated white.
- Our perception of lightness (or brightness) don’t scale linearly with luminance. The perceived luminance is dependent on both light intensity and the specific wavelength of that light (a.k.a type of color).
- Every color has its own natural luminance levels.
- Saturation also affects luminance. If you reduce the saturation of a pure color to 0% the result is a 50% grey with a 50% value for luminance.
- differences between HSL, HSB, and HSV:
- HSB/V is measuring the amount of light
- HSL is measuring the amount of white
From WCAG’s Definition, the
relative luminance is:
the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.
WCAG also provides the formula for luminance:
For the sRGB colorspace, the relative luminance of a color is defined as
L = 0.2126 * R + 0.7152 * G + 0.0722 * Bwhere R, G and B are defined.
- if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
- if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
- if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
- RsRGB = R8bit / 255
- GsRGB = G8bit / 255
- BsRGB = B8bit / 255
Bluma strictly implements the spec above by having such Sass function:
Another similar implementation is documented here
Work With Color says:
Luminance on the other hand is a measure to describe the perceived brightness of a color
Contrast as in the distance of luminance between two colors
Color decisions need to consider luminance / contrast because it is key to usability.
HSL Color Picker
From CSS Tricks’ Definition:
To put it simply, the luminance of a color defines whether its brightness. A luminance of 1 means the color is white. On the opposite, a luminance score of 0 means the color is black.
NOTE: WCAG = Web Content Accessibility Guidelines
Notice 3:50 – that is crazy. Remember that our eyes could be cheated.
Colorizer have listed all common color models.
The RGB color model is an addictive color model in which red, green and blue light are added together in various ways to reproduce a broad array of colors.
The RGB color model is addictive in the sense that the three light beams are added together, and their light spectra add, wavelength by wavelength, to make the final color’s spectrum. This is essentially opposite to the subtractive color model that applies to paints, inks, dyes and other substances whose colors depends on reflecting the light under which we see them.
The choice of primary colors (red, green, blue) is related to the physiology of the human eye; good primaries are stimuli that maximize the difference between the responses of the cone cells of the human retina to light of different wavelengths, and that thereby make a large color triangle.
The difference in the signals received from the three kinds allows the brain to differentiate a wide gamut of different colors.
The color triangle represents the range of colors which could be reproduced by additive mixing of non-negative amounts of three primary colors.
- integer range (0,255) - decimal / hexadecimal
- larger integer ranges for each primary color (High-end digital image equipment)
From Wikipedia Standard Illuminant:
The International Commission on Illumination (usually abbreviated CIE for its French name) is th body responsible for publishing all of the well-known standard illuminants.
There are many standards like Illuminant A, B, C … The most common used one is called Illuminant D, which:
… represents phases of daylight, … the D series of illuminants are constructed to represent natural daylight. They are difficult to produce artificially, but are easy to characterized mathematically.
A white point is a set of tristimulus values (a set of values of 3 primary colors) or chromaticity coordinates that serve to define the color “white” in image capture, encoding, or reproduction. Depending on the application, different definitions of white are needed to give acceptable results.
SPD = Spectral Power Distribution (光谱能量分布??)
色度 指的是色彩的纯度，也叫 饱和度 或者 彩度。
The CMYK color model (process color, four color) is a subtractive color model, used in color printing, and is also used to describe the printing process itself.
- C - Cyan
- M - Magenta
- Y - Yellow
- K - Key (black)
Colorizer 使用了圆锥表示 HSL：
- Saturation（S），饱和度，是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0~100% 的数值
- Lightness（L），亮度，取 0~100%
An JS implementation based on the spec:
… there is no substantive evidence that support a universal system of color meaning. It’s not that colors themselves have specific meaning, but rather that we have culturally assigned meanings to them.
… it’s important to understand who your target audience is and how your audience attaches meaning to color.
- warm colors: red, orange, yellow – passion, energy, impulsiveness, happiness, coziness and comfort
- cool colors: green, blue, violet – calm, trust, professionalism, also sadness and melancholy
- HSI (Hue, Saturation, Intensity) ???
- Color Theory, The Color Wheel And Color Schemes
- Whitespace: Less Is More In Web Design
- Design Basics: Repetition To Create Visual Themes
- Color Theory Basics
- Basic techniques for combining colors
- Luminance is More Important than Color, The Refracted Light
- Color Systems — Part 1
- Color Systems — Part 2