HeroUI v3 Color Generator
by 세진
Generate HeroUI v3 color variables from any base color
Installs
5
Likes
0
Users
26
Views
26
Preview
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.