https://github.com/ismamz/postcss-get-color

PostCSS plugin to get the prominent colors from an image.
https://github.com/ismamz/postcss-get-color

Last synced: 4 months ago
JSON representation

PostCSS plugin to get the prominent colors from an image.

• Host: GitHub
• URL: https://github.com/ismamz/postcss-get-color
• Owner: ismamz
• License: mit
• Created: 2016-04-12T19:36:25.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-02-13T08:41:13.000Z (about 5 years ago)
• Last Synced: 2024-04-25T02:26:00.540Z (10 months ago)
• Language: JavaScript
• Size: 2.31 MB
• Stars: 46
• Watchers: 5
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Get Color [![Build Status][ci-img]][ci]



> [PostCSS] plugin to get the prominent colors from an image

The plugin uses [Vibrant.js] and the [node port](https://github.com/akfish/node-vibrant) (node-vibrant). [Vibrant.js] is a javascript port of the awesome [Palette class](https://developer.android.com/reference/android/support/v7/graphics/Palette.html) in the Android support library.

[Vibrant.js]: https://github.com/jariz/vibrant.js/

[PostCSS]: https://github.com/postcss/postcss

[ci-img]:  https://travis-ci.org/ismamz/postcss-get-color.svg

[ci]:      https://travis-ci.org/ismamz/postcss-get-color

## Material Design Example



> Based on the [standards of material design](https://material.io/guidelines/style/color.html), 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](https://developer.android.com/training/material/palette-colors.html#extract-color-profiles)

| Input         | Output        |

|:-------------:|:-------------:|

|  |  |

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

--- 

### CSS Input

```css

.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

```css

.foo {

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

}

.bar {

    color: #b9911b;

}

```

## Features

```

get-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](#vibrant-palette)). 
 _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](#options)).

## Vibrant Palette

See examples in [Vibrant.js Page](http://jariz.github.io/vibrant.js/).

- 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

```css

.foo {

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

}

```

#### Before

```css

.foo {

    color: #000; /* or #fff */

}

```

## Usage

### Quick usage

Using [PostCSS CLI](https://github.com/postcss/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`:

```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

```js

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](https://github.com/ismamz/postcss-get-color/pull/new/master) ;-)