Serializing

import { toFormat } from "chroma-panel";
 
toFormat(hsva, "hex"); // '#3366cc'
toFormat(hsva, "rgba"); // 'rgba(51, 102, 204, 1)'
toFormat(hsva, "hsl"); // 'hsl(220, 60%, 50%)'

The formats are 'hex', 'hexa', 'rgb', 'rgba', 'hsl' and 'hsla'. This is the same conversion behind the format prop, which sets the css field on a change result and the value a form submits.

API reference

function toFormat(hsva: Hsva, format: ColorFormat): string

Serialises a colour in one of the six supported formats. This is what the format prop uses for the css field and the value a form submits.

One format at a time

Each format has its own function, if you know which you want.

function toHex(hsva: Hsva): string

Six-digit hex, alpha discarded.

function toHexa(hsva: Hsva): string

Eight-digit hex, alpha included.

function toRgbString(hsva: Hsva): string

An rgb() string, alpha discarded.

function toRgbaString(hsva: Hsva): string

An rgba() string, alpha included.

function toHslString(hsva: Hsva): string

An hsl() string, alpha discarded.

function toHslaString(hsva: Hsva): string

An hsla() string, alpha included.

Every format at once

function toResult(hsva: Hsva, format: ColorFormat): ColorChangeResult

Builds the full ColorChangeResult from an Hsva — every format at once. This is what change handlers receive.

Precision

hex is rounded to 8 bits per channel. Keep the hsva if a colour has to survive a round trip unchanged.