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.

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.