postcss-color-adjustment

0.1.6 • Public • Published

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) */

Readme

Keywords

Package Sidebar

Install

npm i postcss-color-adjustment

Weekly Downloads

22

Version

0.1.6

License

MIT

Unpacked Size

18.8 kB

Total Files

5

Last publish

Collaborators

  • mpeutz