Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You've been asking a lot about this hue shifting thing, so I figured I'd try to work out an example: <a href="http://jsfiddle.net/EMujN/3/" rel="nofollow">http://jsfiddle.net/EMujN/3/</a></p> <p>Here's another that uses an actual icon: <a href="http://jsfiddle.net/EMujN/4/" rel="nofollow">http://jsfiddle.net/EMujN/4/</a></p> <p>There's a lot in there. There's a huge data URL which you can ignore unless you want to <a href="http://dataurl.net/#dataurlmaker" rel="nofollow">replace it</a>. Here's the relevant part where we modify HSL.</p> <pre><code> //SHIFT H HERE var hMod = .3; hsl[0]=(hsl[0]+hMod)%1; //MODIFY S HERE var sMod = .6; hsl[1]=Math.max(0,Math.min(1, hsl[1]+sMod )); //MODIFY L HERE var lMod = 0; hsl[2]=Math.max(0,Math.min(1, hsl[2]+lMod )); </code></pre> <p>I've converted to HSL because it's a lot easier to accomplish what you want in that color space than RGB.</p> <p>Without getting any more complex, you have three variables you can tune: how much to add to either Hue, Saturation, or Lightness. I have the lightness variable set to 0 because any higher and you will see some nasty JPEG artifacts (if you can find a decent .png that would be better, but I went with the first CC night image I could find).</p> <p>I think the hue shift (yellow to green) looks pretty good though and I have maxed out the saturation, so even a normally white light appears bright purple. Like I said in my comment, you will need to increase the lightness and saturation if you want to colorize patches of black and white. Hopefully, you can figure out what you need from this example.</p> <p>image used: <a href="http://commons.wikimedia.org/wiki/File:Amman_(Jordan)_at_night.jpg" rel="nofollow">http://commons.wikimedia.org/wiki/File:Amman_(Jordan)_at_night.jpg</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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