How to choose a color palette for an app

What each color in an interface is for

Color in an interface is a set of roles, and a palette that works is one where every color has exactly one job. There is the accent, which marks the thing the screen is about. There are the surfaces: the page, the raised card and the sunken field. There is the text, in three strengths, the border, and the state colors.

The list is short on purpose. When a color has no job, it is decoration, and decoration has to be justified every time it is used. A second accent usually appears because one screen needed to say something special, and the special thing then spreads. Assigning the roles before you pick the colors is what stops that spread.

Canvasola has the roles built in rather than as a blank palette. The light and dark theme token sets each carry a background, a surface, an alternate surface, a border, three levels of text, a primary color, a success color and a danger color. Working inside those roles is the shortest route to a palette that holds together.

• Accent: the one thing the screen is about
• Surfaces: the page, a card on it, and a field inside that card
• Text: three strengths rather than one gray
• Border: the edge that separates without shouting
• Success and danger: state, never decoration

Note: There is no warning color in the shipped token sets, so a product that needs one adds it as a named role of its own and uses it sparingly. The component guide covers how a small set of roles survives across a whole set of screens.

Pick one accent and test it in both themes

One accent per product is the rule that makes a palette coherent. The accent marks the primary action, the selected state and the one element the screen is about, and it is most powerful when it is rare. An accent on every card title reads as a decoration pattern rather than as a signal.

Choose the accent by contrast rather than by taste. It has to be clearly different from every surface it will sit on, and it has to hold up against the text color right next to it. A mid tone that looks handsome on a swatch can turn to mud against a dark surface, which is why the test belongs in the app rather than on a color picker.

• One accent across the whole product
• Use it on the primary action and on the selected state
• Choose for contrast against every surface it sits on
• Look at the accent again after switching the theme

Note: The canvas carries its own color controls for drawn elements, with a fill that switches on and off, a fill color, a stroke that switches on and off, a stroke color and a stroke width, so a diagram drawn next to the mockup can use the same accent.

Surfaces and text need contrast, not personality

Surfaces are the background of everything, and their job is to separate without competing. The page, a card on the page and a field inside that card are three levels, and the differences between them should be small enough to read as one surface family and large enough to see at all. The token sets model exactly that, with a background, a surface and an alternate surface.

Text needs three strengths and no more. Ink for the strongest text, body for the reading text, muted for the captions and the metadata, and the gaps between them have to be visible. A muted label that is only slightly lighter than body text is the most common legibility problem in a mockup, and it is invisible at the size most reviewers work at.

• Three levels of surface, close enough to read as one family
• Ink, body and muted for the three strengths of text
• Put a muted label on each surface it will appear on
• Borders separate without becoming the loudest thing on the screen

Note: The HTML export carries the theme tokens as CSS variables, so the roles the frames relied on arrive in the file as named variables rather than as loose hex codes, which makes the handoff easier to reason about.

Color for states, not decoration

A state color carries a fact about the world, and it earns its place by being consistent. Green means the thing worked, red means it did not, and both have to mean that on every screen or they stop meaning anything. The token sets include a success color and a danger color for exactly this, and spending either of them on decoration dilutes it.

Never let color be the only carrier of a state. A red row with no word in it tells a reader nothing if they cannot see the color, and it disappears entirely in a printed export. Put a word next to the color, a status label, an icon or a badge, so the state survives losing the color.

• Success and danger mean the same thing on every screen
• Never let color be the only carrier of a state
• A promotion in a state color spends that state color
• Keep the danger color for things that have actually gone wrong

Check the palette in light and dark

The two token sets are separate systems rather than one inverted, and a palette that works in the light set can fail in the dark one in three places. A border that reads as a clear edge on white can vanish on near black. A muted label can lose its contrast. An accent that reads as a highlight can look like a weaker color of its own.

The check is fast because the toggle is in the toolbar, and it also changes the HTML export, so the file you send matches the appearance you reviewed. Walk every screen in both, and pay attention to the screens with the least contrast, because a headline in the accent color survives either way and a caption in muted text does not.

• Walk every screen in both sets using the toolbar toggle
• Check the borders, the muted text and the accent first
• The toggle also switches which theme the HTML export uses
• Note the screens where the two sets disagree

Document it so the mockup stays consistent

Document the roles rather than the hex values. A page that says accent, surface, alternate surface, border, ink, body, muted, success and danger, with one line each about when to use them, survives a change of theme and a change of device far better than a list of color codes. The codes differ from screen to screen, and the roles do not.

The seven insertable components are the natural place to find out whether the palette is working. Stat card, List row, Form field, Call to action, Empty state, Nav header and Tab footer each use a fixed combination of surface, border and text, so dropping one onto a screen shows at once whether the colors belong to the same palette as the frame around them.

Keep the list with the mockup and update it as you go. A palette that exists only in your head changes with every screen, and the drift shows up as one frame that does not match the others. The complete Canvasola guide covers where working material sits.

• List the roles and let the theme supply the codes
• One line per role explaining when it should be used
• Drop a library component next to the frame to test the palette
• Keep the list with the mockup and update it as screens arrive

A checklist you can reuse

• Every color in the mockup has a named role
• One accent color is used for actions and selection
• Three text strengths are in use: ink, body and muted
• A muted label was checked on each surface
• Success and danger are used for state and for nothing else
• No state is carried by color on its own
• Every screen was checked in both themes
• The role list is written down and kept with the mockup

Common mistakes to avoid

• A second accent for emphasis. Two accent colors compete, and the one used less often stops meaning anything. Promote the emphasis with size or weight instead.
• Muted text with too little contrast. A caption only slightly lighter than body text disappears at reading size. Use a clearly lighter token and check it on every surface it sits on.
• Red on a promotion. A banner in the danger color spends the color that a real failure needs. Keep the danger color for things that have actually gone wrong.
• Color as the only signal. A colored dot with no label works for nobody on a printout and for nobody using a screen reader. Put the word next to the color.
• Colors outside the token sets. A one-off value that is not in the theme behaves differently in the dark set and breaks on export. Add a role instead of a single color.

Frequently asked questions

How many colors should an app palette have?

Fewer than people expect. The shipped token sets carry a background, a surface, an alternate surface, a border, three text strengths, a primary accent, a success color and a danger color, which is ten roles covering almost every screen. Add a role only when a screen needs one.

What is the difference between a surface and a text color?

A surface is a filled area that other things sit on, and there are usually three: the page, a card, and a field inside the card. A text color is the ink on top of those surfaces, in three strengths. The surfaces separate regions and the text carries the words, and a palette that mixes them up is hard to read.

Can I show a status with color and no label?

Not safely. A colored row or dot with no word in it means nothing to a reader who cannot see that color, and it disappears in a printed export. The theme includes success and danger colors, so keep those meanings and put a word or a badge next to them.

Does the theme toggle change my mockup?

It changes the token set the frames are drawn with, and it changes the HTML export as well, so a file exported from the dark set stays dark. Your layout and type sizes do not change, which is why the same screen can fail in one theme and hold up in the other.

How do I keep a palette consistent across a team?

Write the roles down rather than the color codes, because codes change when the theme changes and the roles do not. A short list of roles with one line each, kept next to the mockup, is usually enough. The seven insertable components also work as a check.

This guide is part of the design foundations collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.