Skip to main content
Pigment
Free to use in your browser

The Science of Color.
The Art of Design.

Build color systems in the perceptual OKLCH color space, check contrast with WCAG 2 and APCA, preview them on real components, and export tokens for code and Figma.

Powered by

WCAG 2 + APCA checksOKLCH color spaceAI palette ideas (Gemini)Tokens for code & Figma
Theme from a prompt

Just describe your vibe.
We handle the math.

Stop moving color pickers randomly. Type a few style keywords and Pigment picks a matching starting theme. Then fine-tune it with OKLCH controls and check contrast before you export.

Prompt

Generated System

Text on primary: WCAG 5.5:1
APCA Lc 79

What's inside

Perceptual color science
OKLCH
Contrast checks
WCAG 2 + APCA
Export formats
10+
Runs in your browser
Free

One tool, many styles

Example palettes for different kinds of products, from strict corporate systems to playful consumer brands.

Fintech Trust

CorporateClean

A secure, professional blue for banking apps.

E-Commerce Warmth

RetailFriendly

Inviting oranges and reds to drive conversion.

SaaS Dashboard

ProductDark Mode

Neutral grays with a punchy primary accent.

Don't settle for “eyeballing” it.

Mixing colors in plain RGB ignores how people perceive color. Pigment works in the OKLCH color space for smoother blends and measures text contrast instead of guessing.

Gradient Smoothness

Interpolated in OKLCH: the blend stays vivid through the middle.

Text Contrast

Is this text readable?
Passes WCAG AA (7.6:1) · APCA Lc 63

The Pigment Way (OKLCH)

  • ✓

    Perceptual color space. OKLCH tracks lightness and hue much closer to how people actually see color.

  • ✓

    Contrast is measured, not guessed. Pigment checks color pairs with WCAG 2 ratios and APCA so you can spot weak combinations.

Everything you need to master color

Pigment isn't just a picker. It's a toolkit for building, checking and exporting design-system colors.

Theme from a prompt

Describe a style in a few keywords and get a matching starting theme to fine-tune.
“Modern fintech, trustworthy blue”

Real-time Preview

Stop guessing. See your colors instantly on dashboard, landing page and mobile app mockups, in light and dark mode.

Data Visualization

Generate categorical and heatmap scales and test them on live bar, donut, line and area charts.

Tokens for Code & Figma

Export design tokens as JSON and bring them into Figma with the companion Pigment plugin, or use them directly in code.

WCAG 2 + APCA Contrast

Check text contrast with classic WCAG 2 ratios and the newer APCA readability model to catch hard-to-read pairs.

Production-ready Exports

Export to Tailwind, shadcn/ui, CSS & SCSS variables, JSON, SwiftUI, Jetpack Compose, Android XML, Flutter and more.