How to build a semantic UI color palette

Start with jobs, not colors

A palette becomes a system when every color has a job. #2563eb is a swatch; primary is a decision about emphasis. The role can keep its meaning while its value changes between brands, themes, or accessibility modes.

Begin with the smallest useful vocabulary:

• Background — the page-level canvas.
• Surface — cards, panels, menus, and raised regions.
• Text — the default foreground.
• Muted — supporting text and quiet controls.
• Border — structural separation.
• Primary — the dominant action or brand emphasis.
• Secondary — a quieter alternative action.
• Accent — selective emphasis, not a second primary.

Nodlume's free theme generator edits these roles directly and previews them in light and dark interfaces.

Choose an anchor color

Start with one color that represents the product's tone. Avoid choosing it in isolation: place it behind button text, beside neutral surfaces, and next to destructive and success states.

A highly saturated anchor may look energetic as a chip but tiring across navigation and large fills. UI colors usually benefit from enough chroma to remain recognizable without vibrating against white or dark backgrounds.

Build several lightness steps around the anchor. You need pale values for subtle backgrounds, middle values for borders and inactive controls, and stronger values for actions. A single brand hex cannot safely fill every role.

Construct the neutral system

Most of an interface is neutral. Backgrounds, surfaces, text, borders, dividers, disabled states, and placeholders will appear far more often than the brand color.

Use a consistent undertone. A cool product may use blue-gray neutrals; a warmer editorial interface may lean toward stone. Mixing unrelated gray families makes the page feel inconsistent even when each individual value looks reasonable.

Keep adjacent surfaces visibly distinct without outlining everything. Background and card colors can be close, but their difference must survive ordinary displays and dark mode.

Add supporting and accent colors

A supporting color should make the anchor easier to use, not compete for attention. Analogous hues feel cohesive; complementary hues create energy; split complements introduce contrast with less tension.

Reserve the accent for moments that deserve interruption: a selected visualization point, a new feature, or one small callout. If primary and accent appear with equal weight, the interface has no clear hierarchy.

Status colors are a separate vocabulary. Success, warning, destructive, and informational states must remain distinguishable and must never communicate by hue alone. Pair them with labels, icons, or structural differences.

Test contrast by role

Contrast is a relationship between a foreground and a background, not a quality a color possesses on its own. Test the actual pairs the product will render:

• primary foreground on primary;
• text and muted text on every surface;
• input borders against their container;
• focus indicators beside the control and its surroundings;
• status text inside tinted status backgrounds.

Test hover, pressed, selected, disabled, and focus states as well as the default. Many palettes pass in a static specimen and fail as soon as interaction changes one side of the pair.

Design dark mode as another assignment

Dark mode is not a photographic negative. Preserve the semantic roles and assign values that work in the new environment. Raised surfaces usually become slightly lighter than the page; text becomes bright without becoming pure white; large saturated regions may need less chroma.

The role system is what makes this manageable. Components continue asking for surface, border, and primary; only the theme changes what those names resolve to.

Validate in a real interface

A row of swatches cannot reveal hierarchy. Preview the palette in a page containing navigation, cards, fields, buttons, charts, and system messages. Look for unclear surfaces, overused emphasis, weak secondary text, and states that disappear.

When the roles hold up across those contexts, export the tokens rather than copying individual values. The Nodlume theme generator provides the full role editor, live light/dark preview, and Tailwind v4 output in one browser-based tool.