# @terrazzo/use-color > React hook for memoizing and transforming any web-compatible color. Uses Color.js. Latest version **0.2.2** (published 2026-08-11) · MIT license · 0 weekly downloads ## Install ```sh npm install @terrazzo/use-color pnpm add @terrazzo/use-color yarn add @terrazzo/use-color bun add @terrazzo/use-color ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types; pre 1.0. ## Facts | | | |---|---| | Version | 0.2.2 | | Published | 2026-08-11 | | First published | 2024-06-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 29.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 456 | | Author | Drew Powers | | Maintainers | drewpowers | | Keywords | color, color-module-4, culori, color.js, react, hooks | ## Links - npm: https://www.npmjs.com/package/@terrazzo/use-color - Repository: https://github.com/terrazzoapp/terrazzo - Homepage: https://terrazzo.app/docs/components/color-picker - npm.io page: https://npm.io/package/@terrazzo/use-color ## Dependencies (2) - [colorjs.io](https://npm.io/package/colorjs.io.md) ^0.7.1 - [@terrazzo/token-tools](https://npm.io/package/@terrazzo/token-tools.md) ^2.7.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.2.2 (latest) — 2026-08-11 - 0.2.1 (alpha) — 2026-02-23 - 0.2.0 — 2026-02-05 - 0.1.4 — 2025-07-20 - 0.1.3 — 2025-07-07 - 0.1.2 — 2025-07-02 - 0.1.1 — 2025-06-26 - 0.1.0 — 2025-04-27 - 0.0.7 — 2025-01-30 - 0.0.2 — 2024-07-16 - 0.0.1 — 2024-06-30 - 0.0.0 — 2024-06-29 ## README # @terrazzo/use-color React hook for memoizing and transforming any web-compatible color. Only 18 kB (with full support for all web color spaces!) thanks to [Color.js](https://colorjs.io). ## Setup ```sh npm i @terrazzo/use-color ``` ```tsx 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 [Color.js](https://colorjs.io) to convert colors, but only the [CSS Color Module 4](https://www.w3.org/TR/css-color-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` | Color.js color object using the original mode of the color (tip: use `color.original.mode` to see the format) | | `a98` | `object` | Color.js A98 color object | | `hsl` | `object` | Color.js HSL color object | | `hsv` | `object` | Color.js HSV color object | | `lrgb` | `object` | Color.js LinearRGB color object | | `lab` | `object` | Color.js CIELab color object (not to be confused with Oklab) | | `lch` | `object` | Color.js CIELCh color object (not to be confused with Oklch) | | `luv` | `object` | Color.js LUV color object | | `okhsl` | `object` | Color.js Okhsl color object | | `okhsv` | `object` | Color.js Okhsv color object | | `oklab` | `object` | Color.js Oklab color object | | `oklch` | `object` | Color.js Oklch color object | | `p3` | `object` | Color.js P3 color object | | `prophotoRgb` | `object` | Color.js ProPhotoRGB color object | | `rec2020` | `object` | Color.js Rec2020 color object | | `srgb` | `object` | Color.js sRGB color object | | `xyz` | `object` | (alias of `xyz65`) | | `xyz50` | `object` | Color.js Xyz50 color object | | `xyz65` | `object` | Color.js Xyz65 color object | ## Setting color Setting color can be done by either passing in any valid CSS string: ```tsx const [color, setColor] = useColor(); setColor("color(display-p3 0.12 0.3 0.98)"); ``` Or any Color.js object: ```tsx const [color, setColor] = useColor(); setColor({ spaceId: "p3", coords: [0.12, 0.3, 0.98] }); ``` Or adjusting the color object relatively (tip: for most purposes, adjusting by `oklab` will yield the best results): ```tsx const [color, setColor] = useColor(); setColor({ ...color.oklab, coords: [ color.oklab.coords[0] + 0.1, // Lighten by 10% via Oklab color.oklab.coords[1], color.oklab.coords[2], ], }); ``` _Note: if adjusting by a different color space, that will affect the `color.original` and `color.css` output, which pulls the most-recently-used color space._ --- _Source: https://npm.io/package/@terrazzo/use-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._