The Browser Extension for managing colors in CSS Variables

screenshot of the extension in action

View on a larger screen for an interactive demo

AI-generated color palettes

Accessibility testing

Support for daisyUI and shadcn/ui

Install from Chrome WebStore

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.

ShadCN colors
DaisyUI colors

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 an OpenAI API Key

Export your changes

Export changed CSS Variables

Support for storing colors in channels as recommend by the Tailwind docs

@jchetters