NodlumeColor palette generator for UI
This UI color palette generator turns one seed color into a full app theme — a starting point for shadcn color themes, Tailwind tokens, or plain CSS. It is more than five nice stripes — it gives an interface the eight roles it needs: primary, secondary, accent, background, surface, text, muted and border. The brand roles follow color harmony rules; the neutral roles use the seed hue too. Or start with one of 40 curated palettes. Click any swatch to copy its hex code, or export the whole set as CSS variables. No account is needed.
The eight roles as CSS custom properties — paste into your stylesheet's :root.
:root {
--primary: #4f46e5;
--secondary: #dce546;
--accent: #8ce546;
--background: #fcfcfd;
--surface: #f3f3f7;
--text: #121122;
--muted: #59568f;
--border: #e0dfec;
}
/* Generated with Nodlume — https://nodlume.dev/palette-generator */
Real harmony rules
Complementary, analogous, triadic, split-complementary and monochromatic rules guide the secondary and accent roles. They move around the color wheel from your seed — so the colors come from color harmony rules, not random picks.
Roles, not just colors
The five neutral roles come from the seed hue at lightness steps tuned for clarity in light or dark mode. That gives you a semantic UI color palette that fits a design system — and saves you from making your own grays.
40 curated starting points
Editorial, product, brand and portfolio palettes all have named swatches and a clear use case. Pick one, and its colors seed the brand roles. The neutrals then match the set.
UI color palettes, answered
- How is the accent color generated?
- The accent and secondary colors move around the color wheel from your seed. They follow the harmony rule you choose: complementary, analogous, triadic, split-complementary or monochromatic. That keeps them tied to the primary color instead of random — change the rule, and the accent shifts with it. Every swatch copies as a hex code with one click.
- Can I use this palette with Material UI (MUI)?
- Yes. The output is plain hex and CSS variables, so the roles map straight onto an MUI theme: primary, secondary and accent to palette.primary and palette.secondary, background and surface to palette.background.default and paper, and text and muted to palette.text. The same is true for shadcn/ui, Chakra, or custom CSS — nothing in the export is tied to one framework. It also works as a Material UI color palette and a Tailwind theme generator for CSS-first setups.
- Can I use this for shadcn colors?
- Yes — the eight roles map directly onto the shadcn colors a project reads: primary, secondary and accent onto --primary, --secondary and --accent; background and surface onto --background and --card; text and muted onto --foreground and --muted-foreground; border onto --border. Use it as a shadcn color picker: choose a seed with the picker (or start from a curated set), and the harmony rule grows a color palette shadcn/ui can consume as CSS variables. For the grays specifically, this replaces picking a stock base color — the neutrals are tinted with your seed hue instead of coming from a fixed scale.
- What are the eight color roles?
- Three brand roles — primary, secondary and accent — come from the harmony rule. Five neutral roles — background, surface, text, muted and border — come from the seed hue at lightness steps tuned for clarity in light or dark mode. That is the set an interface actually uses, so the palette fits a design system without making up grays.
Take the palette further
These same palettes power Nodlume's full theme system: font pairings, type scale, radius, shadows and a live light/dark preview. It ships as a Tailwind v4 globals.css inside a generated Next.js app built on a visual canvas. For the thinking behind those roles, read how to build a semantic UI color palette.