Converting

import { hsvaToRgba, hsvaToHsla, hslaToHsva } from "chroma-panel";

API reference

function hsvaToRgba(hsva: Hsva): Rgba

HSVA to RGBA.

function rgbaToHsva(rgba: Rgba): Hsva

RGBA to HSVA. Hue is undefined at zero saturation, so this cannot round-trip a greyscale colour on its own — see ingest.

function hsvaToHsla(hsva: Hsva): Hsla

HSVA to HSLA.

function hslaToHsva(hsla: Hsla & {
  a: number;
}): Hsva

HSLA to HSVA.

function hsvaToHwba(hsva: Hsva): Hwba

HSVA to HWBA.

function hwbaToHsva(hwba: Hwba): Hsva

HWBA to HSVA.

Keeping hue and saturation

HSV has two places where information disappears. At zero saturation there is no hue to speak of, and at zero brightness there is neither. Converting away from HSVA and back loses them.

If you are round-tripping a colour through another model, keep the original HSVA and merge into it:

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.

Comparing and clamping

function sameHsva(a: Hsva, b: Hsva): boolean

Whether two colours are equal channel for channel. Useful for skipping redundant work in a change handler.

function clamp(value: number, min: number, max: number): number

Constrains a number to a range.

function normalizeHue(h: number): number

Wraps a hue into 0-360, so 370 becomes 10.