@asamuzakjp/css-color

CSS color

Resolve, parse, convert CSS color.

Install

npm i @asamuzakjp/css-color

Usage

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

const rgb = resolve('color-mix(in srgb, red, blue)');
// 'rgb(128, 0, 128)'

const xyz = parse('lab(46.2775% -47.5621 48.5837)');
const hex = convert.xyzToHex(xyz);
// '#008000'

resolve

Resolve CSS color.

Parameters

• color string color value
  • <system-color>s are not supported
• opt object? options
  • opt.currentColor string? color to use for currentcolor keyword
  • opt.format string? output format, one of rgb(default), array, hex or hexAlpha
    • hexAlpha gets hex color with alpha channel, i.e. #rrggbbaa
  • opt.key any? key e.g. CSS property background-color

Returns (string? | Array) rgba?(), [r, g, b, a], #rrggbb(aa)?, null, or if key is specified, [key, rgba?()|[r, g, b, a]|#rrggbb(aa)?|null]

• In rgb, r, g, b values are rounded.
• In array, values are floats.
• In hex, transparent keyword resolves as null, currentcolor as #000000 if opt.currentColor not specified.
• In hexAlpha, transparent keyword resolves as #00000000, currentcolor as #00000000 if opt.currentColor not specified.

parse

Parse CSS color.

Parameters

• value string color value
  • color-mix() and <system-color>s are not supported
• opt object? options
  • opt.d50 boolean? get xyz values in d50 white point

Returns Array<number> [x, y, z, a] x|y|z|a: 0..1

convert

Contains conversion functions as properties.

convert.xyzToHex

Convert xyz to hex color notation.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns string #rrggbbaa

convert.xyzToHsl

Convert xyz to hsl color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [h, s, l, a] h: 0..360 s|l: 0..100 a: 0..1

convert.xyzToHwb

Convert xyz to hwb color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [h, w, b, a] h: 0..360 w|b: 0..100 a: 0..1

convert.xyzToOklab

Convert xyz to oklab color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [l, a, b, A] l|A: 0..1 a|b: -0.4..0.4

convert.xyzToOklch

Convert xyz to oklch color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [l, c, h, a] l|a: 0..1 c: 0..0.4 h: 0..360

convert.xyzToRgb

Convert xyz to rgb color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [r, g, b, a] r|g|b: 0..255 a: 0..1

convert.xyzToXyzD50

Convert xyz to xyz-d50 color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> xyz - [x, y, z, a] x|y|z|a: 0..1

convert.xyzD50ToLab

Convert xyz-d50 to lab color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [l, a, b, A] l: 0..100 a|b: -125..125 A: 0..1

convert.xyzD50ToLch

Convert xyz-d50 to lch color array.

Parameters

• xyz Array<number> [x, y, z, a] x|y|z|a: 0..1

Returns Array<number> [l, c, h, a] l: 0..100 c: 0..150 h: 0..360 a: 0..1

---

Copyright (c) 2024 asamuzaK (Kazz)