A palette is useful when it helps people understand a page, read its content, and complete a task. A set of attractive swatches is only the starting point. The difficult work is deciding which colors go together, where they belong, and how they behave in real components.
This workflow is designed for small teams building or refreshing a website. You can do it in a design tool or on paper first; what matters is that you test actual combinations rather than judging colors in isolation.
Start with decisions, not color psychology
List the actions the site needs to support: perhaps a visitor needs to compare services, find contact details, and submit an appointment form. Look at existing brand materials as well: a logo, photography, packaging, or printed documents may already establish a recognizable visual direction.
Write down a few qualities the organization wants to convey, then translate them into design decisions. “Calm and clear” might lead to generous neutral surfaces, restrained accents, and a readable type scale. It does not mean every component should be blue. Associations with colors vary by context and audience, so treat them as hypotheses rather than universal laws.
Collect a small amount of representative content: a long heading, a paragraph, a link, a button, a form field, and an error message. Comparing candidate palettes against the same content makes the tradeoffs visible.
Give each color a job
A usable system usually includes the following roles:
- Text and surfaces: background colors, primary text, secondary text, borders, and cards.
- Brand color: a recognizable hue that connects the site to the rest of the identity.
- Action color: an accent for priority actions and, where appropriate, links.
- Feedback colors: distinguish error, success, warning, and informational states.
- Interaction states: visible hover, pressed, and keyboard-focus treatments.
The same hue may serve more than one role, but do not assume every shade is interchangeable. A light brand blue can work as a decorative background while failing as small text on white. A darker variant may preserve the visual character and make the text legible.
Ratios such as 60/30/10 can be helpful as a sketch, but they are not a requirement. A documentation site and a photographic landing page will naturally use different proportions.
Build and test a small example
Imagine a consultation service that wants a restrained interface and a clearly visible booking action. Here is a deliberately simple starting point:
| Role | Example | Use |
|---|---|---|
| Primary text | #111827 | Headings and body copy |
| Page surface | #F8FAFC | Background behind text |
| Action | #1D4ED8 | Button with white label |
| Darker action | #1E3A8A | Hover treatment |
| Information surface | #DBEAFE | Subtle panel with dark text |
White on #1D4ED8 has a contrast ratio of about 6.7:1. The #111827 text on #F8FAFC is about 17.0:1. These figures apply to these exact opaque colors; overlays, transparency, or a photograph underneath change the effective result. Check the actual rendered combination, especially over gradients and images.
Put the palette on at least two different pages: for example, a service detail page and the booking form. An action color that looks balanced on the first screen may be overwhelming when repeated across ten cards.
Check pairs and states for accessibility
For WCAG level AA, the general contrast target is at least 4.5:1 for normal text and 3:1 for large text. Large text is generally at least 18 points, or 14 points when bold. Compare the measured value against the threshold without rounding up.
Also inspect meaningful interface components and graphics against adjacent colors. A field boundary or focus indicator may need sufficient non-text contrast to be recognizable; the exact criterion and its exceptions depend on the component and state. A decorative divider and an essential control are not automatically the same case.
Do not rely on color alone to convey information. A form error should have a clear message, not just a red outline. Underlining links within body copy makes them identifiable without requiring a reader to distinguish two similar colors. Charts can use direct labels or patterns alongside a legend.
Try using the page with a keyboard, at increased zoom, and on a narrow screen. A color-vision simulation can reveal trouble, but it does not replace checking contrast or testing with people.
Protect contrast over photographs
A text color that passes on a solid background may fail when a different photograph is used or when a mobile crop places the text over a brighter area. Check the least favorable part of the image behind the text. A consistent opaque surface or a carefully tested overlay can make the result more predictable.
This is a component problem as much as a color problem: define when the text may sit directly on an image, when it needs a backing, and who checks new imagery before publication.
Turn swatches into design tokens
Name colors for their purpose instead of calling them “blue 2” or “gray 4.” A role such as --color-action tells a designer or developer why the value exists and where a change will have consequences.
For the sample palette:
:root { --color-text: #111827; --color-surface: #f8fafc; --color-action: #1d4ed8; --color-action-hover: #1e3a8a; --color-action-text: #ffffff; } .button { color: var(--color-action-text); background: var(--color-action); } .button:hover { background: var(--color-action-hover); } .button:focus-visible { outline: 3px solid #111827; outline-offset: 3px; } This is a small example, not a finished component library. Check that the focus outline remains visible on every adjacent surface, add pressed and error states, and never remove the browser focus indicator without providing a clear replacement. If the site supports a dark theme, test its color pairs separately.
A short review before launch
Walk through these checks with a designer, developer, or content owner:
- Can the team explain the role of each color and show where it is used?
- Have text, buttons, links, fields, and focus indicators been checked against their actual neighbors?
- Can people identify errors and important states without seeing color differences?
- Do long headings, images, charts, and small-screen layouts still work?
- Are the palette values and interaction rules documented where future contributors can find them?
Choose an initial palette, apply it to real content, and adjust based on the problems you observe. A color system succeeds when it makes the interface both recognizable and easier to use.
Russian original: https://morlix.ru/blog/tsvetovaya-palitra-sayta-kak-podobrat-sochetaniya-pod-brend
