@terrazzo/react-color-picker

Pick colors using CSS Color Module 4, wide color gamut (WCG), and all supported web colorspaces using React and WebGL for monitor-accurate colors. Powered by 🌈 Culori.

15 kB, enforced by size-limit

Setup

pnpm i @terrazzo/react-color-picker @terrazzo/tiles

import ColorPicker from "@terrazzo/react-color-picker";
import { useState } from "react";

const [color, setColor] = useState("color(display-p3 0 0.3 1)");

<ColorPicker value={color} onChange={setColor} />;

Styling

To use the default styles, import both @terrazzo/tiles and @terrazzo/react-color-picker CSS:

+ import "@terrazzo/tiles/all-components.css";
+ import "@terrazzo/react-color-picker/styles.css";

Or, you can copy both of those files manually into your own styling, and customize/delete what you don’t use.

@terrazzo/react-color-picker

0.1.3

Patch Changes

• #516 652c1d1 Thanks @drwpow! - Update React, fix install instructions

• Updated dependencies [652c1d1]:

  • @terrazzo/use-color@0.1.4
  • @terrazzo/icons@0.1.1
  • @terrazzo/tiles@0.1.3

0.1.2

Patch Changes

• Updated dependencies []:
  • @terrazzo/tokens@0.1.0
  • @terrazzo/use-color@0.1.2
  • @terrazzo/tiles@0.1.2

0.1.1

Patch Changes

• Updated dependencies []:
  • @terrazzo/tokens@0.1.0
  • @terrazzo/use-color@0.1.1
  • @terrazzo/tiles@0.1.1

0.0.7

Patch Changes

• Bugfixes thanks to @lilnasy