Micro-color NPM

`micro-color`

Type	Info
Gzipped
Minified
Tree-shaking

Data from Bundlephobia

Info

A tiny, limited and tree-shakable alternative to color. Based off of Robin Weser's small-color package.

It is very limited and optimized for runtime usage in the browser.

It only supports a subset of color and does not have input validation.

It has zero dependencies and supports tree-shaking, making its size even smaller depending on the functions used.

Installation

yarn add micro-color
npm i micro-color

Limitations

Only valid CSS color strings can be used as inputs (rgb, rgba, hsl, hsla, hex)
Output values are rounded to 2 or 4 decimal places (depending on the property)
Only outputs RGBA or HSLA values (alpha is always provided, even if 1)
Inputs are not validated (but adjustments are clamped to the valid values)

Usage

In order to use any manipulation function, we need to parse our color string.

Now we can manipulate it until we finally generate a string again.

import { parse, toRgb, desaturate, lighten, fade } from 'small-color'

const color = parse('rgb(255, 0, 100)')

const lightened = lighten(color, 0.5)
const saturated = desaturate(lightened, 0.3)
const faded = fade(saturated, 0.5)

const output = toRgb(faded)

console.log(output) // => "rgba(236, 147, 182, 0.5)"

API

`parse(string): Color`

Parses a CSS color string into a color object that the package can manipulate.

Accepts any "normal" CSS color string:

rgb(r, g, b)
rgba(r, g, b, a)
hsl(h, s, l)
hsla(h, s, l, a)
#rrggbb
#rrggbbaa
#rgb
#rgba

Example

parse('hsl(180, 50%, 75%)') // => { h: 0.5, s: 0.5, l: 0.75, a: 1 }
parse('rgb(128, 128, 128, 0.675)') // => { h: 0, s: 0, l: 0.5, a: 0.675 }
parse('#ffffff') // => { h: 0, s: 0, l: 1, a: 1 }
parse('#fff80') // => { h: 0, s: 0, l: 1, a: 0.5 }

`lighten(Color, float): Color`

Lightens a Color object by a given factor.

Supplied lighten factor should be provided as a number >= 0, where 0 is no increase and 1 is a 100% increase (double).

The lightness will not exceed 100%, or subceed 0%.

`darken(Color, float): Color`

Darkens a Color object by a given factor.

Supplied darken factor should be provided as a number between 0 and 1, where 0 is no decrease and 1 is a 100% decrease (black).

The lightness will not exceed 100%, or subceed 0%.

`saturate(Color, float): Color`

Increases saturation of a Color object by a given factor.

Supplied saturation factor should be provided as a number >= 0, where 0 is no increase in saturation and 1 is a 100% increase in saturation (doubled saturation).

The saturation will not exceed 100%, or subceed 0%.

`desaturate(Color, float): Color`

Desaturates a Color object by a given factor.

Supplied desaturation factor should be provided as a number between 0 and 1, where 0 is no decrease in saturation and 1 is a 100% decrease in saturation.

The saturation will not exceed 100%, or subceed 0%.

`fade(Color, float): Color`

Increases the opacity of a Color object by a given factor.

Supplied factor should be between 1 and 0, where 1 makes the color fully transparent, and 0 creates 0 change in opacity.

The alpha value will not exceed 1, or subceed 0.

`opaquer(Color, float): Color`

Decreases the opacity of a Color object by a given factor.

Supplied factor should be between 0 and 1, where 1 doubles the alpha value (2x more opaque), and 0 means no change in transparency.

The alpha value will not exceed 1, or subceed 0.

`grayscale(Color): Color`

Converts a Color object to grayscale. (Removes all saturation.)

`hueShift(Color, int): Color`

Performs a hue shift with the supplied input. Positive for a right shift, negative for a left shift. Input should be an integer between -359 and 359 (but could be any number).

Wrapping (e.g. -180 shift on 90 becomes 270) is performed automatically.