Perceptual Color Science for React
The Modern Color Picker
for Design Systems
Built with OKLCH for perceptually uniform colors. Composable components. Zero dependencies. Built for React 19.
npm install chromakit-reactOKLCH Color Space
Perceptually uniform colors that match human vision. Create smooth gradients without muddy middle tones.
Composable Components
Build custom pickers with ColorArea, HueSlider, and more. Complete control over your design.
Performance First
60 FPS interactions with optimized React 19 hooks. Zero dependencies. Built for production.
Try It Live
Experience the smoothest color picker for React
Presets
Quick Start
Get started in seconds with zero configuration
For complete API documentation and advanced usage, read thefull documentation →
Basic Usage
import { ColorPicker } from 'chromakit-react';
import 'chromakit-react/chromakit.css';
import { useState } from 'react';
function App() {
const [color, setColor] = useState('#7c3aed');
return (
<ColorPicker
value={color}
onChange={(colorValue) => setColor(colorValue.hex)}
/>
);
}Build Your Own
Compose custom pickers with individual components for complete control
import {
ColorArea,
HueSlider,
AlphaSlider,
useColorState
} from 'chromakit-react';
function CustomPicker() {
const { hsva, colorValue, updateColor } = useColorState('#7c3aed');
return (
<div className="space-y-4">
<ColorArea hsva={hsva} onChange={updateColor} />
<HueSlider hsva={hsva} onChange={updateColor} />
<AlphaSlider hsva={hsva} onChange={updateColor} />
</div>
);
}Start Building Today
Join developers building modern design systems with OKLCH
npm install chromakit-react