[filter-effects] tint() function

[Secret-chest]

Link to the current spec.

Currently, webpage authors looking to change the image's colouring to a scale of a specific colour must combine the existing filters to approximate said colour or resort to overlays, JavaScript or other methods.

With this in mind, I propose a new filter function:

tint(map, amount)

where map is a <color> or <gradient> used to tint the image, and amount is a <number> or <percentage> used to blend the original with the filtered version, 1 being completely filtered, like it is with sepia().

• If map is a <color>, then the image is converted to a greyscale and the dark end is mapped to map, while the light end is mapped to white, other levels being blended accordingly.
• If map is a gradient, then the image is converted to a greyscale and each level is mapped to a level of the gradient.

Example

_Photo taken by me and available on https://commons.wikimedia.org/wiki/File:Muntii_Retezat_06.jpg under CC BY-SA. Processing done with GIMP._

First image is input, second is output, processed using this hypothetical value: filter: tint(linear-gradient(#0d7fb8, #ffe600), 100%)

[karip]

There was already a proposal for recolor() shorthand, which looks quite similar to your tint() function. However, it doesn't have the gradient option.