What is OKLCH and why does Chroma Extractor use it?

OKLCH is a perceptually uniform color space with three axes: Lightness (L), Chroma (C), and Hue (H). Unlike HEX or HSL, equal numeric changes in OKLCH produce equal perceived changes in color — making it ideal for building accessible, consistent design systems. CSS now supports oklch() natively in all modern browsers.

Is my image uploaded to a server?

No. Chroma Extractor runs entirely in your browser. Your image is loaded into an HTML canvas and never leaves your device. No data is sent to Tokven's servers.

How many colors can I sample?

You can add as many samplers as you need using the + button. Each sampler picks one pixel-accurate color from your image.

What image formats are supported?

Chroma Extractor supports any image format your browser can render, including JPEG, PNG, WebP, GIF, and SVG.

Image Palette — Extract Colors from Any Image

Tokven's Image Palette lets you sample exact pixel colors from any photo or image. Drag color samplers to the spots you want, get HEX and OKLCH values instantly, and export to CSS or a full design system.

Open Image Palette →

What is OKLCH?

OKLCH is a perceptually uniform color space — unlike HEX or HSL, colors that look similar have similar values, making it perfect for systematic design work. The three axes are:

L — Lightness: 0 (black) to 1 (white)
C — Chroma: 0 (grey) to ~0.4 (vivid)
H — Hue: 0°–360° around the color wheel

CSS supports oklch() natively in Chrome, Firefox, and Safari.

Privacy

Your image never leaves your device. All color sampling runs on an HTML canvas in your browser. Nothing is uploaded to any server.

From palette to design system

Once you've sampled your colors, click "Build design system" to open Tokven's full token generator with your palette pre-loaded. Add typography, spacing, shadows, and dark mode — then export as CSS variables, Tailwind v4, shadcn/ui, or W3C DTCG JSON.

Build a full design token system →

Open Image Palette

Font Pairing Tool

Tokven — Design token generator