Databases
StackOverflow2013
Postsdbo
POColorMatrix CSS filter to convert black&white image to duotone
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POColorMatrix CSS filter to convert black&white image to duotone
    primarykey
    data
    text
    <p>I need to create a custom CSS filter that would convert black and white image to two-color image with two custom colors.</p> <p>I want to apply filter in something like this way (not sure if this syntax is possible, maybe 6 arguments have to be passed separately):</p> <pre><code>.duotone { -webkit-filter: custom(none url(/filters/duotone.fs), black_color [255, 0, 0] white_color [255, 192, 203]); } </code></pre> <p>so that black color is replaced with Red in this case, both the white and transparent colours (background) are replaced with Pink and all the shades of grey are replaced with colour in between (using straight-line curve).</p> <p>Maybe it is even possible to define filter in CSS without an external file?</p> <p>The application of this filter is to convert black/white icons to colored icons at run-time.</p> <p>There are very few examples on how to do it, <a href="http://blattchat.com/2012/05/30/webkit-filter-shaders-oh-my/" rel="nofollow">this one</a> is very generic covering much wider range of filters and the <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#custom-filter" rel="nofollow">specification</a> is also not so easy to understand.</p> <p>Could somebody post a working filter doing this or something similar? Or at least maybe you could point me to some more focused examples of application of ColorMatrix that will be relevant to my situation.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USesp
    1. USesp
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POColorMatrix CSS filter to convert black&white image to duotone
      1. USesp
      1. VTBountyStart
    2. VO
      singulars
      1. POColorMatrix CSS filter to convert black&white image to duotone
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POColorMatrix CSS filter to convert black&white image to duotone
      1. USesp
      1. VTFavorite
    1. COWow, I didn't realize WebKit filters were that advanced (to where you could define shaders like you would in WebGL). Seems like you could map each color to values in [0,1] and then map those values to any arbitrary gradient, although the more complicated the gradient, the more likely the chances for odd artifacts. In any case, it sounds like what you desire is doable; if nobody answers first with a working solution defined explicitly by shaders, maybe I'll take a shot at it and get lucky (but not tonight).
      singulars
      1. POColorMatrix CSS filter to convert black&white image to duotone
      1. USJayC
    2. COI also think it's doable and actually what I want is even simpler. As my images are black/transparent (masks) I only need to move black and shades of grey to another colour and its shades, white can be left as it is. See comments to the answer below...
      singulars
      1. POColorMatrix CSS filter to convert black&white image to duotone
      1. USesp
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload