HeroUI v3 Color Generator

About this plugin

Instantly create all the color states your HeroUI components need — default, hover, and soft variants — without manual calculation.Pick a base color and foreground color, name your color (defaults to "accent"), and this plugin generates 6 color variables — base, foreground, hover, soft, soft-foreground, soft-hover — using perceptually uniform OKLab mixing. Variables are saved directly to your Figma Variables collection.Features:• Input colors in HEX or OKLCH (perceptual color space) mode• Live button preview (default, hover, soft, soft hover)• Real-time color token swatches with HEX and alpha values• One-click Figma Variable generation• Organize variables into new or existing collections• Re-running with the same name updates existing variables (no duplicates)Note: Variables are assigned to the first mode of the selected collection.Built for the HeroUI v3 (Beta) design system. Works with any Figma file.