About Perceptual Palette
Color ramps that actually work
Generate professional color palettes with smooth, visually consistent gradients and built-in accessibility checking. Export ready-to-use tokens for design systems or polished color boards for client presentations—no manual tweaking required.
From concept to production
- Build design system tokens: Export W3C Design Tokens JSON (draft-0 format) with semantic naming—drop directly into Figma, Style Dictionary, or your build pipeline.
- Create presentation materials: Generate labeled SVG color boards that open cleanly in Figma, Illustrator, or Sketch for brand guidelines and client decks.
- Check accessibility instantly: See WCAG 2.2 contrast ratios (AA/AAA) for every color against your chosen background—no separate tools needed.
- Share and iterate: Every palette state is encoded in the URL—bookmark, share with teammates, or revisit later without losing your work.
Under the hood
Pick two anchor colors (start and end), adjust a few options, and get a smooth ramp. The tool handles the math to ensure perceptually even steps—no more manual fiddling with lightness curves.
Controls:
Lightness, Chroma (saturation), and Hue sliders with live preview. Familiar to anyone who's used HSB/HSV pickers, but producing better results under the hood.
Options:
Hue arc direction (shortest or long), lightness easing (linear or smoothstep), and steps per segment (3–15 swatches).
Output:
Auto-named tokens (e.g., acme-blue-500), deterministic HEX values, and metadata (contrast, perceptual difference between steps, gamut flags).
For the technically curious
OKLCH color space
Uses the OKLCH (OKLab cylindrical) color space for interpolation. Unlike HSL or RGB, OKLCH is perceptually uniform—equal numeric steps produce equal perceived lightness changes. This eliminates common issues like muddy midpoints or inconsistent contrast in traditional color scales.
Interpolation algorithm
Piecewise OKLCH interpolation between anchors with optional smoothstep easing applied to Lightness only. Hue interpolation respects shortest-arc or long-arc modes with 360° wrap handling. Colors are automatically clamped to sRGB gamut using chroma reduction while preserving Lightness and Hue.
Client-side architecture
Runs entirely in-browser (Next.js/React). No server required for core functionality—palette state is encoded in URL query parameters (versioned base64 payload). Exports use Blob downloads. Privacy-first: no tracking, no accounts, no cloud storage.
Project links
- Repository: fredolfo/perceptual-palette
- Author site: fredolfo.com
- LinkedIn: linkedin.com/in/fredolfo
- GitHub: github.com/fredolfo
Credits
- OKLCH / OKLab: Boris Smus, Björn Ottosson et al. See The OKLab/OKLCH color space.
- color-picker-element by GoogleChromeLabs: github.com/GoogleChromeLabs/color-picker-element.
- Color utilities by Culori.
- Tailwind CSS: tailwindcss.com.