Check out the blog post at: http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/
This functionality is currently supported on desktop Chrome and Firefox, and on iOS7 mobile Safari.
What is a Gradient Map you ask?
Traditionally, gradient maps are used in Photoshop. Think about taking an image and converting it to grayscale. Then, take a linear gradient and map that linear gradient to your image, where the left end of your gradient are the darkest values in your image, and the right end of your gradient maps to the brightest parts of your image. If you have a simple linear gradient from red to blue, the darkest parts of your image will get mapped to red, the brightest parts will get mapped to blue, and everything else will be some combination of red and blue, depending on how light or dark it is.
First, include the script in your page, most likely just before your closing <body> tag.
linearGradient uses the same format as CSS linear gradients without the initial angle, sides or corners. Instead you provide simply a list of comma-separated color-stops.
Each color-stop consists of a color followed by an optional position.
The color can be in any of the standard CSS color formats (rgb, rgba, hsl, hsla, named color or #hex-color).
The position is either a percentage (e.g. 50%) or a fraction from 0.0 to 1.0.
If the initial color-stop has no position, it is assumed to be 0% If the final color-stop has no position, it is assumed to be 100% If a color stop has no position, and it is not the first or last color-stop, it is positioned half way between the previous and next color-stop. If a color stop's position is less than the previous color-stop, it is repositioned to that of the previously positioned color-stop.
<img src="myimage.png" id="myimage">
Convert to Black & White:
<script src="gradientmaps.min.js"></script> <script> var target = document.getElementById('myimage'); var gradientMap = "black, white"; GradientMaps.applyGradientMap(target, gradientMap); </script>
Convert to Black & white, and darken the mid-tones a bit:
GradientMaps.applyGradientMap(target, "black, gray 60%, white");
Map to a range of colors:
GradientMaps.applyGradientMap(target, "red, #00FF00, rgb(0, 0, 255), yellow");
DO NOT directly modify the
gradientmaps.min.js files in the project root. These files are automatically built from components located under the
The project uses Grunt to automate the build process.
Grunt depends on Node.js and npm.
npm install -g grunt
Tell Grunt to watch for changes and automatically build
grunt watch is running, every time you make changes to components under
src/ the main files,
cssregions.min.js, are built and written to the project root.
To do a one-time build run:
** Currently there are no tests **
I know, lame.
The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding LICENSE.md file.
- Adobe Apache 2 for Gradientmaps
- MIT for csscolorparser
- Public Domain for tests, demos and docs
- Third party assets under their own licenses
See LICENSE.md for details.