@terrazzo/use-color

React hook for memoizing and transforming any web-compatible color. Only 12 kB (with full support for all web colorspaces!) thanks to Culori.

Setup

npm i @terrazzo/use-color

import useColor, { formatCSS } from "@terrazzo/use-color";

const [color, setColor] = useColor("color(srgb 0.0 0.3 1.0)");

// Reading

color.css; // color(srgb 0.0 0.3 1.0)
color.original; // { mode: "srgb", r: 0, g: 0.3, b: 1.0, alpha: 1 }
color.p3; // { mode: "p3", r: 0.1184, g: 0.2956, b: 0.9611 }
formatCSS(color.p3); // color(display-p3 0.1184 0.2956 0.9611)

// Setting color

setColor("color(display-p3 0.12 0.3 0.98)");
setColor({ mode: "p3", r: 0.12, g: 0.3, b: 0.98 });

// Adjusting color relatively (lighten by 10% via Oklab)

setColor({ ...color.original.oklab, l: color.oklab.l + 0.1 });

Reading color

The color is fully memoized, so it can be used in any useEffect() hooks. This uses Culori to convert colors, but only the CSS Color Module 4 colorspaces are loaded. Further, all the properties are getters that cache their output, so even if accessing a different format, work will never be redone. You have the following property available:

Property	Type	Description
css	string	CSS-compatible color using Color Module 4
original	object	Culori color object using the original mode of the color (tip: use color.original.mode to see the format)
a98	object	Culori A98 color object
hsl	object	Culori HSL color object
hsv	object	Culori HSV color object
lrgb	object	Culori LinearRGB color object
lab	object	Culori CIELab color object (not to be confused with Oklab)
lch	object	Culori CIELCh color object (not to be confused with Oklch)
luv	object	Culori LUV color object
okhsl	object	Culori Okhsl color object
okhsv	object	Culori Okhsv color object
oklab	object	Culori Oklab color object
oklch	object	Culori Oklch color object
p3	object	Culori P3 color object
prophotoRgb	object	Culori ProPhotoRGB color object
rec2020	object	Culori Rec2020 color object
rgb	object	(sRGB) Culori RGB color object
srgb	object	(alias of rgb)
xyz	object	(alias of xyz65)
xyz50	object	Culori Xyz50 color object
xyz65	object	Culori Xyz65 color object

Setting color

Setting color can be done by either passing in any valid CSS string:

const [color, setColor] = useColor();

setColor("color(display-p3 0.12 0.3 0.98)");

Or any Culori object:

const [color, setColor] = useColor();

setColor({ mode: "p3", r: 0.12, g: 0.3, b: 0.98 });

Or adjusting the color object relatively (tip: for most purposes, adjusting by oklab will yield the best results):

const [color, setColor] = useColor();

setColor({
  ...color.original.oklab,
  l: color.oklab.l + 0.1, // Lighten by 10% via Oklab
});

Note: if adjusting by a different colorspace, that will affect the color.original and color.css output, which pulls the most-recently-used colorspace.