Topics for today
- How color works
- Different color models
- Designing with color
- Accessibility & color
- Color appearance
A brief sample of color naming research:
// red, green, blue in [0-100]
let min = Math.min(red, green, blue);
let max = Math.max(red, green, blue);
let d = max - min;
let saturation = 0;
let lightness = (min + max) / 2;
if (d !== 0) {
saturation = d * 100 /
(100 - Math.abs(2 * lightness - 100));
}
let hue = 0;
if (max === red) {
hue = (green - blue) / d + (green < blue ? 6 : 0);
}
else if (max === green) {
hue = (blue - red) / d + 2;
}
else if (max === blue) {
hue = (red - green) / d + 4;
}
hue = Math.round(hue * 60 % 60);
rgb(100% 0 0)
is probably not the most vivid red your screen can produce! 🤯text-shadow
Type | Male XY | Female XX |
---|---|---|
Protanopia | 1.0% | 0.02% |
Deuteranopia | 1.1% | 0.01% |
Tritanopia | 0.002% | 0.001% |
Cone monochromatism | 0.0% | 0.0% |
Rod monochromatism | 0.003% | 0.002% |
Protanomaly | 1.0% | 0.02% |
Deuteranomaly | 4.9% | 0.38% |
Tritanomaly | 0.0% | 0.0% |
Total | 8.0% | 0.4% |
My mom says this is pink and white... I see teal and grey. What do you see? pic.twitter.com/1MqlWIGVR4
— Dylan Hawk (@dylanhawk_) October 13, 2017
The gamut of a digitally projected medium […]. Here, ambient illumination affects the result dramatically (gamut volume differs by a factor of six)Morovic and Sun, 2000b