✦Color Playground · Brand Building Tools
Build Beautiful Color Systems
That Scale
A suite of precision color tools built on OKLCH — generate palettes, blend colors, craft gradients, and export to CSS, Tailwind, or JSON.
11
Color Tools
OKLCH
Color Space
20+
Moods
18+
Cultures
All Tools
Everything you need for color
◎OKLCH
Spectral Arc
Precision color builder in perceptual OKLCH space. Adjust Lightness, Chroma & Hue with seed-based reproducibility and gamut control.
⟡Generate
Random Palettes
Pick a base color, choose a harmony type, and instantly generate beautiful palette combinations.
⊞Control
Custom Palettes
Drive palette creation with your own color choices. Full harmony-based generation from a color you define.
⊕Expand
Palette Expander
Feed in your existing palette and generate additional harmonious colors that seamlessly extend your set.
⊗Metallic · Neon
Blend Colors
Create metallic, neon, or branded color variations. Blend your palette with Gold, Neon, Neutral, or any custom color at 6 intensity steps.
▤Tints & Shades
Tonalist
Generate full tint and shade scales from your palette colors. Standard or Granular mode. Export to CSS, Tailwind, or JSON.
∿OKLCH Scale
Bezier Blend
Bezier-curve color scales in OKLCH. Choose control points, set easing, define steps. Export to CSS, Tailwind, JSON, or SCSS.
◫Linear · Radial · Conic
Gradient Tool
Full CSS gradient builder with 48 presets, custom stops, opacity control, and live previews on real UI elements.
◑Warm · Cool
Temperature Shifter
Shift your entire palette warm or cool. Six cinematic presets from Candlelight 1800K to Twilight 10000K+.
✦20 Moods
Mood Palettes
Smart randomizer for mood-constrained brand palettes. 20 moods, 5 harmony modes, WCAG AA/AAA contrast lock.
⊛18 Cultures
Culture Palettes
Culturally-grounded palettes from 18 world traditions — Japanese Wabi-sabi to West African Kente. Festivals tab included.
◎
OKLCH-native
Every tool operates in perceptual OKLCH color space — so lightness really means lightness, and hue shifts feel natural.
⊞
Export anywhere
Copy-ready CSS variables, Tailwind config, JSON, and SCSS. Drop colors directly into your design system.
✦
Constraint-aware
Mood & culture generators enforce WCAG AA/AAA contrast ratios, harmony modes, and culturally authentic hue ranges.
◑
Cinematic presets
Temperature presets from Candlelight 1800K to Twilight 10000K+ — designed for realistic lighting simulation.