3 ms·

I learned all about blending modes and filters this past week figuring out how to split an image into its CMYK components using just HTML and CSS. It was not st

by aimor 4y ago

I learned all about blending modes and filters this past week figuring out how to split an image into its CMYK components using just HTML and CSS. It was not straightforward, but I did finally get it right. https://deepf.art/cmyk.html https://deepf.art/cmyk.html Two things of interest: I saw some weird off-by-1 errors between the expected color and what Firefox's inspector measured even with pretty simple filters like invert(). I'd like to dig into that more. And I had precision issues with how much grayscale() would scale the blue channel, especially since the color channels are 8 bit, which I improved by using luminance() instead. The MDN and the CSS spec was a great resource for figuring out exactly what calculation each blend mode and filter was doing.

JKCalhoun 4y ago
Interesting. I'll just mention, perhaps you knew, that CMYK is a little tricky since it is a little over-specified: 100% CMY the same as 100% ... in theory. What is it called, undercolor removal? (Yeah: [1]) Grayscale could be weird if gamma is taken into account. (I recall that there are blending modes at least that assume you convert to a 1.0 gamma, do the blend, then convert back to the original gamma.) [1] http://printwiki.org/Undercolor_Removal http://printwiki.org/Undercolor_Removal
- JusticeJuice 4y ago
  >100% CMY the same as 100% ... in theory. Isn't this just rich black? I thought the result also differed depending on the printing medium (due to just more ink and different absorbency of the medium) https://en.wikipedia.org/wiki/Rich_black https://en.wikipedia.org/wiki/Rich_black
- aimor 4y ago
  Thanks for mentioning it, I'm not familiar with the printing process in general. I learned CMYK is always used in the context of printing, and RGB doesn't have a defined transformation to CMYK, but because I was displaying this digitally I chose to ignore a lot of details. But I definitely wanted to mimic the undercolor removal, which to me meant making the CMY channels as light as possible. I didn't think about gamma at all, there's no CSS filter for it.

by aimor 4y ago

JKCalhoun 4y ago

Interesting. I'll just mention, perhaps you knew, that CMYK is a little tricky since it is a little over-specified: 100% CMY the same as 100% ... in theory. What is it called, undercolor removal? (Yeah: [1]) Grayscale could be weird if gamma is taken into account. (I recall that there are blending modes at least that assume you convert to a 1.0 gamma, do the blend, then convert back to the original gamma.) [1] http://printwiki.org/Undercolor_Removal http://printwiki.org/Undercolor_Removal

JusticeJuice 4y ago
>100% CMY the same as 100% ... in theory. Isn't this just rich black? I thought the result also differed depending on the printing medium (due to just more ink and different absorbency of the medium) https://en.wikipedia.org/wiki/Rich_black https://en.wikipedia.org/wiki/Rich_black
aimor 4y ago
Thanks for mentioning it, I'm not familiar with the printing process in general. I learned CMYK is always used in the context of printing, and RGB doesn't have a defined transformation to CMYK, but because I was displaying this digitally I chose to ignore a lot of details. But I definitely wanted to mimic the undercolor removal, which to me meant making the CMY channels as light as possible. I didn't think about gamma at all, there's no CSS filter for it.