Nature's Powerful Meme

    postcss-get-color

    0.2.0 • Public • Published

    PostCSS Get Color Build Status

    PostCSS plugin to get the prominent colors from an image

    The plugin uses Vibrant.js and the node port (node-vibrant). Vibrant.js is a javascript port of the awesome Palette class in the Android support library.

    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.

    Source: Android Developers - Extract Color Profiles

    Input Output
    color: get-color("../img/girl.png", Vibrant); color: #e8ba3c;

    CSS Input

    .foo {
        background-color: get-color("path/to/image.jpg", LightVibrant) url("path/to/image.jpg) no-repeat;
    }
     
    .bar {
        color: get-color("path/to/image.png");
    }

    CSS Output

    .foo {
        background-color: #b9911b url("path/to/image.jpg") no-repeat;
    }
     
    .bar {
        color: #b9911b;
    }

    Features

    get-color(<image-path>, [<color-name>, <text-color>])
    

    image-path string: path to image relative to the CSS file (with quotes).

    color-name string: name (case sensitive) from the palette (see available names).
    Default: first available color in the palette.

    text-color [title|body]: get the compatible foreground color.

    Use color format in hex, rgb or rgba (see Options).

    Vibrant Palette

    See examples in Vibrant.js Page.

    • Vibrant
    • DarkVibrant
    • LightVibrant
    • Muted
    • DarkMuted
    • LightMuted

    Note: colors are writing in PascalCase.

    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.

    After

    .foo {
        color: get-color("path/to/image.jpg", LightVibrant, text);
    }

    Before

    .foo {
        color: #000; /* or #fff */
    }

    Usage

    Quick usage

    Using PostCSS CLI you can do the following:

    First, install 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 package.json:

    "scripts"{
        "postcss": "postcss input.css -u postcss-get-color -o output.css -w"
    }

    After this you can run npm run postcss and transform your input.css into output.css. Note that -w is for observe file system changes and recompile as source files change.

    For tasks runners and others enviroments

    postcss([ require('postcss-get-color')({ /* options*/ }) ])

    See PostCSS docs for examples of your environment.

    Options

    format

    Type: string

    Default: hex

    Select the color format between: hex, rgb, rgba.

    Contributing

    If you want to improve the plugin, send a pull request ;-)

    Install

    npm i postcss-get-color

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • ismamz