CSS Variables Editor
The Browser Extension you didn't know you needed
AI-generated color palettes
Accessibility testing
Support for daisyUI and shadcn/ui
View on a larger screen for a better interactive demo
Document your Color Palette
Quickly see all the reusable color values in your Design System.
All global CSS variables are shown. Your codebase becomes its own documentation.
Change colors from the browser
Changing a color in the Browser Extension updates the CSS Variable in the webpage, showing you the changes in real-time.
Supercharge your designing-in-code workflow.
Bridge the design / technical gap. Tools like Figma are great but there's no substitute for designers interacting with your actual app and code.
Check Accessibility
Check the contrast of your color palette for WCAG guidelines.
Easily adjust saturation and lightness when needed.
Support for daisyUI and shadcn/ui
See descriptions of colors from the official documentation, ensuring they’re used correctly in your app.
Make sure less commonly used states like popovers, focus rings, etc aren't overlooked.
AI-generated color palettes
Generate color palettes in seconds and see the results in your actual app.
Function Calling is used to guarantee the response from the AI matches your color palette.
* requires a OpenAI or Anthropic API Key
Export your changes
Export changed CSS Variables.
Support for storing colors in channels as recommend by the Tailwind docs.
