ChromaKit

The Modern React Color Picker with Perceptually Uniform Colors

Build better design systems with OKLCH color space support

Live Demo • Documentation • Migration Guide

npm install chromakit-react

See it in action →

Full documentation lives on the web, where every API is paired with a live, interactive example: chromakit.site/docs →

Why Developers Choose ChromaKit

The only React color picker built for modern design systems. While other pickers struggle with consistent color scales and muddy gradients, ChromaKit uses perceptually uniform color spaces (OKLCH, OKLAB) to deliver what designers expect and users see.

// Get started in 30 seconds
import { ColorPicker } from 'chromakit-react';
import 'chromakit-react/chromakit.css';

<ColorPicker onChange={(color) => console.log(color.oklch)} />;

Perfect For

• Design System Engineers — Generate consistent tonal scales with predictable lightness
• Accessibility Teams — Built-in WCAG AA/AAA contrast checking
• App Developers — Zero dependencies, ~10KB bundle, works everywhere
• UI Libraries — Composable primitives, full TypeScript support

Comparison

| Feature | ChromaKit | react-colorful | react-color | | ------------ | ----------- | -------------- | ----------- | | Bundle Size | ~10KB | ~3KB | ~28KB | | OKLCH/OKLAB | ✅ | ❌ | ❌ | | Composable | ✅ | Limited | ❌ | | TypeScript | ✅ Native | ✅ | ⚠️ @types | | Dark Mode | ✅ Built-in | Manual | Manual | | Dependencies | 0 | 0 | Many |

Choose ChromaKit for: Design systems, OKLCH support, accessibility features, composability Choose react-colorful for: Minimal bundle size (<5KB), traditional RGB/HSL only

Migration Guide available for switching from react-colorful or react-color.

Quick Start

Controlled Component (recommended)

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

function App() {
  const [color, setColor] = useState('#6366F1');

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

That's it — a fully-featured color picker with OKLCH support, color history, presets, and copy-to-clipboard, out of the box.

New to the library? The Getting Started guide walks through installation, framework setup, and your first picker with live examples.

Why OKLCH?

OKLCH is a perceptually uniform color space — equal numerical changes produce equal visual differences, which HSL cannot promise.

• Predictable lightness — a given L looks equally bright at every hue
• Smoother gradients — no muddy middle tones
• Consistent scales — generate tonal palettes with uniform visual weight
• Wider gamut — reach more vivid colors on modern displays

// HSL: same lightness value, different perceived brightness
hsl(240, 100%, 50%) // Blue  — looks dark
hsl(60, 100%, 50%)  // Yellow — looks bright

// OKLCH: same lightness = same perceived brightness
oklch(50% 0.2 240)  // Blue   at 50% brightness
oklch(50% 0.2 60)   // Yellow at 50% brightness

Read more about OKLCH →

Framework Setup

Next.js App Router — mark the component with 'use client':

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

Next.js Pages Router (SSR) — load it dynamically:

import dynamic from 'next/dynamic';

const ColorPicker = dynamic(
  () => import('chromakit-react').then((mod) => mod.ColorPicker),
  { ssr: false }
);

Vite / CRA — works out of the box.

Full details: Framework setup docs →

API Reference: <ColorPicker />

The batteries-included component — color area, hue/alpha sliders, format-switchable inputs, presets, history, and copy.

| Prop | Type | Default | Description | | ------------------ | --------------------------------------------- | -------------- | --------------------------------------------------- | | value | string | — | Controlled color in any supported format | | defaultValue | string | '#6366F1' | Initial color for uncontrolled mode | | onChange | (color: ColorValue) => void | — | Fires on every change (drag, typing) | | onChangeComplete | (color: ColorValue) => void | — | Fires when a change settles (pointer up) | | formats | ColorFormat[] | all 11 formats | Which format tabs the inputs expose | | showAlpha | boolean | true | Show the alpha (transparency) slider | | showInputs | boolean | true | Show the numeric / text input fields | | showPreview | boolean | true | Show the color preview swatch | | showPresets | boolean | true | Show the preset color swatches section | | showCopyButton | boolean | true | Show the copy-to-clipboard button | | presets | string[] | built-in | Custom preset colors | | presetGroups | PresetGroup[] \| Record<string, string[]> | built-in | Named preset groups selectable from a dropdown | | enableHistory | boolean | true | Remember recent colors in localStorage | | historySize | number | 10 | Maximum number of colors kept in history | | width | number | auto | Picker width in pixels | | height | number | auto | Color-area height in pixels | | className | string | — | Extra classes on the root (the theming hook) |

onChange and onChangeComplete receive a ColorValue with every format pre-converted (hex, hex8, rgb, rgba, hsl, hsla, hsv, hsva, oklab, oklch, oklcha), so you never convert manually.

Full ColorPicker reference, with live prop demos →

Explore the docs

Everything below has a dedicated page with live, interactive examples on the docs site:

• Composable Components — build your own picker from ColorArea, HueSlider, AlphaSlider, the input groups, ColorPreview, PresetColors, RecentColors, and more.
• Hooks — useColorState, usePointerDrag, useDebounce.
• Color Utilities — ~24 conversion functions plus contrast checkers and harmony generators, with a live converter.
• Theming — reskin the picker by overriding --ck-* CSS variables on a class.
• Troubleshooting — common gotchas and the full list of type exports.

Browser Support

| Environment | Minimum version | | ---------------------- | --------------- | | Chrome / Edge | 88+ | | Firefox | 87+ | | Safari | 15+ | | Node.js (SSR / build) | 20+ |

ChromaKit computes OKLCH/OKLAB in JavaScript, so it works even where the CSS oklch() syntax isn't yet supported — you only need oklch() support in your app if you render the string output.

TypeScript

ChromaKit is written in TypeScript and ships complete declarations. Every public type is importable:

import type {
  RGB, RGBA,
  HSL, HSLA,
  HSV, HSVA,
  OKLAB, OKLABA,
  OKLCH, OKLCHA,
  ColorFormat,
  ColorValue,
  ColorPickerProps,
  PresetGroup,
  PresetGroupsInput,
} from 'chromakit-react';

More at Troubleshooting → Type exports.

Resources

• Documentation — full API with live examples
• Migration Guide — switch from react-colorful / react-color
• Contributing Guide — help improve ChromaKit
• Changelog — release notes

Support

• Issues — report bugs
• Discussions — ask questions
• Sponsor — support development

License

MIT © Garrett Siegel

Color science based on the OKLCH specification (W3C) and Björn Ottosson's Oklab research.

chromakit.site • Star on GitHub • Try the Live Demo