Color palette basics for readable UI and brand work

A palette is a small set of colors that work together for brand or UI work. Start with one base hue, then derive companions with clear roles: background, text, accent, and feedback states. Pretty swatches alone are not a system — roles are what keep interfaces readable when content changes.

Relationships that usually work

• Analogous: neighbors on the wheel — calm and cohesive for product UI.
• Complementary: opposites — high energy; use sparingly for accents and alerts.
• Triadic: three evenly spaced hues — lively, but keep two subdued so one can lead.
• Neutrals: soft grays or warm stones for large surfaces so accents stay readable.

Contrast before vibes

Pretty colors fail if body text disappears. Check contrast for primary text on backgrounds and for buttons on their resting state. Aim for readable UI first, then refine saturation and mood. WCAG AA is a practical bar for most product text; large headings can sometimes pass with slightly lower ratios, but do not rely on that for small labels.

Also test hover, focus, and disabled states. A palette that only works at rest will feel broken the moment someone tabs through a form. Dark mode is not “invert everything” — rebuild roles with the same brand hue at different lightness levels.

Assign roles before you fall in love with swatches

Five pretty colors are not a product palette. Name them by job: canvas (page background), surface (cards), text, muted text, accent, and semantic feedback (success, warning, danger). If two colors both want to be “the brand,” pick one for large areas and one for buttons. Complementary pairs are exciting in a mood board and exhausting on a dashboard — keep the loud color for one job.

Then test the palette on a dense screen, not a hero. Tables, form labels, and disabled buttons expose contrast failures that a landing page hides. GenShelf’s color palette generator can lock swatches you want to keep, check WCAG contrast, and extract a starting hue from a photo in the browser so you are not sampling by eye from a compressed screenshot.

A practical workflow

1. Pick a base brand color you already like or extract from a photo.
2. Generate a harmony in a free color palette generator and lock the swatches you want to keep.
3. Assign roles (background, text, accent, success/warning) and test on real UI chrome — buttons, cards, and dense tables.
4. Export values your stack understands (hex, OKLCH, CSS variables, Tailwind tokens).

Modern formats worth knowing

Hex is still the lingua franca, but OKLCH helps you adjust lightness without accidental hue shifts, and Display P3 covers wider gamuts on newer screens. When you share a palette with teammates, include both a human-friendly preview and machine-friendly tokens so engineering does not re-translate by eye.

GenShelf’s palette tool can explore options quickly, check contrast, extract colors from an image in your browser, and share a link when a set feels right. Pair it with placeholder layouts using a lorem ipsum generator so you judge color against realistic text density — not empty boxes. When you are ready to stress-test readability, follow color contrast that passes.