colornorm

colornorm

PostCSS plugin for normalizing colors

Convert different syntaxes to a single one.

Useful for de-duplicating colors, and standardizing a stylesheet on one color syntax.

You may assume that the same input color will map the same output color, regardless of input syntax.

Invalid color syntax returns null. Global values ("inherit", "initial", "unset") also return null.

Usage

const colornorm = require('colornorm')

// Any crazy valid CSS color you can think of
const inputs = [
  'red',
  'RED',
  '#f00',
  '#ff0000',
  '#ff0000ff',
  'rgb(255,0,0)',
  'rgb(255 0 0)',
  'rgba(255, 0, 0, 1)',
  'rgb(255 0 0 / 1)',
  'hsl(0, 100%, 50%)',
  'hsla(0, 100%, 50%, 1)'
  // hwb, cmyk, lab, lch inputs also supported
]

const outputs = inputs.map((input) => colornorm(input))
// all are 'hsl(0 100% 50%)'

// output styles: 'hsl' (default as most human friendly widely adopted format), 'hwb', 'lab', 'lch', 'cmyk', 'rgb', 'hex'
const outputs = inputs.map((input) => colornorm(input, 'hex'))
// all are '#f00'

Installation

npm install colornorm --save
# yarn add colornorm

Alternatively, there are also client web builds available:

<!-- Dependencies -->

<!-- window.ColorNorm -->
<script src="https://unpkg.com/colornorm/dist/colornorm.umd.js"></script>

Documentation

• Docs
• API

License

MIT