ColorSense Blog
Picking Colors Without a Method? Start With Five Clear Roles
Stop collecting swatches without a plan. Choose an anchor, supporting color, accent, background, and text color, then test them in a real layout.
To choose a color palette without an existing method, give each color a job before adding more swatches: an anchor, a supporting color, an accent, a background, and a text color. Start from one reference, test the combinations in a real layout, and keep only the colors you can explain. You do not need five different HEX values if a smaller set covers the jobs.
In our ColorSense signup survey, 24 of the 97 people who answered the palette-source question said they wing it, approximately 24.7%. This was a small, self-selected group of people signing up for a color resource, not a representative survey of all designers. The response does not prove that anyone has no process at all. It does suggest a useful place to offer a more explicit starting point.
The earlier article explains the survey findings. This companion gives you the practical sequence. The method below is design guidance, not a treatment tested by that survey, and it does not promise a particular improvement in conversion or design quality.
Start with a use case, not a mood label
Before choosing a swatch, name one thing the palette must do. A presentation needs readable slides. A landing page needs an obvious action and clear body text. A social template needs a repeatable hierarchy at feed size. A label such as calm or playful helps set direction, but it does not tell you which pairs need to work.
Write a short working brief: where the colors will appear, what the reader needs to notice first, and which surfaces carry text. Include light and dark contexts if both matter. This stops a collection of attractive colors from turning into a palette that has no dependable background or foreground.
Next, choose one reference image or existing palette that fits that brief. Avoid collecting several conflicting directions at once. A useful starting reference already has a relationship you want to preserve: perhaps a warm background and a restrained blue, rather than simply five colors you like independently.
Step 1: choose the anchor color
The anchor is the color that connects the palette to its intended identity or direction. It might come from a photograph, a product, an existing logo, or a deliberate choice. If your reference is an image, extract candidates with the Color Picker from Image.
The most common color in a photograph is not automatically the best anchor. A large gray wall may dominate the pixels while a smaller blue object carries the feeling you want. Compare the extracted values with your brief, then choose one anchor you can describe in a sentence.
For the worked example below, the anchor is blue #2563EB. The example is illustrative. It is not extracted from a real customer image, and blue is not inherently the correct choice for a particular industry. Its suitability depends on the identity and context you are designing.
Step 2: choose a supporting color only if it adds a job
A supporting color introduces useful variation without competing with the anchor. It might distinguish secondary content, reinforce a theme, or create a contrasting section. Use the Color Scheme Generator to explore analogous, complementary, or other relationships, then review the result in the layout.
You can also use a neutral as support. A palette does not become more professional because it contains more distinct hues. If a second expressive color is difficult to place, leave it out until you have a specific reason to include it.
In this example, slate #475569 provides support for secondary design elements. It is not automatically approved for every small label or tinted surface. Before using any supporting color for text, check the exact background it will sit on.
Step 3: reserve the accent for a limited purpose
An accent should help something stand out. Choose where it will appear before choosing how often to use it. A highlight, a small visual marker, or a promotional panel may need emphasis. Ordinary body copy usually does not.
Our example uses amber #FBBF24 for occasional emphasis. Dark text on amber is a useful pairing here; white on the same amber is not. That distinction matters more than whether the accent looks energetic on its own.
If every button, badge, heading, and divider uses the accent, the color no longer tells the reader what is special. Start sparingly and increase its use only when the hierarchy remains clear. An accent is a role, not a fixed percentage that every layout must follow.
Step 4: choose the background before approving text
The background occupies much of the actual design, even when it is not the most memorable swatch. Choose it deliberately. White, an off-white, a light tint, or a dark neutral each changes the foreground relationships you need to test.
The worked example uses off-white #F8FAFC for the main surface. That decision creates a specific test: body text against off-white. It does not tell you whether the same text will work over a photograph, a gradient, or an amber card.
If you use multiple surfaces, document them separately. A single text color may work across several backgrounds, but verify rather than assume. Transparency also changes the final appearance, so a translucent card needs to be evaluated in its actual context.
Step 5: choose dependable text and test the pairs
Pick a text color for legibility, not just for visual similarity to the anchor. In our example, dark navy #0F172A gives body copy a dependable foreground on the light surface. It can also support dark lettering on the amber accent.
Use the WCAG Contrast Checker to measure the actual foreground and background. Under WCAG 2.2, AA normal text requires 4.5:1 and large text requires 3:1. A decorative swatch does not have the same job as a caption or an active control.
| Pair in the example | Contrast | Decision |
|---|
#0F172A text on #F8FAFC | 17.06:1 | Passes AAA normal text |
#FFFFFF text on #2563EB | 5.17:1 | Passes AA normal text; below AAA normal text |
#0F172A text on #FBBF24 | 10.69:1 | Passes AAA normal text |
#FFFFFF text on #FBBF24 | 1.67:1 | Fails AA normal and large text |
These ratios are calculated from the named sRGB pairs and rounded for display. They approve only those pairs, not every combination of the five colors. A palette can contain both a useful amber background and an unusable white-on-amber text treatment.
Turn the five roles into one realistic test
Make a small layout with a heading, a paragraph, a button, a secondary label, and a highlighted note. Use actual copy rather than a grid of empty rectangles. Put the design at its intended size and look at what the reader can recognize immediately.
In the example, use the off-white as the page surface and navy for the main copy. Put white lettering on a blue action button. Use amber for a highlighted note with navy text. Decide whether slate adds a useful secondary treatment, then measure the pair wherever it carries text.
Inspect the design in grayscale as an additional hierarchy check. If two important states differ only by hue, add a label, icon, or other cue. Grayscale is not a complete color-vision simulation, and a simulation is not a substitute for checking whether the information remains understandable.
Also inspect the smallest text and the largest colored areas. A supporting color may look restrained in a swatch but dominate a full panel. An accent may be distinctive at desktop size and barely visible as a tiny marker. Scale changes the decision.
Use the ColorSense Five-Role Check to decide what to keep
The ColorSense Five-Role Check asks one question per role: what leads, what supports, what draws limited attention, what sits behind the content, and what makes the content readable? You can answer with fewer than five colors. What matters is that the necessary jobs have an answer.
Remove a color if you cannot identify where it belongs. Add a color only when an existing role cannot cover a real need. For products with success, warning, or error states, define those functional roles separately and provide non-color cues. Do not force a marketing accent to carry every status.
Palette Health can help you inspect relationships across the set. Treat it as feedback rather than a certificate for the entire design. The typography, surfaces, proportions, and interaction states still need to be reviewed in context.
Save a system you can reuse tomorrow
Record the color names, HEX values, roles, approved pairs, and restrictions in your Brand Kit. A useful restriction might say that amber is for panels with dark text, never for a white-text button. Another might reserve the anchor for primary actions rather than body paragraphs.
If starting from a blank canvas still feels slow, the Palette Playbook offers worked palette starting points. Use one as a reference, not as proof that every pair will work in your own design. A library palette can also be a starting point once you assign its colors to your specific jobs.
The goal is not to stop experimenting. It is to know what you are testing. Change one relationship, check the result in the layout, and keep the version that answers the brief. That is a method you can repeat without collecting a new folder of unexplained swatches for every project.
Try it now
Check any color pair against WCAG : free, no signup
Pick a foreground and background, see the exact contrast ratio plus AA/AAA verdicts for normal and large text. One click auto-fixes a failing pair while keeping your hue.
Open WCAG Contrast Checker →
Frequently asked questions
How do I choose colors when I have no design background?
Start with one relevant reference and assign roles for an anchor, support, accent, background, and text. Test a small real layout, measure the text pairs, and remove colors that have no clear purpose.
Do I need exactly five colors?
No. The five roles are a checklist, not a required swatch count. A two- or three-color set can cover several roles, while a larger product may need additional functional colors.
Should I choose colors from a photo or a palette library?
Either can provide candidates. Choose a reference that fits your brief, then assign roles and test its combinations. The source does not determine whether the final layout is readable.
Does the 60-30-10 rule guarantee a balanced palette?
No. It can suggest a starting proportion, but the right distribution depends on the layout. It does not verify contrast, meaning, or whether an accent is being overused.
Can a harmonious palette still fail contrast?
Yes. Harmony describes relationships across colors. Readability depends on specific foreground and background pairs, as well as typography and context. Test the pairs you actually use.