color-variations

Create color variations for your theme with no pain.

Based on polished color transformation functions.

Getting started

es6

import colorVariations from 'color-variations';
 
const baseColors = {
  black: '#000',
  white: '#fff',
  red: '#ff0000',
  blue: 'rgb(0, 102, 204)',
  green: 'rgba(101, 218, 162, 0.9)',
  foo: {
    green: 'rgba(101, 218, 162, 0.9)',
  },
  bar: ['rgba(101, 218, 162, 0.9)'],
};
 
const colors = colorVariations(baseColors);
 
console.log(colors.blackLighten[3]); // '#4d4d4d'
console.log(colors.redTint[3]); // '#ff4c4c'
console.log(colors.greenSaturate[3]); // 'rgba(72,247,163,0.9)'
console.log(colors.foo.greenSaturate[3]); // 'rgba(72,247,163,0.9)'
console.log(colors.bar.c0Saturate[3]); // 'rgba(72,247,163,0.9)'
console.log(colors.bar.0); // 'rgba(101, 218, 162, 0.9)'

node

const colorVariations = require('color-variations');
 
//... The same as above

umd

<!-- Inject this script in your HTML -->
<script src="https://unpkg.com/color-variations/dist/index.umd.js"></script>

The variable exported is called colorVariations.

Installing

yarn add color-variations

or

npm install color-variations

Options

steps

Defines the number of variations (apart from 0) generated.

For 10 steps the scale will be [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1].

For 5 steps [0, 0.2, 0.4, 0.6, 0.8, 1].

Pass the options as an object for the second argument of colorVariations.

includedFns

The color functions included. By default: ['darken', 'lighten', 'saturate', 'desaturate', 'rgba', 'shade', 'tint'].

This options is useful is you want to include only a few variations functions.

excludedFns

The color functions excluded. By default: []

const baseColors = {
  black: '#000',
  red: '#ff0000',
  // ...
};
 
const opts = {
  steps: 5,
  includedFns: ['darken', 'lighten', 'rgba'],
};
 
const colors = colorVariations(baseColors, opts);

Todo

• Proper documentation
• Human testing
• Improve options (include only functions provided, exclude functions provided...)
• Support for complex structures (objects of arrays of objects of...)
• Move away from polished
• Deal with collisions (having a color with name equals to a generated variation)
• Exclude useless color variations like darken for black (with option)
• Options (path) for included/excluded colors for variations
• Custom variations