PostCSS Tetrad

A PostCSS plugin to get tetrad of a color

Installation

npm install postcss-tetrad

Examples

Get tetrad of a color

/* input */
div { color: tetrad(#34bbed) }
div.second { color: tetrad(#34bbed, 2) }
div.third { color: tetrad(#34bbed, 3) }

/* output */
div { color: #c234ed }
div.second { color: #ed6634 }
div.third { color: #5eed34 }

Get a uniform tetrad of a color (tetrad that also has the same apparent lightness)

/* input */
div { color: tetrad(#34bbed, uniform) }
div.second { color: tetrad(#34bbed, 2, uniform) }
div.third { color: tetrad(#34bbed, 3, uniform) }

/* output */
div { color: #fa71cc }
div.second { color: #fae271 }
div.third { color: #71fa9e }

Options

Option	Type	Default	Description
uniform	Boolean	false	Whether or not to use the uniform tetrad as the default for the plugin

Usage

Postcss JS API

postcss([require('postcss-tetrad')]).process(yourCSS);

Gulp

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const tetrad = require('postcss-tetrad');
gulp.task('css', () => {
    gulp.src('path/to/dev/css')
        .pipe(postcss([
            tetrad()
        ]))
        .pipe(gulp.dest('path/to/build/css'));
});

Tests

npm test

License

This project is licensed under the MIT License.