NodlumeNodlume

Color 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, or extract a palette from an image — drop a photo, logo or screenshot and its dominant colors fill the roles, read entirely in your browser. Click any swatch to copy its hex code, or export the whole set as CSS variables. No account is needed.

Drag the primary to move the seed; drag the others to leave the rule.

Harmony

The secondary sits directly opposite the seed on the wheel; the accent nudges 30° past it so the pair reads as a scheme, not a clash.

Mode

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. Browse them by mood — pastel, muted, luxury, retro, dark — in the curated palette gallery.

The five color harmony rules, on one seed

Every row starts from the same indigo seed (#4f46e5) and changes only the rule, so the difference you see is the rule itself. The brand roles rotate around the color wheel; the five neutrals hold still because they take their hue from the seed, not from the harmony. For the reasoning behind the most-searched of these, read complementary color schemes for UI and triadic color schemes for UI, or the overview of every type of color scheme. To start from a named color instead of a hex, the CSS color names reference opens any of its 139 colors here as the seed.

Complementary

#4f46e5 · #dce546 · #8ce546

The secondary sits directly opposite the seed on the wheel; the accent nudges 30° past it so the pair reads as a scheme, not a clash.

The highest-contrast scheme, which is exactly why it needs discipline in an interface: give the complement one job — the call to action, the selected state, the one chart series that matters — and let the primary carry everything else. Used at equal weight, two opposites vibrate against each other; used at roughly 80/20 they make the accent impossible to miss.

Analogous

#4f46e5 · #9f46e5 · #468ce5

Both partners stay within 30° of the seed — the calmest scheme, with hierarchy carried by lightness rather than hue.

Neighboring hues never fight, so analogous palettes feel calm and expensive — but they also hand you no natural accent. The tool compensates by pushing the accent's lightness and saturation; in your own UI, plan to earn emphasis from weight and size rather than hue.

Triadic

#4f46e5 · #e54f46 · #46e54f

Three hues spaced evenly at 120° — vivid and balanced, best when the secondary and accent are used sparingly.

Three evenly spaced hues give a product three distinct signals — brand, success, warning, or three chart series — that stay distinguishable even for readers with common color-vision deficiencies. Keep two of the three quiet or the page turns into a flag.

Split complementary

#4f46e5 · #e59f46 · #8ce546

The two hues flanking the seed's complement — complementary contrast with less tension, the safest high-contrast choice for interfaces.

The complement's two neighbors instead of the complement itself: nearly as much contrast as a complementary scheme with far less tension, and two accents rather than one. It is the rule most interfaces actually want when they think they want complementary.

Monochromatic

#4f46e5 · #9b98d0 · #bbb7f8

One hue throughout; the secondary and accent differ only in saturation and lightness, so nothing competes with the primary.

One hue, many tints and shades. It cannot clash and it cannot signal — so it is the right scheme for a tool whose data brings its own color (a dashboard full of charts) and the wrong one for a marketing page that needs a button to jump.

UI color palettes, answered

What is a complementary color scheme in UI design?
A complementary color scheme pairs a hue with the one directly opposite it on the color wheel — blue with orange, violet with yellow, green with red. In an interface the pair is used unevenly: the primary carries surfaces, links and most buttons, and the complement is reserved for the one element that must stand out. This generator's complementary rule does that by default — the secondary sits at 180° from your seed and the accent at 210°, so the pair reads as a designed scheme rather than a clash. The guide to complementary color schemes for UI covers how to weight them.
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.
Can I extract a color palette from an image?
Yes. Switch the generator to 'From an image' and drop a photo, logo or screenshot on it — or paste one from the clipboard. The picture is downscaled and its pixels are binned into a color histogram in your browser; nothing is uploaded. The most present distinct colors come out with their share of the image, the lightest or darkest one becomes the background, and the vivid ones fill primary, secondary and accent. Click an extracted swatch to leave it out, or press R to promote the next color to primary.
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.

Start freeTry the theme generator

We'd like to use Google cookies to understand how Nodlume is used and to measure our advertising. Nothing loads until you choose, and declining does not affect anything in the app.