Color

CSS colours: parse reads a colour string, format writes one, interpolator blends two in a colour space, and TOKEN finds a colour inside a longer value, a shadow's say. A hex, rgb(), hsl() and the named colours are colours from the start; registerSpaces adds every other CSS colour space, so oklch() and lab() are colours too, and interpolator("oklch") can blend in it.

import * as Color from "@wardic/dom/Color"

Color.parse("#bf616a") // Some({ mode: "rgb", r: 0.749, g: 0.38, b: 0.416 })
Color.format({ mode: "rgb", r: 1, g: 0.5, b: 0 }) // "rgb(255, 128, 0)"

Type Aliases

Color

type Color = object;

A colour as culori holds it: its colour space (mode) and its channels.

Indexable

[channel: string]: string | number | undefined

Properties

mode

readonly mode: string;

Variables

css

const css: Interpolator.Entry<Color, string>;

The DOM's colours: CSS's colour syntax, blended in sRGB, as the browser's own animations blend. Its registry's colour kind.

TOKEN

const TOKEN: RegExp;

A colour inside a longer value: a hex, or an rgb(), rgba(), hsl() or hsla(), as Motion's colour token is. A named colour, red, isn't one: it stays part of the text around the tokens.

Functions

format()

function format(color): string;

A colour written as rgb(…) or rgba(…), as culori's formatRgb writes it, so "#fff" reads and writes back as "rgb(255, 255, 255)": what a blend's every frame writes.

Parameters

color

Color

Returns

string

interpolator()

function interpolator(mode?): Entry<Color, string>;

Blends colours in the colour space mode: "rgb" by default, sRGB, as the browser's own animations blend. "oklch" or "lab" blend perceptually, once registerSpaces has registered them. A string is a colour when culori reads it, trimmed, so a keyword like "auto" isn't, and named colours and the modern forms culori knows are. Past the end of a blend a colour holds at its target.

Parameters

mode?

string = "rgb"

Returns

Entry<Color, string>

Example

Color.registerSpaces()
yield* registry.register(Color.interpolator("oklch")) // colours now blend in OKLCH

parse()

function parse(value): Option<Color>;

A colour string read: a culori colour, or None for any other value. A string is a colour when culori reads it, trimmed.

Parameters

value

unknown

Returns

Option<Color>

registerSpaces()

function registerSpaces(): void;

Registers every CSS colour space beyond sRGB's syntaxes: lab(), lch(), oklab(), oklch(), hwb(), and color()'s display-p3, rec2020, a98-rgb, prophoto-rgb, srgb-linear, xyz, xyz-d50 and xyz-d65. From then on such a string is a colour everywhere on the page; before, it isn't one, and a lab() value's numbers blend as written. Calling it again does nothing new.

Returns

void

spacesRegistered()

function spacesRegistered(): boolean;

Whether the spaces registerSpaces registers are registered on the page: by it, or by culori's own bundle, which registers every space as it loads.

Returns

boolean