Best colors for apps and websites: how to choose a scheme

Summary

There is no best color for an app. There is a best set of decisions: one primary that can carry buttons, links and states; one accent that is scarce; a background that is not quite white; a text color that is not quite black; and three status colors that stay out of the brand's way. Most "best website color schemes" lists show five pretty stripes and leave all of those decisions to you. This guide makes them in order — primary, background and text, accent, status, dark mode — with the test that catches a wrong choice at each step, then points at twelve complete themes you can open and edit. The palette generator builds the eight-role set from any seed; the theme generator turns it into a Tailwind v4 stylesheet.

• The primary must have a usable lightness range — blue, teal, violet and green do; yellow and cyan do not.
• Backgrounds are tinted near-whites, text is a tinted near-black; pure #fff and #000 are the giveaway of an undesigned palette.
• Red, green and amber are spoken for — choose a primary whose accents leave them free.
• Every colored fill needs a passing foreground (4.5:1) and every pair must separate in grayscale.

Start from the job, not the mood board

Interfaces are looked through, not at. A poster can be a color; an app has to be a set of surfaces that content sits on, with a few colored elements that tell the user where to act. So the useful way to choose colors is by role, in the order the roles are seen: the background is everywhere, the text is on all of it, the primary is on every action, the accent is on one thing per screen, and the status colors appear when something goes right or wrong.

Decide each role in that order, and check it before moving on. A palette that fails at step one — a primary that cannot make a readable button — is not rescued by a beautiful accent.

Step 1: choose the primary

The primary is the color of the main button, the links, the focus ring, the active navigation item, the checked checkbox and the first chart series. It does more work than every other color combined, so it is chosen first and against the strictest tests.

Does it hold text? White text on the primary as a button fill must reach 4.5:1 (WCAG AA). Most blues, teals, violets, and greens at 35–50% lightness pass; yellow, cyan, lime and light orange never do, which is why they are not interface primaries. If the brand color is one of those, keep it for the accent and pick a darker partner as the working primary.

Does it have room for states? Hover needs a shade one step darker, pressed two steps, disabled a tint at low saturation, a focus ring at the primary's hue. A hue with a wide lightness range gives you all of those while staying recognizable; darken yellow and it turns brown, lighten it and it vanishes.

Does it collide with status? If the primary is red, error states have nowhere to go; if it is green, success looks like a button. Blue, indigo, violet, teal and most neutrals-with-a-tint leave the status hues free, which is a large part of why they dominate product design. It is not a coincidence that the CSS blues contain more usable primaries than any other family.

Is it the same as everyone else's? The safe primaries are safe because they work, and the cost is looking like every other dashboard. If differentiation matters, move the hue rather than the lightness: a teal-leaning blue, a violet-leaning indigo, a warm green, a slate with a whisper of the brand hue. The tests above still apply.

Step 2: background and text

The background is the most-seen color in the product and the least noticed. Two rules make it feel designed.

Never pure white or pure black. A page at #ffffff with text at #000000 is the highest-contrast pair there is — and it looks like an unstyled document, because that is what it is. Tint both toward the primary: a background at 98–99% lightness with a few percent of the primary's saturation, a text color at 8–12% lightness with a little more. The difference is invisible as a swatch and unmistakable as a page. The near-whites of the CSS color set — alice blue, ghost white, ivory, linen — are examples of exactly this tint.

Give surfaces their own step. Cards, panels and menus sit on the background and need to read as raised: a surface one or two lightness steps away from the canvas (96% against 99% in light mode; 12% against 8% in dark) with a border at around 90%. That single step replaces most of the shadows an interface would otherwise need.

The palette generator's five neutral roles — background, surface, text, muted and border — are placed at exactly these steps and take their tint from the seed, so the grays belong to the palette instead of coming off a shelf. The semantic palette guide explains each role.

Step 3: the accent

The accent is the color of the one thing on a screen that should be seen first: a promotional badge, a "new" indicator, the key metric, the single destructive action. It is scarce by definition; an accent that appears in twenty places is a second primary, and a page with two primaries has none.

The accent comes from the primary by a wheel rule, and the rule decides how loud the pair is. A complementary accent (180° away) is the loudest — a blue product with an orange badge. A split-complementary accent (150° or 210°) keeps most of that contrast with less vibration and gives you two related accents, which is what most products want. An analogous accent (30° away) is quiet and earns emphasis from lightness instead. The types of color schemes guide compares all of them; the palette generator shows five rules on one seed.

Whichever rule, two constraints. Desaturate the accent 20–40% if it competes with the primary, and never place accent and primary as text and background of each other — colored text goes on neutrals, and neutral text goes on colored fills.

Step 4: status colors

Users arrive knowing that red is error, green is success and amber is warning. Fight that and the interface gets harder to use for no gain, so the status colors are chosen to fit the palette rather than to express the brand.

Take the conventional hues and tune only their saturation and lightness toward the palette: a red with a little of the primary's coolness, a green at the same lightness as the primary, an amber that reads as a warning rather than a highlight. Give each a fill variant (light tint for alert backgrounds), a text variant (dark enough for 4.5:1 on the tinted fill) and a border. If the primary or accent is already red or green, that role wins and the status color moves — usually to a more orange red or a more teal green — so the two stay distinguishable in grayscale.

Step 5: derive dark mode

Dark mode is not a second palette; it is the same hues with the lightness reassigned. The background drops to 6–10%, surfaces to 10–14%, text lifts to 92–96%, and the primary and accent lift to 60–70% so they still reach 4.5:1 as fills with dark text or as text on the dark canvas. Hold saturation — dropping it produces a washed-out pastel product — and shrink the accent's area, because bright colors carry more weight on dark surfaces.

Doing this by hand for eight roles and three status colors, then re-checking every pair, is where most dark modes go wrong. The dark mode converter derives a dark set from a light palette and repairs any pair that fails; the theme generator emits both sides of the stylesheet together.

Three checks before you ship

Contrast on every pairing. Body text against background and against surface; white or dark text against the primary, the accent and each status fill; muted text against both surfaces. Every one at 4.5:1 for body text and 3:1 for large text and UI components. A palette with a single failing pair will produce a component that fails, and that component will end up on the most important screen.

Grayscale. Desaturate a screenshot. Primary, accent and each status color should be distinguishable as grays; if two merge, they differ only in hue, and around 8% of men will see them as one color. The color-blind-safe palette guide covers the fix.

The squint test. Blur the page. The primary should appear on the actions, the accent as one or two small bright points, and everything else as neutral. If color appears as large regions, the weighting is wrong regardless of which colors were chosen.

Twelve palettes that already pass

Every theme preset in the generator is a complete answer to the five steps above — primary, neutrals, accent, dark mode — with fonts, radius and a type scale, emitted as a Tailwind v4 globals.css. A few to start from, by the kind of product:

• SaaS dashboards and admin tools: Ocean Depths (navy and teal over cool neutrals) or Arctic Ice.
• Editorial, documentation and long reading: Ink and Paper (near-monochromatic, high contrast).
• Consumer and lifestyle products: Matcha Latte or Sunset Glow.
• Developer tools and dark-first products: Neon Nights or Moody Blues.
• Finance, legal and institutional: Royal Court or Forest Walk.

Each page shows the light and dark previews, the eight roles and the stylesheet, and opens in the generator seeded so the primary can be swapped without redoing the rest.

Q&A

Question: What is the best color for an app?

Short answer: There is no single best color; there is a best primary for a given product — one that holds white text at 4.5:1, has room for hover, pressed and disabled states, and does not collide with red, green and amber status colors. Blue, indigo, violet, teal and mid greens meet all three; yellow, cyan and lime do not.

Question: How many colors should a website color scheme have?

Short answer: Three hues at most — primary, secondary and accent — plus five tinted neutrals (background, surface, text, muted, border) and three status colors. That is the eight-role palette a design system actually uses; more hues than three is a data-visualization scheme, not a brand.

Question: What background color is best for a website?

Short answer: A near-white tinted toward the primary — 98–99% lightness with a few percent saturation — rather than pure white, with cards and panels one step darker so they read as surfaces. In dark mode the equivalent is a near-black at 6–10% with the same tint.

Question: What colors go together for a website?

Short answer: A primary and an accent chosen by a wheel rule: complementary (180° apart) for maximum emphasis, split-complementary (150°/210°) for most products, analogous (30°) for a calm brand. Every page of the CSS color reference lists those partners for a named color.

Question: Should a website use dark mode?

Short answer: If it is used for long sessions, in the evening, or by developers — yes, and it should be derived from the light palette rather than designed separately: same hues, lightness reassigned, every pair re-checked for contrast.