PostCSS plugin to get the prominent colors from an image
Material Design Example
Based on the standards of material design, the palette library extracts commonly used color profiles from an image. Each profile is defined by a Target, and colors extracted from the bitmap image are scored against each profile based on saturation, luminance, and population (number of pixels in the bitmap represented by the color). For each profile, the color with the best score defines that color profile for the given image.
get-color(<image-path>, [<color-name>, <text-color>])
string: path to image relative to the CSS file (with quotes).
string: name (case sensitive) from the palette (see available names).
Default: first available color in the palette.
[title|body]: get the compatible foreground color.
Use color format in
rgba (see Options).
See examples in Vibrant.js Page.
Note: colors are writing in
You can get the title text color that works best with any 'title' text that is used over this swatch's color, and the body text color that works best with any 'body' text that is used over this swatch's color.
Using PostCSS CLI you can do the following:
postcss-cli and the plugin on your project folder:
$ npm install postcss-cli postcss-get-color --save-dev
And finally add this script to your
After this you can run
npm run postcss and transform your
output.css. Note that
-w is for observe file system changes and recompile as source files change.
For tasks runners and others enviroments
See PostCSS docs for examples of your environment.
Select the color format between:
If you want to improve the plugin, send a pull request ;-)