https://github.com/tbjgolden/colornorm

Normalize CSS colors in a spec compliant way
https://github.com/tbjgolden/colornorm

css js level-4 normalize ts typescript

Last synced: 5 months ago
JSON representation

Normalize CSS colors in a spec compliant way

• Host: GitHub
• URL: https://github.com/tbjgolden/colornorm
• Owner: tbjgolden
• Created: 2021-03-30T00:39:47.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-04-03T23:28:53.000Z (about 5 years ago)
• Last Synced: 2025-01-25T12:33:35.566Z (over 1 year ago)
• Topics: css, js, level-4, normalize, ts, typescript
• Language: TypeScript
• Homepage:
• Size: 231 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# `colornorm`

[![npm version](https://img.shields.io/npm/v/colornorm.svg?style=flat-square)](https://www.npmjs.com/package/colornorm)

[![test coverage](https://img.shields.io/badge/dynamic/json?style=flat-square&color=brightgreen&label=coverage&query=%24.total.branches.pct&suffix=%25&url=https%3A%2F%2Funpkg.com%2Fcolornorm%2Fcoverage%2Fcoverage-summary.json)](https://www.npmjs.com/package/colornorm)

[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/tbjgolden/colornorm/Release?style=flat-square)](https://github.com/tbjgolden/colornorm/actions?query=workflow%3ARelease)

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

```js

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

```sh

npm install colornorm --save

# yarn add colornorm

```

Alternatively, there are also client web builds available:

```html

```

## Documentation

- [`Docs`](docs)

- [`API`](docs/api)

## License

MIT