postcss-color-adjustment

PostCSS Color Adjustment plugin

This PostCss plugin provides several utility actions used to manipulate, adjust, and analyse colors in you css files. Most actions call for a single color and an adjustment factor, but some call for two colors, while others forgo any adjustment factor property. The plugin was inspired by the color functions of Sass and the syntax from the awesome postcss-color-functions plugin.

Installation

npm install postcss-color-adjustment

Acceptable Color Formats

Functions that manipulate colors formats:

• Hex, 3-digit shorthand Hex, 8-digit (RGBA) Hex
• RGB, RGBA
• HSL, HSLA
• HSV, HSVA
• Named colors

Basic Syntax

/*
 * rule: color(<base color>, <keyword>(<adjustment-factor>))
 **/
 
 background-color: color(#f00, darken(20));

Average Syntax

/*
 * rule: color(<base color>, average(<secondary color>))
 **/
 
 color: color(#2ef, average(#f24));

Mix Syntax

/*
 * rule: color(<base color>, mix(<secondary color>, <adjustment-factor>))
 **/
 
 border: 1px solid color(#f00 mix(#00f,40));

Chained Syntax (operations are performed from left to right)

/*
 * rule: color(<base color>, <keyword>(<adjustment-factor>) <keyword>(<adjustment-factor>) <keyword>(<adjustment-factor>) <.etc..> )
 **/
 
 box-shadow: 0 0 10px color(#bada55 saturate(20) darken(20));

note: do not separated chained color actions with a comma

Available actions

Action & Alias	Parameters	Result
darken, shade, d	color, adjustment factor(0-100)	darkens color
lighten, tint, l	color, adjustment factor(0-100)	lightens color
brighten, b	color, adjustment factor(0-100)	brightens color
desaturate d	color, adjustment factor(0-100)	desaturate color
saturate, s	color, adjustment factor(0-100)	saturates color
grayscale, greyscale, g	color	desaturate color 100%
shift, hue, rotate, h	color, adjustment factor(-360 - 360)	shifts hue
mix, blend, m	color1, color2, adjustment factor(0-100)	mixes 2 colors by adjustment factor
average	color1, color2	averages 2 colors
complement	color	returns complimentary color
randomColor	color	returns a random color
transparentize, alpha, opacity, a	color, adjustment factor(0-1)	sets alpha level of color
contrast	color, color2	returns the color contrast, from 0-21 as defined by Web Content Accessibility Guidelines (Version 2.0).
luminance	color	Returns the perceived luminance of a color, from 0-1 as defined by Web Content Accessibility Guidelines (Version 2.0).
readable	color	Returns either "var(--colorLight)" or "var(--colorDark)" depending on which has the better contrast. These are returned as custom properties to give flexibility to the rendered color

css

color: color(#f00 darken(20));           /* #990000  */
color: color(#f00 lighten(20));          /* #ff6666  */
color: color(#f00 brighten(20));         /* #ff3333  */
color: color(#f00 desaturate(20));       /* #e61919  */
color: color(#f00 saturate(20));         /* #ff0000  */
color: color(#f00 grayscale());            /* #808080  */
color: color(#f00 shift(120));           /* #00ff00  */
color: color(#f00 mix(#00f,40);          /* rgb(153, 0, 102)  */
color: color(#f00 average(#0f0));        /* rgb(128, 128, 0)  */
color: color(#f00 complement());         /* #00ffff  */
color: color(randomColor());             /* #886b76  */
color: color(#f00 transparentize(.2));   /* rgba(255, 0, 0, 0.2)  */
color: color(#f00 alpha(.8));            /* rgba(255, 0, 0, 0.8)  */
color: color(#f00 contrast(#000));       /* 5.252  */
color: color(#f00 luminance());          /* 0.2126 */
color: color(#ff0 readable());           /* var(--colorDark) */