Material3 theme generator

About this plugin

Material3 theme generatorPick one brand color — get your entire design system generated automatically.Using Google's Material Design 3 color science (HCT color space), the plugin creates all primary, secondary, tertiary, surface, and background colors for both light and dark modes. No manual color picking needed.How it works1. Pick your brand color from any object on canvas, extract from an image, or type a hex code.2. Choose a color harmony — Balanced, Smooth, or Vibrant.3. Preview the full light/dark palette side by side, then hit Apply.4. Figma variables are created instantly with light/dark mode support.5. Generate 36 themed UI components and 4 example pages to see your theme in action.What you get• Complete color system — 50+ tokens generated from a single color• Light & dark modes — native Figma variable modes, switchable in one click• 3 harmony styles — Balanced (complementary), Smooth (analogous), Vibrant (triadic)• Advanced mode — set separate primary colors for light and dark themes independently• 36 UI components — Button, Input, Card, Dialog, Table, Tabs, Accordion, Toast, and more• 4 example pages — Login, Dashboard, Settings, Mail app layouts• Code export — CSS variables, Tailwind config, or shadcn/ui in Hex, HSL, or OKLCH• Image color extraction — pick colors directly from images in your design• Color library — save and organize your favorite colors across sessionsComponent categories• Essentials (10) — Button, Input, Textarea, Label, Checkbox, Radio, Toggle, Select, Slider, Input OTP• Display (9) — Badge, Avatar, Card, Table, Separator, Skeleton, Progress, Spinner, Kbd• Overlays (9) — Dialog, Alert Dialog, Alert, Toast, Tooltip, Popover, Hover Card, Drawer, Sheet• Navigation (8) — Tabs, Accordion, Breadcrumb, Dropdown Menu, Menubar, Navigation Menu, Pagination, Toggle GroupQuestions or feedback? [email protected]