How to Build and Use a Web Design Color Palette

A sound web design color palette is not a list of attractive HEX values. It is a system that defines which colors serve backgrounds, text, actions, borders, and states. Beginners often choose one brand color, add two fashionable colors, and apply them by feel. The result is a weak call to action, secondary text that is too pale, errors communicated only in red, and a dark theme with broken contrast. This guide shows how to build a color system from brand purpose through real components, including six palettes with tested foreground/background pairs, WCAG 2.2 application, token creation, and a handoff checklist. If you need a list of styles, icons, or 2026 web design trends, use the separate trends guide; this article focuses on color decisions that teams can implement and maintain.

How is a website color palette different from a brand palette?

A brand palette usually identifies several colors for a logo, communications, packaging, and campaign materials. A website palette must go further by converting those colors into repeatable, testable interface roles. A logo blue may become brand-primary, but a website also needs page backgrounds, card surfaces, primary and secondary text, borders, links, focus, disabled controls, success, warning, and error colors. Every important background also needs an appropriate “on” color for text or icons placed above it.

This distinction explains why a brand guideline containing three swatches is not enough to code a website. Designers must build light-to-dark scales, test components, and define permitted pairs. Developers need stable tokens rather than HEX values scattered across stylesheets. Content editors need to know which sections may use a dark background and when an image requires an overlay. A direction such as “use RiverLee blue” can otherwise lead each contributor to choose a different blue.

A strong color system therefore has three layers: primitive colors describe the palette, semantic tokens describe purpose, and component tokens describe a specific application. For example, blue-600 might map to action-primary, which a button consumes as button-primary-background. When the brand color changes, the team updates mappings instead of searching through every screen.

Which roles belong in a minimum website color system?

Even a small website needs more than “primary, secondary, and accent.” A practical minimum covers page backgrounds, surfaces, text, borders, actions, focus, and system feedback. The number of swatches matters less than giving every swatch a clear responsibility. Material Design 3 similarly organizes roles into primary, secondary, tertiary, error, surface, and outline groups, while pairing backgrounds with on-* colors for content placed above them.

For every important fill, specify its paired text or icon color—for example, primary with on-primary, and surface with on-surface. Do not automatically place white on every dark-looking fill or black on every pale one. Contrast depends on the relative luminance of the exact pair. A bright yellow accent may stand out against navy but still fail with white label text.

A seven-step process for website color combinations

Effective color work starts with content and tasks, not the color wheel. This process converts brand emotion into testable rules. Each step creates a concrete output: a color brief, primitive palette, tonal scales, semantic tokens, component tests, a dark theme, and handoff documentation. A designer may complete an initial round for a small site in one session; a larger product needs additional testing with realistic data and users.

Before starting, create one shared record for source values, update dates, review decisions, and the person responsible for approval. This prevents contributors from sampling a compressed logo image or continuing to use an obsolete color after the identity changes. It also gives future audits a reliable baseline.

Step 1: define purpose, context, and brand constraints

Write three to five brand attributes and translate them into observable visual qualities. “Trustworthy” might imply stable tones, clear contrast, and restrained accents. “Energetic” might use higher chroma for actions and illustrations. Gather the logo, registered colors, product imagery, fonts, market context, and implementation platform. Also consider whether users read outdoors, in low light, or on older screens, because context changes how a palette performs.

Finish with one sentence describing the visual experience the system must consistently create.

Make that sentence testable.

Step 2: choose one dominant color from identity or content

The dominant color needs a reason: established brand recognition, a color present in the product, or a hue appropriate to the category. A multicolor logo does not require every color to become a call to action. Choose a source color capable of producing a stable light-to-dark scale and enough contrast for interactive states. Record it in the working color space—HEX, RGB, or OKLCH—and keep the original source rather than sampling from a compressed image.

Document who may approve a functional variant when the exact logo value cannot meet an interface requirement.

Step 3: create a tonal scale and neutral family

Build several steps from very light to very dark rather than applying opacity over unpredictable backgrounds. Give neutrals a subtle relationship to the identity: cooler blue-grays for a technology product, warmer gray or brown neutrals for interiors and lifestyle. A scale does not need exactly ten steps, but it needs enough options for subtle backgrounds, borders, hover, default actions, and text on light surfaces. Compare steps visually and with measurement tools.

Name each primitive consistently so the scale remains understandable in design and code.

Step 4: assign semantic tokens by purpose

Do not hand developers a row of swatches with a request to “use them tastefully.” Map values to background, surface, text-primary, text-secondary, border, action-primary, action-hover, focus-ring, success, warning, and danger. Avoid names tied to a value or position, such as blue-button, because the function may change color later. Semantic tokens allow light and dark themes to share one interface while using different values.

Give every token a short description and a component example so its priority cannot be misunderstood during implementation.

Step 5: test real components and content

Build at least a hero, header, button, link, card, form, alert, table, and footer. Insert long headlines, Vietnamese or other accented content, prices, form errors, and disabled states. A palette that appears balanced as isolated squares can fail when a call to action sits next to a colorful image or when secondary copy appears at 14–16 pixels. Test exact pairs at their real size, font weight, and background rather than relying on a style tile.

Include empty states and unusually long content in the review.

Step 6: design dark mode by role instead of inversion

Dark mode is not a white-to-black conversion. Use a dark background subtly tinted by the brand, surfaces that become lighter with elevation, and off-white text to reduce glare. Accents may need more lightness or less saturation to retain equivalent emphasis. Recheck images, logos, shadows, charts, and status colors; a color that passes on white does not automatically pass against a dark surface.

Compare both themes with the same content and task to verify that hierarchy remains equivalent.

Review them side by side.

Step 7: test, document, and hand off

Run automated contrast checks, simulate color-vision deficiencies, navigate by keyboard, and examine several displays. Document permitted pairs, prohibited uses, component states, and light/dark values. Synchronize tokens between Figma and code, including an update date and owner. A palette is complete only when another contributor can apply it correctly without asking the designer about every component.

Store test results with the token version, add representative screenshots, and identify which components must be rechecked whenever a core value changes.

Archive superseded values as well.

Six web design color palettes to use as starting points

The palettes below are purposeful starting points, not complete themes to copy unchanged. Each includes a background, text, action, and accent direction. The listed pairs use contrast ratios calculated with the WCAG formula. Test again after changing fonts, sizes, imagery, and states. Logos, very large text, and inactive components may have specific exceptions, but interface quality should prioritize readability instead of leaning on exceptions.

Corporate blue uses navy for text and structural anchors while reserving #155EEF for actions; the pale blue is not small text. Warm natural places a cream surface beside dark green, with terracotta as a limited accent. Healthcare teal softens the clinical feeling with a very pale green surface. Quiet luxury depends on whitespace and typography rather than covering everything in gold. Tech dark uses cyan for emphasized information but still requires off-white long-form text. Playful contrast may use yellow decoratively, while primary actions use sufficiently dark purple or orange.

Combine hue, saturation, and lightness instead of following a rigid formula

The color wheel explains complementary, analogous, and triadic relationships, but an interface is read primarily through lightness, contrast, and occupied area. Two colors with different hues but similar lightness can merge for someone who does not distinguish those hues. A nearly monochromatic palette can still create strong hierarchy when its lightness range is clear. Review the interface in grayscale: essential text, actions, and boundaries should remain recognizable.

The 60–30–10 rule can help a beginner avoid excessive accents—most area for a base, a smaller structural color, and a small accent—but it is not a web standard. A page with cards, tables, states, and imagery must allocate color by role rather than absolute area. One accent should not represent links, badges, charts, calls to action, and decoration when those objects have different priorities.

Reserve high saturation for smaller areas and reduce chroma on large surfaces. Saturated backgrounds create fatigue and compete with product images. Whenever lightness changes, recheck every foreground/background pair. Modern CSS supports perceptual spaces such as oklch(), which can help create more even tonal steps, but browser fallbacks and the design-to-code workflow still need agreement. A color function does not replace component testing.

WCAG 2.2 color contrast: the thresholds to remember

W3C WCAG 2.2 requires at Level AA a minimum contrast ratio of 4.5:1 for normal text and images of text, and 3:1 for large text. The standard defines large text using both size and weight, so the safer practice is not to assume every heading qualifies for the lower threshold. User-interface components and graphics needed to identify controls or states generally need 3:1 non-text contrast against adjacent colors.

The Use of Color success criterion 1.4.1 says color must not be the only visual means of conveying information, prompting a response, or distinguishing an element. A red border around an input is insufficient without an icon and error message. Red and green chart lines need labels, different line styles, or markers. Links inside a paragraph need an additional cue such as an underline when color does not create adequate distinction.

Do not run one Figma plugin and declare the design compliant. Test default, hover, active, focus, selected, visited, disabled, and error states on their real backgrounds. Images, gradients, opacity, and blend modes can change contrast from one pixel region to another. Automated tests detect many failures but do not replace visual review, keyboard testing, and evaluation by people with different access needs.

Design light mode and dark mode as one system

Light and dark themes should share semantic token names while mapping to different values. background might be #F7FAFC in light mode and #0B1020 in dark mode; text-primary moves from near-black navy to off-white; action-primary may increase in lightness in the dark theme. This keeps component meaning stable and reduces theme-switching errors.

Avoid absolute black for every background and absolute white for every line of text. Slightly tinted dark backgrounds create depth; elevated surfaces can become incrementally lighter. Dark shadows have limited effect, so a border or surface change may communicate layers better. Highly saturated colors can vibrate against a dark background, so adjust lightness and chroma, then measure again. Logos, large white areas in photographs, and thin illustration outlines may need theme-specific variants.

A website can follow the system setting through prefers-color-scheme while offering a manual control when appropriate. Save the choice transparently, prevent theme flashes during loading, and test forms, charts, syntax highlighting, cookie notices, and embedded content. Good dark mode is not a polished screenshot; every task retains the hierarchy and states available in light mode.

How should color work with icons and imagery?

Color does not exist independently from icons, images, and typography. When product photography contains many colors, the interface benefits from generous neutrals and one clear accent. When a brand uses monochromatic illustration, the system can create depth through tints and surfaces. Functional icons prioritize recognition: strokes or fills must contrast, selected states cannot rely only on hue, and the hit area is separate from the visible glyph size.

When building a web icon set, use semantic values such as icon-default, icon-muted, icon-action, and icon-danger instead of hard-coding a HEX value into each SVG. Decorative icons may use gradients or several colors; navigation, form, and alert icons should follow simpler rules. The 2026 web design trends guide examines icon styles, typography, motion, and art direction in greater depth. The color system described here keeps those trends from fragmenting an interface.

Text over an image needs a controlled overlay, but an overlay does not guarantee that every region passes contrast. Prefer placing text on a stable background region or in a separate container. When CMS imagery changes, use a tested scrim, gradient, or container. Review the worst content cases: a very bright photograph, a very dark one, a multicolor logo, and inconsistent thumbnails.

Hand off a palette with design tokens

A useful handoff includes token names, light and dark values, descriptions, allowed pairs, and the components consuming them. Designers can organize Variables in Figma; developers can map them to CSS custom properties, theme objects, or a token pipeline. Names should express purpose rather than a current value, so they remain accurate after a rebrand.

:root {
  --color-background: #f7fafc;
  --color-surface: #ffffff;
  --color-text-primary: #0b1f3a;
  --color-action-primary: #155eef;
  --color-on-action-primary: #ffffff;
  --color-focus-ring: #7aa7ff;
  --color-danger: #b42318;
}

[data-theme='dark'] {
  --color-background: #0b1020;
  --color-surface: #151d35;
  --color-text-primary: #f7faff;
  --color-action-primary: #56d9ff;
  --color-on-action-primary: #0b1020;
  --color-focus-ring: #8c7cff;
  --color-danger: #ff8a80;
}

This code demonstrates the structure rather than a complete token set. A production system also needs hover, active, disabled, borders, secondary text, and system feedback. Maintain a Figma-to-code mapping and avoid different names on each side. When values change, run visual regression or inspect representative components before releasing across the site. The guide to designing web interfaces with Figma and Canva covers wireframes, UI kits, and broader handoff decisions.

Common website color mistakes

The most common mistake is choosing colors per screen instead of through one system. The homepage uses blue for its primary action, another page chooses orange because it “stands out,” and a form introduces purple from a plugin. Return to semantic tokens and create a new token only when a genuinely different role appears. Another frequent mistake is making supporting copy excessively pale to create a refined appearance; refinement should not require users to strain.

Teams also use status colors as decoration. When red appears on ordinary badges, a real error becomes harder to identify. When green represents both calls to action and success, meanings blur. Do not communicate through hue alone, place text directly over uncontrolled images, use opacity to manufacture every state, or assume dark mode is an inverted palette.

Before approval, confirm that every color has a role; the primary call to action has one priority color; body text and essential UI pass contrast; focus is visible; errors contain text and icons; charts have labels; light and dark themes include all states; icons consume tokens; image backgrounds have a safe treatment; Figma and code values match; and font, icon, and asset licenses are known. This compact checklist prevents most color defects from reaching handoff.

Frequently asked questions about website color palettes

These questions address decisions that often cause confusion when turning an attractive palette into a usable interface. Ratios and examples must still be verified on the real components in each project.

How many colors should a website use?

There is no fixed number. A typical website may need one dominant brand color, one controlled accent, neutral colors, and status colors, while every family contains several tonal steps. Count roles, not HEX values. Two different colors for the same primary action confuse priority. A new color that does not solve a new role probably makes the system more complex without adding clarity.

Is the 60–30–10 rule suitable for web design?

It can help beginners avoid covering a design in accent colors, but it is not a mandatory standard. Websites contain surfaces, states, charts, and changing images, so occupied area varies by page. Use 60–30–10 as an initial style-tile prompt, then distribute color by semantic role, content hierarchy, and component. Contrast and recognition of important actions matter more than a decorative percentage.

Can a logo color become the call-to-action color?

Yes, when it stands out from the background, provides adequate label contrast, and is not used so widely that the action loses emphasis. A very light logo color may need a darker functional variant or a container with dark text. Do not change a core identity color without brand agreement. Build a tonal scale and document which variant serves interaction.

Does a contrast checker replace user testing?

No. A ratio tool helps test quantitative criteria, but it does not fully detect weak hierarchy, ambiguous color meaning, changing backgrounds, or usability in context. Combine automated checks with visual review, color-vision simulation, keyboard navigation, and task testing. WCAG provides an essential foundation rather than the endpoint of a usable experience.

Testing with representative users can reveal confusion that no numerical threshold exposes.

Does every website need dark mode?

No. Dark mode is valuable for products used for long periods, in low light, or where users expect personalization. A small informational site may prioritize one excellent light theme when resources are limited. If dark mode is offered, test it completely rather than changing only the background: logos, imagery, charts, forms, states, and embedded content all need appropriate variants.

The maintenance cost should be included in the decision from the beginning.

Should 2026 color trends determine the entire palette?

No. A trend can influence an accent, campaign, or imagery layer so the interface feels current, while identity colors and semantic tokens remain more durable. Choose a palette for the brand, industry, content, and accessibility first. Then add one replaceable trend detail that does not break the system. This prevents the website from becoming dated as soon as a new fashionable color appears.

Build the color system before decorating the interface

Good website color combinations turn identity into clear rules. Start from a dominant color, create tonal and neutral scales, assign semantic tokens, test real components, measure contrast, design dark mode deliberately, and hand off shared token names. The six palettes in this guide accelerate exploration, but the final system must reflect the project’s own content, imagery, and users.

The strongest result is not the palette with the most fashionable swatches. It is the system in which every action, state, surface, and piece of text has a defensible role and a tested pairing. That discipline makes later campaigns and product expansion faster because teams can add expression without rebuilding basic hierarchy or sacrificing accessibility.

If your organization has a logo but no interface color system, RiverLee can review the identity, create style tiles, design responsive UI, and carry tokens into the production website. Contact RiverLee or call +84 962 334 807 to discuss objectives and scope before choosing a palette simply because it is fashionable.