Getting Started

Installation

The package ships ES module and UMD builds with bundled TypeScript types. React and React DOM 18 or 19 are peer dependencies.

npm install chromakit-react

Framework setup

ChromaKit works in any React app. It renders on the client, so server frameworks need the picker loaded client-side.

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

export function MyColorPicker() {
  const [color, setColor] = useState('#6366F1');
  return <ColorPicker value={color} onChange={(c) => setColor(c.hex8)} />;
}

import dynamic from 'next/dynamic';

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

import { ColorPicker } from 'chromakit-react';
import 'chromakit-react/chromakit.css';
// Works out of the box

Why OKLCH?

OKLCH is perceptually uniform — equal numeric 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 between two colors.
• Consistent scales — generate tonal palettes with uniform visual weight.
• Beyond sRGB — CSS oklch() can describe wide-gamut colors; ChromaKit maps them into sRGB.

// 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

Browser support

ChromaKit computes OKLCH in JavaScript, so the browser needs CSS oklch() support only if your app renders that string.