React color tools / v0.6.0

Color has structure.

ChromaKit is a zero-runtime-dependency picker and conversion toolkit for OKLCH, OKLAB, HSL, HSV, RGB, and HEX.

Try the workbench Read the docs

npm install chromakit-react

The color workbench

Drag, type, use arrow keys, or choose a preset. Every representation stays in sync from one color value.

Pick

Presets

#ddfe3f

Lightness: 94%
Chroma: 0.204
Hue: 119°
Alpha: 100%

Copy any format

hex#ddfe3f

rgbrgb(221, 254, 63)

rgbargba(221, 254, 63, 1.00)

hslhsl(70.4, 99.0%, 62.2%)

hslahsla(70.4, 99.0%, 62.2%, 1.00)

oklchoklch(94.2% 0.204 119.3)

oklchaoklch(94.2% 0.204 119.3 / 1.00)

Built to join a system, not become one.

React: 18 and 19 peer support
Runtime: 0 package dependencies
TypeScript: Strict, exported types
Spaces: OKLCH · OKLAB · HSL · HSV · RGB · HEX
Theming: Documented --ck-* CSS variables
ES bundle: 12.7 kB gzip, measured locally

Perceptual spaces keep lightness and chroma explicit. ChromaKit keeps those values available as data, not decoration.

Controlled by React. Styled by CSS.

Keep color state in your application and tune the visual skin through stable custom properties. No wrapper theme API is required.

Use a controlled value

import { useState } from 'react';
import { ColorPicker } from 'chromakit-react';
import 'chromakit-react/chromakit.css';

export function BrandColorField() {
  const [color, setColor] = useState('#ddfe3f');

  return (
    <ColorPicker
      value={color}
      onChange={(next) => setColor(next.hex8)}
    />
  );
}

Override the package tokens

.brand-picker {
  --ck-primary: #202516;
  --ck-accent: #ddfe3f;
  --ck-background: #f6f3e9;
  --ck-foreground: #12140e;
  --ck-radius: 2px;
}

Put the picker to work.

npm install chromakit-react

Start with the guide Inspect the source