postcss-triad

A PostCSS plugin to get triad of a color

Usage no npm install needed!

<script type="module">
  import postcssTriad from 'https://cdn.skypack.dev/postcss-triad';
</script>

README

PostCSS Triad PostCSS Logo

NPM Version Build Status BGitter Chat

A PostCSS plugin to get triad of a color

Installation

npm install postcss-triad

Examples

Get triad of a color

/* input */
div { color: triad(#34bbed) }
div.other { color: triad(#34bbed, 2) }
/* output */
div { color: #ed34ba }
div.other { color: #bbed34 }

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

/* input */
div { color: triad(#34bbed, uniform) }
div.second { color: triad(#34bbed, 2, uniform) }
/* output */
div { color: #fa7188 }
div.second { color: #89fa71 }

Options

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

Usage

Postcss JS API

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

Gulp

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

Tests

npm test

License

This project is licensed under the MIT License.