Color-Utils #

A collection of color-related utilities.

tl;dr #

• Install by executing npm install @wojtekmaj/color-utils or yarn add @wojtekmaj/color-utils.
• Import by adding import * as colorUtils from '@wojtekmaj/color-utils'.
• Do stuff with it!

  toRgb('#ff0000'); // "rgb(255 0 0)"
  

User guide #

alpha() #

Adds/changes alpha channel in a given color.

Sample usage #

import { alpha } from '@wojtekmaj/color-utils';

alpha('#f00', 0.5); // "rgb(255 0 0 / 0.5)"
alpha('#00ff00', 0.1); // "rgb(0 255 0 / 0.1)"
alpha('#0000ff80', 0.1); // "rgb(0 0 255 / 0.1)"
alpha('rgb(255, 0, 0)', 0.5); // "rgb(255 0 0 / 0.5)"
alpha('rgb(255 0 0)', 0.5); // "rgb(255 0 0 / 0.5)"
alpha('rgba(0, 0, 255, 0.5)', 0.1); // "rgb(0 0 255 / 0.1)"
alpha('rgb(0 0 255 / 0.5)', 0.1); // "rgb(0 0 255 / 0.1)"
alpha('hsl(0, 100%, 50%)', 0.5); // "rgb(255 0 0 / 0.5)"
alpha('hsl(0 100% 50%)', 0.5); // "rgb(255 0 0 / 0.5)"
alpha('hsla(0, 100%, 50%, 0.5)', 0.1); // "rgb(255 0 0 / 0.1)"
alpha('hsla(0 100% 50% / 0.5)', 0.1); // "rgb(255 0 0 / 0.1)"
alpha('lab(54.29% 80.81 69.89)', 0.5); // "rgb(255 0 0 / 0.5)"
alpha('lab(54.29% 80.81 69.89 / 0.5)', 0.1); // "rgb(255 0 0 / 0.1)"

mix() #

Mixes colors together. If ratio is not given, colors are blended evenly (ratio = 0.5).

Sample usage #

import { mix } from '@wojtekmaj/color-utils';

mix('#ff0000', '#000', 0.5); // "#800000"
mix('rgb(255, 0, 0)', '#fff', 0.5); // "#ff8080"
mix('rgb(255 0 0)', '#fff', 0.5); // "#ff8080"
mix('hsl(0, 100%, 50%)', '#000000', 0.5); // "#800000"
mix('hsl(0 100% 50%)', '#000000', 0.5); // "#800000"
mix('lab(54.29% 80.81 69.89)', '#000000', 0.5); // "#800000"
mix('lab(54.29% 80.81 69.89 / 0.5)', '#000000', 0.5); // "#800000"

mixBlack() #

Mixes color with black.

Sample usage #

import { mixBlack } from '@wojtekmaj/color-utils';

mixBlack('#ff0000', 0.5); // "#800000"
mixBlack('rgb(255, 0, 0)', 0.5); // "#800000"
mixBlack('rgb(255 0 0)', 0.5); // "#800000"
mixBlack('hsl(0, 100%, 50%)', 0.5); // "#800000"
mixBlack('hsl(0 100% 50%)', 0.5); // "#800000"
mixBlack('lab(54.29% 80.81 69.89)', 0.5); // "#800000"
mixBlack('lab(54.29% 80.81 69.89 / 0.5)', 0.5); // "#800000"

mixWhite() #

Mixes color with white.

Sample usage #

import { mixWhite } from '@wojtekmaj/color-utils';

mixWhite('#ff0000', 0.5); // "#ff8080"
mixWhite('rgb(255, 0, 0)', 0.5); // "#ff8080"
mixWhite('rgb(255 0 0)', 0.5); // "#ff8080"
mixWhite('hsl(0, 100%, 50%)', 0.5); // "#ff8080"
mixWhite('hsl(0 100% 50%)', 0.5); // "#ff8080"
mixWhite('lab(54.29% 80.81 69.89)', 0.5); // "#ff8080"
mixWhite('lab(54.29% 80.81 69.89 / 0.5)', 0.5); // "#ff8080"

toHex() #

Converts color to hex format.

Sample usage #

import { toHex } from '@wojtekmaj/color-utils';

toHex('rgb(255, 0, 0)'); // "#ff0000"
toHex('rgb(255 0 0)'); // "#ff0000"
toHex('rgb(0, 255, 0)'); // "#00ff00"
toHex('rgb(0 255 0)'); // "#00ff00"
toHex('rgba(0, 0, 255, 0.5)'); // "#0000ff80"
toHex('rgb(0 0 255 / 0.5)'); // "#0000ff80"
toHex('hsl(0, 100%, 50%)'); // "#ff0000"
toHex('hsl(0 100% 50%)'); // "#ff0000"
toHex('hsla(0, 100%, 50%, 0.5)'); // "#ff000080"
toHex('hsl(0 100% 50% / 0.5)'); // "#ff000080"
toHex('lab(54.29% 80.81 69.89)'); // "#ff0000"
toHex('lab(54.29% 80.81 69.89 / 0.5)'); // "#ff000080"

toHsl() #

Converts color to hsl(…) format.

Sample usage #

import { toHsl } from '@wojtekmaj/color-utils';

toHsl('#f00'); // "hsl(0 100% 50%)"
toHsl('#00ff00'); // "hsl(120 100% 50%)"
toHsl('#0000ff80'); // "hsl(240 100% 50% / 0.5)"
toHsl('rgb(255, 0, 0)'); // "hsl(0 100% 50%)"
toHsl('rgb(255 0 0)'); // "hsl(0 100% 50%)"
toHsl('rgba(255, 0, 0, 0.5)'); // "hsl(0 100% 50% / 0.5)"
toHsl('rgb(255 0 0 / 0.5)'); // "hsl(0 100% 50% / 0.5)"
toHsl('lab(54.29% 80.81 69.89)'); // "hsl(0 100% 50%)"
toHsl('lab(54.29% 80.81 69.89 / 0.5)'); // "hsl(0 100% 50% / 0.5)"

toLab() #

Converts color to lab(…) format.

Sample usage #

import { toLab } from '@wojtekmaj/color-utils';

toLab('#f00'); // "lab(54.29% 80.81 69.89)"
toLab('#00ff00'); // "lab(87.73% -86.18 83.18)"
toLab('#0000ff80'); // "lab(32.3% 79.19 -107.86 / 0.5)"
toLab('rgb(255, 0, 0)'); // "lab(54.29% 80.81 69.89)"
toLab('rgb(255 0 0)'); // "lab(54.29% 80.81 69.89)"
toLab('rgba(255, 0, 0, 0.5)'); // "lab(54.29% 80.81 69.89 / 0.5)"
toLab('rgb(255 0 0 / 0.5)'); // "lab(54.29% 80.81 69.89 / 0.5)"
toLab('hsl(0, 100%, 50%)'); // "lab(54.29% 80.81 69.89)"
toLab('hsl(0 100% 50%)'); // "lab(54.29% 80.81 69.89)"
toLab('hsla(0, 100%, 50%, 0.5)'); // "lab(54.29% 80.81 69.89 / 0.5)"
toLab('hsl(0 100% 50% / 0.5)'); // "lab(54.29% 80.81 69.89 / 0.5)"

toObject() #

Converts color to { r, g, b, a? } object.

Sample usage #

import { toObject } from '@wojtekmaj/color-utils';

toObject('#f00'); // { r: 255, g: 0, b: 0 }
toObject('#00ff00'); // { r: 0, g: 255, b: 0 }
toObject('#0000ff80'); // { r: 0, g: 0, b: 255, a: 0.5 }
toObject('rgb(255, 0, 0)'); // { r: 255, g: 0, b: 0 }
toObject('rgb(255 0 0)'); // { r: 255, g: 0, b: 0 }
toObject('rgb(0, 255, 0)'); // { r: 0, g: 255, b: 0 }
toObject('rgb(0 255 0)'); // { r: 0, g: 255, b: 0 }
toObject('rgba(0, 0, 255, 0.5)'); // { r: 0, g: 0, b: 255, a: 0.5 }
toObject('rgb(0 0 255 / 0.5)'); // { r: 0, g: 0, b: 255, a: 0.5 }
toObject('hsl(0, 100%, 50%)'); // { r: 255, g: 0, b: 0 }
toObject('hsl(0 100% 50%)'); // { r: 255, g: 0, b: 0 }
toObject('hsla(0, 100%, 50%, 0.5)'); // { r: 255, g: 0, b: 0, a: 0.5 }
toObject('hsl(0 100% 50% / 0.5)'); // { r: 255, g: 0, b: 0, a: 0.5 }
toObject('lab(54.29% 80.81 69.89)'); // { r: 255, g: 0, b: 0 }
toObject('lab(54.29% 80.81 69.89 / 0.5)'); // { r: 255, g: 0, b: 0, a: 0.5 }

toRgb() #

Converts color to rgb(…) format.

Sample usage #

import { toRgb } from '@wojtekmaj/color-utils';

toRgb('#f00'); // "rgb(255 0 0)"
toRgb('#00ff00'); // "rgb(0 255 0)"
toRgb('#0000ff80'); // "rgb(0 0 255 / 0.5)"
toRgb('hsl(0, 100%, 50%)'); // "rgb(255 0 0)"
toRgb('hsl(0 100% 50%)'); // "rgb(255 0 0)"
toRgb('hsla(0, 100%, 50%, 0.5)'); // "rgb(255 0 0 / 0.5)"
toRgb('hsl(0 100% 50% / 0.5)'); // "rgb(255 0 0 / 0.5)"
toRgb('lab(54.29% 80.81 69.89)'); // "rgb(255 0 0)"
toRgb('lab(54.29% 80.81 69.89 / 0.5)'); // "rgb(255 0 0 / 0.5)"

License #

The MIT License.

Author #

Wojciech Maj