My notes on Color Management by Craig Hockenberry

color management is a way to specify the range of colors a device can represent.

We’ll use 8-bit values throughout this book; to get more accurate color, we’ll add another type of data.”

As photographers and print designers learned, we can’t solely rely on the values for primary colors. We also need information, or a color profile, from the manufacturer that explains how they display the color green.

sRGB color profile with saturation as a third dimension.

Since it takes into account how our brains perceive color, a LAB color space is better at reproducing tones and relative color values. LAB is ideal for color created with inks.

The XYZ color space is based on the eye’s response to stimulation across the visible light spectrum. This works well for specifying an exact color, even though it ignores that our vision isn’t completely uniform. XYZ is ideal for devices that emit light, like a computer display.

we base conversion on the eye, so each device only needs to specify how to transform color to and from the eye’s color space

Displays have reached the point where human eyes can’t determine individual pixels—increasing the resolution has no benefit. The next frontier lies in color depth, making our images more vibrant.

For an in-depth discussion on how to get the most out of your digital photos, check out Color Space and Color Profiles from the American Society of Media Photographers. “AdobeRGB vs. sRGB” from Fstoppers lays out the differences between the two profiles.

“Here’s what the web standards body has to say about color values:

All RGB colors are specified in the sRGB color space.” You’re still most likely to specify a color via CSS. Yet as you saw, the W3C isn’t strict on how that color appears on the page A picture’s worth a thousand words, so let’s open a test page in both Safari and Chrome on macOS (FIG 3.1).

You may not see as pronounced a difference between the two browsers; the exact results depend on your computer’s display.” “Now, when you specify a color in CSS, Safari takes the raw color values and puts them in an sRGB color space. That color is then transformed using color management to the display’s profile. If you type #6600cc in your CSS, it produces something like #7900cf on screen.

Safari’s new behavior means you need to make sure your tools can take a display color space and convert it back to sRGB—otherwise, you’ll sample #7900cf on screen and wonder why it doesn’t appear in your code. (Both Digital Color Meter and xScope do this conversion, so you’re set.)” You can configure your Mac to behave like Windows, which is helpful if you’re working on a site that will net lots of visits from a PC. Open System Preferences Displays, and in the Color panel, select “sRGB IEC61966–2.1.” After you relaunch your browsers, they’ll mimic what would happen on Windows; as a bonus, all your browsers will use the same colors when rendering CSS. You might miss the beauty of your Mac’s built-in color profile, but you’ll have a better idea of what others are seeing.

From the survey of mobile browsers, you know only some of your visitors will have color management. As a conscientious developer, you stick with sRGB. But wide-gamut images on a P3 screen (like on the iPhone 7) are a real marvel—rich and vibrant—and you’d like to offer better color to those who can see it.

Don’t embed profiles in hero.jpg and hero@2x.jpg, and they’ll display correctly as sRGB. With hero-p3@2x.jpg, you can embed a profile with a wider gamut to take advantage of the DCI-P3 display.

From the survey of mobile browsers, you know only some of your visitors will have color management. As a conscientious developer, you stick with sRGB. But wide-gamut images on a P3 screen (like on the iPhone 7) are a real marvel—rich and vibrant—and you’d like to offer better color to those who can see it.

<picture>
  <source media="(min-resolution: 2dppx) and   (color-gamut: p3)"
    srcset="photo-p3@2x.jpg">
  <source media="(min-resolution: 2dppx)"
    srcset="photo@2x.jpg">
  <img src="photo.jpg" srcset="photo@2x.jpg 2x"   alt="A photo">
</picture>"

“To see these techniques in action, take a quick visit to furbo.org/color/ResponsiveColor/. Viewing the source on that page will help you understand what’s going on” Happily, it isn’t if you follow one rule: don’t embed color profiles if you want your images to match your CSS colors.

One last factor to consider: image optimization. If you use a tool like ImageOptim to make your images mobile-friendly, be aware that these tools often make files smaller by removing color profiles. For example, see the “No profile” row on the Colorful test page. For images meant for a user interface, that’s fine. But if you have embedded profiles in your photos, they’ll be damaged.

If I could offer one piece of advice at the end of this lengthy treatise: learn to love sRGB. But don’t get too attached to sRGB. you’ll want to move your workflows to these wider gamuts.