Choosing a colour palette for UI design is different from choosing colours for a poster. An interface needs colours for states, feedback, text hierarchy, borders, hover effects and dark mode. A palette of five pretty swatches is not enough. You need a system.
Here is a step-by-step way to build one from a single colour.
Step 1: Choose the primary
The primary colour does the most important job: it tells people what they can click. It appears on main buttons, links, active states and focus rings.
Pick one you are confident about, often the brand colour. Check two things straight away: it must contrast well with white (or with your dark background), and it must look distinct from your future error red and success green.
Step 2: Build the neutrals
Neutrals carry 80 to 90 percent of most interfaces: backgrounds, surfaces, borders, dividers, text and disabled states. Get them right and the UI looks polished even with a plain primary.
- Create a scale of about ten greys from near-white to near-black.
- Tint them very slightly towards the primary hue, so they share its temperature.
- Assign roles: page background, card surface, subtle border, strong border, secondary text, primary text.
Step 3: Add semantic colours
Four colours carry meaning: success (green), warning (amber), error (red) and info (blue). Keep them close to convention, since people already read them that way, and tune their saturation to sit with your primary.
Step 4: Make tints and shades
Each colour needs a scale, usually from 50 (lightest) to 900 (darkest). You use the light steps for backgrounds like a success banner, the middle steps for the main colour and the dark steps for text on those backgrounds and for hover and pressed states.
Generate them by changing lightness in even visual steps, and adjust saturation by eye at the extremes, where colours tend to look washed out or muddy.
Step 5: Check accessibility
- Body text needs at least 4.5:1 contrast against its background.
- Large text and interface elements such as icons, input borders and focus rings need at least 3:1.
- Never use colour alone to carry meaning. Pair the error red with an icon or text.
Check every real pairing: primary text on background, white text on primary buttons, secondary text on cards, error text on the error background.
Step 6: Plan dark mode now
Dark mode is not an inverted light mode.
- Use dark grey backgrounds, not pure black, to reduce harsh contrast.
- Show elevation with slightly lighter surfaces instead of shadows.
- Lower the saturation of the primary and semantic colours, which glow on dark backgrounds.
- Recheck every contrast pair.
Step 7: Name colours by role
Name tokens by what they do, not what they look like: "text-secondary", "surface-raised", "border-subtle", "action-primary". Then a rebrand changes values, not your whole codebase. Most of the design system examples worth studying work this way.
Where to find palettes that already work
The fastest way to learn is to study interfaces with colour you admire. Inspect them to get exact values (how to find the colors and fonts used on any website), save the screenshot with the palette in the note, and compare how much of the primary they actually use. It is usually far less than you expect.
GetRef reads the text in every screenshot you save, so a note like "neutrals tinted blue, primary #3b5bfd" becomes searchable. Build up a handful of these and choosing the next palette gets much faster. For the general principles behind matching colours, see how to find colors that go together.
Common questions
- How many colors should a UI palette have?
- Usually one primary colour, one optional secondary, a neutral scale of eight to ten greys, and four semantic colours for success, warning, error and info. Each colour then gets a scale of lighter and darker steps, so the palette may hold dozens of values but only a handful of hues.
- What is the best color palette for UI design?
- There is no single best palette. A good UI palette has one confident primary colour, well-tuned neutrals that carry most of the interface, clear semantic colours, and contrast that passes accessibility checks for text and controls.
- How do I make a dark mode palette?
- Do not just invert the light palette. Use dark greys rather than pure black for backgrounds, reduce the saturation of your primary and accent colours, raise elevated surfaces slightly lighter, and recheck every text contrast pair.
- Should UI neutrals be pure grey?
- Neutrals tinted very slightly towards your primary hue usually look more polished than pure grey, because they share a temperature with the rest of the palette. Keep the tint subtle.
