Zero runtime dependencies.
React and React DOM 18 or 19 are the only peer dependencies. Nothing else is installed.
ChromaKit
FROM COMPOSITION TO COMPONENT
Ready to use.
React color picker & conversion toolkit.Scroll to assemble ↓
npm install chromakit-reactStart building 01 / IMPLEMENT
Your color.
Your application.
Pass a value in. Get every format back. Keep state in React; ChromaKit handles the controls and the conversions.
Installation & setupColorField.tsxReact / TypeScript
import { useState } from 'react';
import { ColorPicker } from 'chromakit-react';
import 'chromakit-react/chromakit.css';
export function ColorField() {
const [color, setColor] = useState('#ff6b6b');
return (
<ColorPicker
value={color}
onChange={(next) => setColor(next.hex8)}
/>
);
}This renders the default ColorPicker. The picker at the top of the page is a custom layout built from the same components.
02 / THE ESSENTIALS
Small kit.
Room to build.
Six color formats.
OKLCH, OKLAB, HSL, HSV, RGB, and HEX. Every change returns all six, so you store the one you need.
Whole picker, or its parts.
Use ColorPicker as is, or compose the area, sliders, and inputs yourself. Style both with --ck-* variables.
03 / KEEP GOING