postcss-color-palette

PostCSS plugin to transform CSS2 color keywords into a custom palette.

This plugin can transform color keywords such as aqua, blue, lime, etc. to any other color. Bundled with the webcolors package, making these color palettes available for use in your stylesheets: Bootstrap, Bulma, mrmrs, FlatUI, Material and Tailwind -- simply by using standard CSS2 color keywords.

Installation

$ npm install postcss-color-palette

Usage

var fs = require('fs');
var postcss = require('postcss');
var palette = require('postcss-color-palette');
 
var css = fs.readFileSync('input.css', 'utf8');
 
var output = postcss()
  .use(palette({
    palette: 'material'
  })
  .process(css)
  .css;

Using this input.css:

body {
  color: yellow;
  background: linear-gradient(aqua, blue 50%, purple);
}

you will get:

body {
  color: #ffeb3b;
  background: linear-gradient(#00bcd4, #2196f3 50%, #9c27b0);
}

Options

palette

Specify a webcolors palette name (bootstrap, bulma, mrmrs, material, flatui, tailwind), or an object mapping of CSS2 color keywords to color values. By default, uses the mrmrs color palette.

License

MIT - see LICENSE file.