Color on the Web: Gamut, Gamma & Why Your Gradient Goes Gray

Questions

1. 1
   Not answered. Which ramp below steps through equal amounts of physical light, and where does #808080 actually fall?
2. 2
   Not answered. You need to add two overlapping light sources together, like a stage light shining onto an already-lit surface. Which values do you have to use for the math to come out right?
3. 3
   Not answered. Which of these are real visible symptoms of blending or resizing images directly on their gamma-encoded values, instead of converting to linear light first?
4. 4
   Not answered. How many distinct values can a single 8-bit color channel represent?
5. 5
   Not answered. A shallow gradient shows visible stepped bands on an 8-bit display. Adding dither hides the banding without changing the color depth at all. What is dithering actually doing?
6. 6
   Not answered. A semi-transparent PNG edge gets a visible dark or light fringe after resizing or blending. Switching the compositing math to premultiplied alpha fixes it. What was premultiplied alpha actually correcting?
7. 7
   Not answered. Display-P3 is marketed as a "wider gamut" than sRGB. What does that actually add?
8. 8
   Not answered. On a Display-P3-capable screen, how does color(display-p3 1 0 0) actually compare to #ff0000?
9. 9
   Not answered. A color from a wider space needs to be shown on an sRGB-only screen. What's the difference between simple clipping and perceptual gamut mapping?
10. 10
    Not answered. A photo's pixel values were computed in Display-P3, but the exported file has no embedded color profile. What does it look like in a browser?
11. 11
    Not answered. What does @media (color-gamut: p3) { ... } let you do?
12. 12
    Not answered. Which of these statements about Display-P3 vs. sRGB are true?
13. 13
    Not answered. Both panels below are hsl(_ 100% 50%). Are they equally light?
14. 14
    Not answered. In oklch(70% 0.15 250), which statements about changing exactly one channel at a time are true?
15. 15
    Not answered. A palette is generated by holding HSL saturation and lightness fixed and rotating hue in even steps. Why does it come out visually uneven, and how does OKLCH avoid the problem?
16. 16
    Not answered. The same blue-to-yellow gradient was interpolated three different ways. Only one of these three rows passes through a neutral gray at its middle stop. Why does exactly one of them do that?
17. 17
    Not answered. A gradient interpolates hue from 20° to 280° using hue: shorter (the default). Which family of hues does it pass through, and why?
18. 18
    Not answered. For color-mix(in oklch, blue 30%, yellow), what does the 30% control, and why can changing in oklch to in srgb change the visible result even with the same percentage?
19. 19
    Not answered. You want a button's hover color to be "the brand color, but a bit lighter," derived directly from the brand color's own custom property instead of a second hardcoded value. Which CSS feature is built for exactly this?
20. 20
    Not answered. Which statements about currentColor and light-dark() are true?
21. 21
    Not answered. Two hues, 20° and 280°, are 100° apart the short way. How many degrees does hue: longer travel instead, going the other way around the same wheel?
22. 22
    Not answered. What is the WCAG contrast ratio between white (#ffffff) and pure red (#ff0000)? Round to one decimal place.
23. 23
    Not answered. Which statements about the WCAG 2 contrast thresholds are true?
24. 24
    Not answered. Swapping which of two colors is the "text" and which is the "background" never changes the computed WCAG contrast ratio. Why is that already a hint the formula is a rough model?
25. 25
    Not answered. Both panels below compute to the identical WCAG contrast ratio, 4.54:1 — literally the same two colors, roles swapped. Many readers still report one side as easier to read at a glance. What does that tell you?
26. 26
    Not answered. APCA (the perceptual contrast model developed for WCAG 3) is described as "polarity-aware." What problem is that specifically meant to fix?
27. 27
    Not answered. Which of these UI patterns fail "don't use color as the only carrier of meaning" (WCAG's Use of Color rule)?
28. 28
    Not answered. For contrast purposes, why isn't opacity: 0.6 on some text the same thing as just picking a lighter, fully opaque text color with an equivalent visual lightness?
29. 29
    Not answered. A brand blue, #2563eb, looks right in the design tool and in Chrome. A teammate's screenshot of the exact same swatch, opened in their OS's default image viewer on the same machine, looks visibly duller and less saturated — despite being, pixel-for-pixel, the same hex code. What's the most likely cause?
30. 30
    Not answered. A designer picks a highly saturated cyan in a design tool with a wide-gamut (Display-P3) profile enabled. Why can that exact color never be represented by any #hex value?
31. 31
    Not answered. Which statements correctly distinguish prefers-color-scheme from color-scheme?
32. 32
    Not answered. You screenshot a flat color swatch, save it as JPEG, then eyedropper the color back out of the saved file. The result is #7e8fae instead of the original #7f90b0. What's the most likely cause of that tiny mismatch?