When 255 × 0 Does not Equal Zero
March 3, 2020 First, a caveat: I am not an expert in color management and monitor display profiles. I also only understand the surface-level differences between the default color space of sRGB on the web and other newer models. This conversation will include discussions of both, and I’ll explain what I know and leave room (and links) for others to chime in with better explanations. Okay… now with that out of the way (and I guess… sorry for the early spoiler of what the article is going to address): Let’s talk the mathematics of blend modes! How blend modes work on the web today If you have used Photoshop (or bonus points for fellow Corel-Photo-Paint-in-the-1990s fans) or dealt with mix-blend-mode or background-blend-mode in CSS, you might be somewhat familiar with blend modes. When two layers or elements overlap while a blend mode is specified, a computation will occur at each pixel using the two elements’ RGB color values as inputs, resulting in a new color to display. There are many different modes like multiply and hard-light that each perform a different formula where elements overlap to visually present a different color. Most of the time, I suspect, designers scroll through different modes to see what looks the best to them, perhaps additionally adding an opacity to the elements to soften the effects. But since every mode has a specific formula, it is entirely possible to understand the resulting color just by looking at your two source colors. The web follows sRGB for its default color space. This happens for interpolating colors in animations and gradients, and it makes the math fairly straightforward. Even if you specify a value in HSL (with hue, saturation, and lightness), the resulting color will be computed as a RGB color (red, green, and blue). More options are coming in the CSS Colors Level 4 and Level 5 specifications, and there is plenty of talk on the working group Github about how the future might allow us to interpolate along different models. But as of today, blend mode math happens once for the red channel, once for green, and once for blue. We will focus on multiply for our example of this math, and then we will will talk about some key issues where the math doesn’t add up. The multiply blend mode Let’s take the color red defined as #ff0000. Each channel is a number between 0 and 255 (inclusive). This color has 255 in the red channel and 0 in the green and blue. #ff0000 is equivalent to the function value of rgb(255,0,0). You can also use percentages in this function, so for the rest of the article we will be talking values of 0% to 100% instead of 0 to 255. With this notation, red is rgb(100%, 0%, 0%). Let’s say we want to blend this with another color, and let’s choose yellow as rgb(100%,100%,0%) To perform a multiply blend mode we take the values of each element along each channel and multiply them. We do this in a 0 – 1 scale though (so 100% is 1 and 50% is .5, etc.) Red in RGB: rgb(100%, 0%, 0%) Yellow in RGB: rgb(100%, 100%, 0%) Multiplication in R channel: 1 × 1 = 1 Multiplication in G channel: 0 × 1 = 0 Multiplication in B channel: 0 × 0 = 0 So our result, » Read More
Like to keep reading?
This article first appeared on danielcwilson.com. If you'd like to keep reading, follow the white rabbit.