Search code examples
htmlcsscolorscurvesvg-filters

How to apply Photoshop-style color curves filters to an HTML tag?

I'm trying to replicate the following Photoshop color curves filter in an HTML video tag.

Photoshop color curves tool

The closest answer I've found so far is how to add Photoshop-like color levels with CSS and SVG Filters but it's not quite what I need.

Any approach using CSS, SVG Filters, or even a third-party library is welcome!

Solution

  • feComponentTransfer / table is how you implement color curves. This filter will - roughly - produce that curve combo and should give you a place to start. The first feComponentTransfer implements the color curves (I eyeballed the values - you'll want to go back and do it more carefully). The second implements the white-point adjustment.

    I think the order is correct, but I'm not a Photoshop expert, so you may have to put the white point adjustment first.

    <filter id="color-curve" color-interpolation-filters="sRGB">
<feComponentTransfer>
  <feFuncR type="table" tableValues="0.0 0.22 0.4 0.6 0.4 0.8 0.86 0.92 0.96 0.98 1.0"/>
  <feFuncG type="table" tableValues="0.0 0.0 0.05 0.1 0.22 0.4 0.6 0.83 0.92 0.97 1.0"/>
  <feFuncB type="table" tableValues="0.1 0.8"/>
</feComponentTransfer>

<feComponentTransfer>
  <feFuncR type="table" tableValues="0.1 1"/>
  <feFuncG type="table" tableValues="0.1 1"/>
  <feFuncB type="table" tableValues="0.1 1"/>
</feComponentTransfer>
</filter>

    I wrote the docs for webplatform on feComponentTransfer linked here: http://www.webplatform.org/docs/svg/elements/feComponentTransfer/

    There is no more comprehensive guide to how this filter primitive works so just read that carefully.