@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.
  • Returns empty string for unknown / unsupported color name.
• In array:
  • Values are floats.
  • Returns array filled with undefined for unknown / unsupported color name, i.e. [undefined, undefined, undefined, undefined].
• In hex:
  • transparent returns null.
  • Also returns null for unknown / unsupported color name.
  • currentcolor resolves as #000000 if opt.currentColor is not specified.
• In hexAlpha:
  • transparent resolves as #00000000.
  • currentcolor resolves as #00000000 if opt.currentColor is not specified.
  • Returns null for unknown / unsupported color name.

parse

Parse CSS color.

Parameters

• color string color value
  • color-mix() and <system-color>s are not supported. It throws.
• 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)