Getting Started

ChromaKit is a zero-dependency React color picker with first-class support for OKLCH, OKLAB, and every traditional color space. Install it, import the stylesheet, and render.

Installation

ChromaKit ships as an ES module with bundled TypeScript types.

npm install chromakit-react

Basic usage

Import the component and its stylesheet, then wire it to state. onChange receives a ColorValue with every format pre-converted.

Presets

Framework setup

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

Next.js App Router

Mark the component with 'use client'.

'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.hex)} />;
}

Next.js Pages Router (SSR)

Load it dynamically with ssr: false.

import dynamic from 'next/dynamic';

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

Vite / Create React App

Works out of the box.

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

Browser support

ChromaKit runs everywhere modern React runs. CSS oklch() output is only needed by your app if you render the string — the picker computes OKLCH in JS regardless.

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