CSS color

Resolve and convert CSS colors.

Install

npm i @asamuzakjp/css-color

Usage

import { convert, resolve } from '@asamuzakjp/css-color';

const resolvedValue =
  resolve('color-mix(in oklab, rgb(255 0 0), color(srgb 0 0.5 0 / 0.5))');
// 'oklab(0.5914 0.103273 0.119688 / 0.75)'

const convertedValue = covert.colorToHex('lab(46.2775% -47.5621 48.5837)');
// '#008000'

resolve(color, opt)

resolves CSS color

Parameters

• color string color value

  • system colors are not supported

• opt object? options (optional, default {})

  • opt.currentColor string? color to use for currentcolor keyword
  • opt.format string? output format, one of computedValue (default), specifiedValue, rgb, hex, hexAlpha
    • computedValue is a computed value of the color
    • specifiedValue is a specified value of the color
    • hexAlpha is a hex color notation with alpha channel, i.e. #rrggbbaa
  • opt.key any? key e.g. CSS property background-color

Returns (string? | Array) returns one of rgba?(), color(space r g b / a), color(space x y z / a), lab(l a b / A), lch(l c h / a), oklab(l a b / A), oklch(l c h / a), \#rrggbb(aa)?, color-name?, null, and, if key is specified, [key, rgba?()] etc.

• in computedValue, values are numbers, however rgb() values are integers
• in specifiedValue, returns empty string for unknown and/or invalid color
• in rgb, values are rounded to integers, and returns rgba(0, 0, 0, 0) for unknown colors
• in hex, returns null for transparent, and also returns null if any of r, g, b, a is not a number
• in hexAlpha, returns #00000000 for transparent, however returns null if any of r, g, b, a is not a number

convert

Contains various color conversion functions.

convert.numberToHex(value)

convert number to hex string

Parameters

• value number color value

Returns string hex string: 00..ff

convert.colorToHex(value, opt)

convert color to hex

Parameters

• value string color value
• opt object? options (optional, default {})
  • opt.alpha boolean? return in #rrggbbaa notation

Returns string #rrggbb|#rrggbbaa

convert.colorToHsl(value)

convert color to hsl

Parameters

• value string color value

Returns Array<number> [h, s, l, a]

convert.colorToHwb(value)

convert color to hwb

Parameters

• value string color value

Returns Array<number> [h, w, b, a]

convert.colorToLab(value)

convert color to lab

Parameters

• value string color value

Returns Array<number> [l, a, b, aa]

convert.colorToLch(value)

convert color to lch

Parameters

• value string color value

Returns Array<number> [l, c, h, aa]

convert.colorToOklab(value)

convert color to oklab

Parameters

• value string color value

Returns Array<number> [l, a, b, aa]

convert.colorToOklch(value)

convert color to oklch

Parameters

• value string color value

Returns Array<number> [l, c, h, aa]

convert.colorToRgb(value)

convert color to rgb

Parameters

• value string color value

Returns Array<number> [r, g, b, a]

convert.colorToXyz(value, opt)

convert color to xyz

Parameters

• value string color value
• opt object? options (optional, default {})
  • opt.d50 boolean? xyz in d50 white point

Returns Array<number> [x, y, z, a]

convert.colorToXyzD50(value)

convert color to xyz-d50

Parameters

• value string color value

Returns Array<number> [x, y, z, a]

Copyright (c) 2024 asamuzaK (Kazz)