5 Rules for a Color Palette That Actually Works in 2026
A practical guide to choosing a color palette: the 5 rules that separate a working palette from a decorative one (60-30-10 distribution, start with one color, neutrals are colors, contrast beats hue, test in context), common mistakes, and how to use a browser-based palette generator without uploading anything.
A working color palette has 3-5 colors, distributed as 60-30-10 (dominant, secondary, accent), with explicit neutrals and explicit contrast levels. The five rules: start with one color, choose the neutrals next, add the accent last, test the contrast, and verify the palette in real content. The <a href="/color-palette-generator">Color Palette Generator</a> on this site helps you explore combinations, and the <a href="/contrast-checker">Contrast Checker</a> verifies the accessibility. Both run in the browser; the palette stays on your device.
A "color palette" in design is the small set of colors a product uses, with rules for which color goes where. A working palette has 3-5 colors, each with a specific role, and a contrast hierarchy that makes the design readable. A decorative palette has many colors, no clear roles, and a contrast hierarchy that may or may not exist. The difference is what separates a coherent product from a busy one. This post covers the 5 rules that separate the two, common mistakes, and how to build a palette that works in your browser without uploading anything.
The 60-30-10 rule
The most reliable structure for a working palette is the 60-30-10 distribution:
- 60% — the dominant color. The background or the main surface. Usually a neutral (off-white, light gray, dark gray, near-black).
- 30% — the secondary color. The supporting color, used for headers, sidebars, cards, or section backgrounds. A tint or shade of the dominant, or a complementary neutral.
The 60-30-10 split is not a hard rule. Some palettes are 50-30-20, some are 70-20-10, some are 80-15-5. The point is the relationship: a large neutral background, a medium secondary, a small high-saturation accent. When the relationship is right, the design feels balanced without any explicit effort.
When the relationship is wrong — too many colors, no clear hierarchy, every section competing for attention — the design feels busy and the user has nowhere to look. The 60-30-10 split is a guardrail against this.
Rule 1: start with one color
The most common mistake in choosing a palette is starting with five or six colors and trying to make them all work together. The result is a palette where nothing dominates, every color competes with the others, and the user is overwhelmed.
The right approach: start with one color. Either a brand color (if you have one) or a chosen accent. Then build the rest of the palette around that single color.
The most useful single color to start with is the accent — the 10% color that draws attention. The reason: the accent is the most opinionated color in the palette. It is the color that says "this is what we want the user to look at." If the accent is wrong, no amount of work on the neutrals will fix the palette.
Once the accent is chosen, the neutrals and the secondary fall into place. The dominant is usually a light or dark version of a neutral (off-white, light gray, near-black). The secondary is usually a desaturated version of the accent, or a complementary neutral.
The Color Picker on this site helps you choose the initial color. The Color Palette Generator helps you build the rest of the palette around it.
Rule 2: choose the neutrals next
Neutrals are the colors you do not think about — the backgrounds, the borders, the secondary text. They are the canvas for everything else, and the wrong neutrals make the whole palette feel off.
Neutrals are not "no color". They are colors that have been desaturated to the point where they read as gray, white, or black, but they still have a hue. A "warm" neutral has a slight yellow or red tint. A "cool" neutral has a slight blue or green tint. The hue matters because it affects the perceived temperature of the design.
For a design that should feel warm (a food brand, a hospitality brand, a children's product), the neutrals should have a warm hue. For a design that should feel cool (a tech brand, a financial brand, a clinical product), the neutrals should have a cool hue. Mismatched neutrals make the design feel off without the user knowing why.
A common starting point:
The exact values depend on the rest of the palette, but the principle is consistent: pick a temperature, and apply it to all the neutrals.
Rule 3: add the accent last
Wait, the rule before said to start with the accent. This rule says to add it last. The difference: start with the accent to know what the palette is built around; add it last in the implementation to know that the rest of the palette is supporting it.
In practice: build a palette of neutrals and a secondary first. Place them in the design. Then introduce the accent and adjust the surrounding colors to make the accent the clear focal point. If the accent is competing with the secondary, the secondary is too saturated. If the accent is invisible, the secondary is too prominent.
The accent is the only color in the palette that should be highly saturated. The neutrals and the secondary should be desaturated. The contrast between the accent and everything else is what makes the accent work.
A common mistake: using the brand color for both the accent and the secondary. The result is that the brand color is everywhere, and the user has no clear focal point. Pick a desaturated version of the brand color for the secondary, and reserve the saturated version for the accent.
Rule 4: test the contrast
Color contrast is not optional. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios:
The most common failure: a "subtle" gray text on a white background. The text looks elegant in the design tool, but the contrast ratio is below 4.5:1, and many users cannot read it. The fix is to darken the gray until the ratio is at least 4.5:1.
The Contrast Checker on this site takes a foreground and background color and shows the ratio plus a pass/fail for WCAG AA and AAA. Use it on every text-and-background combination in the design before shipping.
The principle: a working palette has explicit contrast levels. The dominant background is a light or dark neutral; the primary text has a 4.5:1+ contrast with that background; the secondary text has a 3:1+ contrast; the accent is high-contrast where it matters (buttons, links) and can be lower contrast where it is decorative (background tints, borders).
Rule 5: verify the palette in real content
A palette that looks good in the design tool can look terrible in real content. The reason: real content has variable text length, real images, and real user behavior. The design tool shows the best case; the live site shows the actual case.
The verification step: build a page that uses every color in the palette in its intended role. Add real text (not Lorem Ipsum), real images, and real interactive states (hover, focus, disabled, error). Then look at the page in the conditions your users will see it (different screen sizes, different lighting, different accessibility settings).
The most common findings:
The verification is the last step before shipping. It is the only step that shows what the palette actually looks like to a real user, in real conditions.
Common mistakes
Too many colors
A palette of 8+ colors is hard to manage. The designer is constantly asking "which color should I use here?" and the answer is usually wrong because the palette is too big. A working palette has 3-5 colors plus the neutrals; a decorative palette has 8+ and the user is lost.
The fix: cut. If you have 8 colors, pick the 3-5 that do the most work and demote the rest to "occasional use" (a special state, a seasonal promotion, a sub-brand). The reduced palette is easier to manage and the design is more coherent.
No clear roles
A palette of 5 colors with no defined roles is 5 colors that all do the same thing. The designer is constantly asking "which color should I use for a button?" and the answer is "whichever you feel like". The result is inconsistent.
The fix: define the roles. "Primary blue is for buttons and links. Accent orange is for highlights. Neutral gray is for borders. Light gray is for backgrounds." Each color has a job. The designer knows which to use because the roles are explicit.
Saturated neutrals
Neutrals should be desaturated. A "gray" with too much hue (a slightly blue gray, a slightly green gray) reads as a color, not as a neutral. The result is a palette where the neutrals compete with the accent.
The fix: pick true grays (R = G = B) for the neutrals, then add a slight hue (warm or cool) to match the rest of the palette. The hue should be small — 5-10% of the way from true gray, not 50%.
Ignoring dark mode
A palette designed for light mode does not automatically work for dark mode. The neutrals flip (light background becomes dark background, dark text becomes light text), the accent may need to be slightly lighter to maintain contrast, and the secondary may need to be desaturated further. A "light mode first" palette often needs a separate "dark mode" palette.
The fix: design the light mode palette first, then design the dark mode palette as a separate set. The two are not the same colors with the lightness flipped; they are two related palettes that both work in their respective modes.
How to use the color palette tools
All five tools run in the browser. The palette stays on your device; no copy is sent to a remote server. For most design workflows, this is the right setup: the palette is a small set of values, the verification is a fast iteration loop, and the tools are the accelerators.
When to use a palette from a tool, vs. designing your own
For most products, the right answer is to design your own palette. The reasons:
For a side project, a starter project, or a proof of concept, a pre-made palette is fine. For a product, a brand, or anything that needs to last, a custom palette is worth the investment.
A short summary
The decision is rarely hard. The wrong answer is to choose a palette of 8+ colors with no clear roles and hope it works out. The right answer is 3-5 colors with explicit roles, verified in real content, and shipped.