How Do You Create a Color Palette for Web Design? How to Expand a Color Scheme from One Color

When building a color palette for web design, it is often easier to start with one base color and add only the roles you actually need instead of choosing five or six unrelated colors at once. A useful sequence is to create tints—lighter colors mixed with white—and shades—darker colors mixed with black—then add analogous or complementary colors only if more roles are still needed. This example starts with one blue and expands it into background, action, supporting, and accent candidates.

After choosing the base color, first expand it into a light background candidate

Use royal blue ■#2563EB as the base. In HueRoll’s 60–30–10 Palette, selecting this color produces pale blue ■#D3E0FB as the background candidate. It is the lightest displayed tint, created by mixing the base color with 80% white. Instead of filling a large background with the full-strength base color, a light tint increases the usable area while keeping a visible relationship to the original blue.

For example, use ■#D3E0FB for the page background and white ■#FFFFFF for card surfaces. Their contrast ratio is about 1.33:1. This is not a claim that the pair is sufficient as a required user-interface boundary; it is an example of a subtle difference between large surfaces. Dark blue-gray ■#334155 body text provides about 7.80:1 contrast against ■#D3E0FB.

Keep the original ■#2563EB for the main button. White ■#FFFFFF text on that blue provides about 5.17:1 contrast. Just these two levels—a light surface and the original base color—can already separate the page background from the primary action.

Add analogous or complementary colors only when a role is still missing

If the same color family is not enough to distinguish every role, add candidates with a different hue. For ■#2563EB, HueRoll’s analogous suggestions include cyan-leaning ■#25C6EB and violet-leaning ■#4A25EB. Because analogous colors stay relatively close to the base hue, they can be useful for supporting sections or short labels where you want variety without losing visual continuity.

For example, ■#4A25EB used for short text or a link on white ■#FFFFFF provides about 7.62:1 contrast. If you need a stronger difference, HueRoll’s complementary suggestion for the base blue is yellow-orange ■#EBAD25. It can work as a small badge or highlight surface, but white ■#FFFFFF text on it provides only about 1.99:1 contrast. Dark navy ■#0F172A text provides about 8.96:1 instead. Generated candidates still need to be checked in the actual foreground-background combination.

Assign temporary roles, then remove colors you do not need

Expanding from one color does not mean every generated suggestion should be used. A useful draft is background = ■#D3E0FB, primary action = ■#2563EB, supporting candidate = ■#4A25EB, and emphasis candidate = ■#EBAD25. Place them in a real screen, then remove colors whose roles overlap. If the supporting color adds no useful distinction, reduce the palette to three colors.

HueRoll’s tints, shades, complementary and analogous suggestions, and 60–30–10 Palette are starting points for expanding one color into candidates. They do not automatically produce a finished palette or guarantee accessibility. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 contrast for normal-size text against its background. HueRoll’s contrast section compares the selected color with white and black only; it does not compare arbitrary custom color pairs or automatically determine AA or AAA conformance, so verify the actual combinations separately.