Design beautiful, accessible color palettes with real-time previews across components. See your changes instantly as you craft the perfect design system.
Powerful tools to create beautiful, accessible color palettes
See your color changes instantly across all components and sections. No lag, no refresh.
Built-in contrast checking ensures your designs meet accessibility standards automatically.
Export your palette as CSS, Tailwind, SCSS, OKLAB, or RGB formats with one click.
“This tool has completely transformed how I approach color selection for my projects.”
Sarah Chen
Product Designer at Figma
“Finally, a color tool that actually cares about accessibility. Game changer!”
Marcus Johnson
Frontend Developer
“The export options are fantastic. I use it daily for all my client work.”
Emily Rodriguez
Brand Designer
Choose the plan that works for you
Preview your color palette across common UI elements
Success
Changes saved
Info
New feature
Click the Export button in the toolbar and choose your preferred format from CSS Variables, Tailwind CSS, SCSS, OKLAB, or RGB.
The colored dot next to each color shows WCAG compliance: green (4.5:1+ ratio - passes AA), yellow (3:1+ - passes AA Large), and red (below 3:1 - fails WCAG).
Yes! We support Google Fonts. Select your preferred heading and body fonts from the dropdown menus in the toolbar.
Absolutely. Click the sun/moon icon in the toolbar to toggle between light and dark preview modes.
Every color and font change is automatically saved to history. Use the undo/redo buttons to navigate through your recent changes.