Re: [fxtf-drafts] [filter-effects] Add recolor() shorthand (#334)

I like this idea! But, there's actually many ways to do recolorization. I have summarized the most used ones below. I also created a [CodePen example page](https://codepen.io/anon/pen/axbJJY?editors=1000), which shows how they affect images. The example page works best with Firefox.

I've added a parameter to control the proportion of the conversion. It is called *amount*.

### sepia(amount)

This is the existing colorization method in CSS shorthands. It preserves black and converts white to yellowish. The amount parameter controls the proportion of the conversion.

### CSS shorthand tricks

This is a colorization hack made using the existing CSS shorthand filters. Typically, invert(), sepia(), hue-rotate() and saturate() are used.

References:

 * [How to transform black into any given color using only CSS filters](https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43959856)
 * [Solved with CSS! Colorizing SVG Backgrounds](https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/)
 * [CSS Filter as a color modifier for one image](https://stackoverflow.com/questions/17357125/css-filter-as-a-color-modifier-for-one-image)

### recolor(amount, color)

This is the function proposed by the original poster. It colorizes all pixels to the same color.

## tint(amount, color)

Preserves black and converts white to the desired color. This is a bit like sepia(), but uses a user defined color.

Alternatively, it could convert black to the desired color and preserve white.

References:

 * [Color Filters Can Turn Your Gray Skies Blue](https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/#monochrome-colorizing)

## duotone(amount, color1, color2)

This takes two colors. One color for black and one color for white. Intermediate colors get colors between those two.

Setting both colors to the same color will give the same result as recolor.

References:

 * [Color Filters Can Turn Your Gray Skies Blue](https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/#duotone-colorizing)
 * [After Effects: Tint effect](https://helpx.adobe.com/after-effects/using/color-correction-effects.html#tint_effect)
 * [Apple Motion: Colorize](https://support.apple.com/kb/PH16341?locale=en_US)

## tritone(amount, color1, color2, color3)

This takes three colors. One for highlights (white), one for midtones and one for shadows (black).

Setting all colors to the same color will give the same result as recolor.
Setting the midtone color to be the average of the two other colors will give the same result as duotone.

Note: For some reason, midtones affect the #c0c0c0 gray instead of #808080 gray in Firefox. Ideally, #808080 gray should be affected.

Note: It is possible to extend tritone for any number of colors. Tritone can be implemented with feComponentTransfer in the table mode and additional colors could just be added to the color table. I don't know if that would be useful..

After Effects has a tritone effect. It seems to affect #808080 gray and gives better results than Firefox.

References:

 * [After Effects: Tritone effect](https://helpx.adobe.com/after-effects/using/color-correction-effects.html#tritone_effect)

## Apple Motion: tint

Apple Motion has a tint filter, which affects only midtones. It seems to be the same as tritone with black, a user defined color and white.

 * [Apple Motion: Tint](https://support.apple.com/kb/PH16351?locale=en_US)

## Android LightingColorFilter

Android has a filter to colorize images. It takes two colors. The first one is used for multiplication and the second one for addition, like this:

    R' = R * colorMultiply.R + colorAdd.R
    G' = G * colorMultiply.G + colorAdd.G
    B' = B * colorMultiply.B + colorAdd.B

If colorMultiply is black, then this gives the same result as recolor.

This isn't as intuitive as duotone, so I wouldn't like to see this in CSS.

References:

 * [Android LightingColorFilter](https://developer.android.com/reference/kotlin/android/graphics/LightingColorFilter.html)

## Layer Color Blend

A usual method to colorize images in Photoshop and other image editors is to create a solid color layer in the desired color, place it over the image and then blend the color layer with the image using the "Color" blend mode.

The downside is that it also colorizes transparent pixels, so I wouldn't like to see this in CSS.

References:

 * [Color Overlay Photoshop](https://blog.storyblocks.com/inspiration/color-overlay-photoshop/)

## Summary

There's probably also other colorization methods. All other suggestions are welcome!

I don't expect to see all these implemented in CSS. I think duotone and tritone would be most useful. They are easy to use and they cover most use cases (recoloring text, icons, photos). Duotone works great for simple icons. Tritone is similar to highlight-midtone-shadow filters in photo editors.


-- 
GitHub Notification of comment by karip
Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/334#issuecomment-478344320 using your GitHub account

Received on Sunday, 31 March 2019 13:58:15 UTC