Parsing

import { parse, isValidColor } from "chroma-panel";
 
parse("#3366cc");
parse("rgb(51 102 204)");
parse("hsl(220 60% 50%)");
parse("hwb(220 20% 20%)");
 
isValidColor("not a colour"); // false

Hex (3, 4, 6 and 8 digit), rgb(), rgba(), hsl(), hsla(), hwb() and the modern space-separated forms are all accepted.

API reference

function parse(input: string): Hsva | null

Turns any CSS colour string into an Hsva, or null if it cannot be read. Hex, rgb(), hsl(), hwb() and the modern space-separated forms are all accepted; colour names need registerNamedColors first.

function isValidColor(input: string): boolean

Whether parse would succeed, without building the result.

Merging rather than replacing

ingest is what the panel uses internally. It merges a change into a full HSVA value instead of replacing it, which is what preserves hue and saturation at the extremes — see converting.

function ingest(next: Hsva, prev: Hsva): Hsva

Merges a change into an existing colour rather than replacing it, keeping the hue and saturation that other models drop at the extremes. This is why dragging brightness to black and back returns the colour you started with.

Named colors

parse("rebeccapurple") returns null until you register the names. They cost about 1.3 kB gzipped, so they are opt-in — see named colors.