7 The mathematics of color
This chapter covers
- Converting color values between models
- Creating harmonious color schemes and accessible colors
- Switching between light mode and dark mode
- Creating interesting visual effects with blend modes
Most developers start with CSS colors such #ff0000 or hsl(240 100% 50%) without understanding what's happening under the hood. But here's the thing: colors aren't just pretty decorations. They're mathematical constructs that follow precise rules. Understanding these rules will help you create better color schemes, fix accessibility issues, and implement advanced color effects that would otherwise seem like magic.
Think of this chapter as your bridge between "I know how to use CSS colors" and "I understand how colors actually work mathematically." By the end, you'll be manipulating colors like a pro, creating accessible designs with confidence, and impressing your colleagues with your newfound color wizardry.
7.1 Color models and color spaces
To really understand the math behind web colors, you need to learn first about color models and color spaces. The next few sections provide the details.
7.1.1 The RGB color model
RGB is the foundational color model for all digital displays. It’s based on additive color mixing where you're literally adding light to create colors. Mathematically, RGB represents colors as triplets (R, G, B) where each component ranges from 0 to 255: