AccentPal

About this plugin

You picked one color. Now what?AccentPal takes the one accent you already have and builds the rest of the system around it: neutrals, text, surfaces, borders, and success, warning, and error states, in both light and dark mode. Every text-on-background pairing passes WCAG AA. Your accent is never altered.How it works1. Paste your accent. Any hex.2. Compare four pairings (complementary, analogous, split complementary, triadic) side by side on a real dashboard layout, not on swatches, so you can judge what actually works.3. Pick one. Lock any role you want to keep, regenerate the rest.4. Write it to Figma variables: one collection called AccentPal, Light and Dark modes, one variable per role. Run it again after a tweak and it updates in place instead of duplicating.What you get12 roles: accent, on-accent, accent-hover, secondary, background, surface, border, text, text-muted, success, warning, error. Contrast ratios shown next to every text color. Copy the whole palette as CSS variables in one click.Free and ProFree: unlimited accents and pairings, live preview in both modes, contrast ratios, CSS export, and one write to Figma variables.Pro: unlimited writes to Figma variables. $5 a month, or $39 once for life, purchased through our own checkout (Polar). One license works on up to three machines.Made by a designer who kept picking one color and getting stuck on the rest.Support: [email protected]: https://accentpal.tuanopoly.comPrivacy: https://accentpal.tuanopoly.com/privacy