Choosing a Color Palette for Your Website — A Developer-Friendly Method

Developers freeze at color choices because they feel like pure taste. They mostly are not — a usable palette follows a repeatable procedure: pick one hue, derive everything else from it systematically, and let contrast math veto bad options. This post walks that procedure end to end and finishes with a complete mini-palette, hex values included, that you can adapt for your own project.

Step 1: Start from One Brand Hue

Resist choosing "a palette". Choose one hue — a single angle on the color wheel — and let it anchor everything. If the brand exists, it is chosen for you (extract it from the logo). If not, pick by association: blues read trustworthy and technical, greens fresh and financial, purples creative, oranges energetic. Then define it precisely in HSL, because every other decision will be an adjustment of its numbers:

brand hue: 210 (a confident blue)
brand color: hsl(210, 85%, 45%)  =  #1173d4

tints and shades = same hue, different lightness:
  50:  hsl(210, 85%, 96%)  #ecf5fe   subtle backgrounds
  100: hsl(210, 85%, 90%)  #d1e7fb   hover tints
  500: hsl(210, 85%, 45%)  #1173d4   THE brand color
  600: hsl(210, 85%, 38%)  #0e61b3   button hover
  700: hsl(210, 85%, 30%)  #0b4d8e   active/pressed

Keeping hue and saturation fixed while stepping lightness is what makes a scale look like one family instead of five random blues. (The HSL mechanics are covered in HEX vs RGB vs HSL, and you can generate scales in code with the darken/lighten helpers from convert colors in JavaScript.)

Step 2: Apply 60-30-10

The classic interior-design ratio maps directly to interfaces:

• ~60% dominant — page background and large areas: a neutral, almost always
• ~30% secondary — cards, panels, section backgrounds: a slightly different neutral or a whisper-light brand tint
• ~10% accent — the brand color itself: primary buttons, links, active states, key highlights

The common beginner mistake is inverting the ratio — hero sections, buttons, icons, borders all in full-strength brand color. When everything shouts, nothing does. The accent earns attention precisely because it is scarce: a page that is 90% calm neutrals makes the one blue button unmissable.

Step 3: Neutrals with a Hue Bias

Pure grays (equal R, G, B) look lifeless next to a colored accent. The professional trick: give your gray scale a small dose of the brand hue — same H, very low S:

pure gray:        hsl(0, 0%, 96%)    #f5f5f5   (flat)
blue-biased gray: hsl(210, 20%, 96%) #f3f6f9   (harmonised)

full neutral scale at hue 210, sat 15-20%:
  gray-50:  #f6f8fa    page background
  gray-100: #eaeef2    surfaces, dividers
  gray-300: #c3ccd6    borders
  gray-500: #64748b    muted text (4.8:1 on white ✓)
  gray-700: #36455a    secondary text
  gray-900: #10203a    headings, body text

The bias is nearly invisible in isolation but makes the whole page feel intentionally designed — the neutrals and the accent visibly belong to the same world.

Step 4: Semantic Colors, Separate from the Accent

Success, warning, error, and info colors carry meaning and must stay independent of your brand accent. If your brand is green and your success state is the same green, "saved successfully" and "primary action" become indistinguishable. Conventions are strong here — do not fight them:

success: hsl(150, 70%, 32%)  #199155
warning: hsl(38, 95%, 40%)   #c77f05
error:   hsl(0, 72%, 45%)    #c52020
info:    hsl(210, 85%, 45%)  #1173d4  (may share brand hue)

each gets a pale companion tint for banner backgrounds:
success-bg: #e7f6ee   error-bg: #fdecec   warning-bg: #fdf3e1

Nudge each toward your palette's temperature (slightly desaturated, lightness matched to your accent) so they harmonise without losing their signal. And never rely on color alone — pair with icons and text for color-blind users.

Step 5: Check Contrast Early

Before a single component is built, verify the pairs you will actually render: body text on background, muted text on background, white on accent-500 (button labels), accent on background (links). Target 4.5:1 for text and 3:1 for large text and UI elements. Our worked palette passes: gray-900 on gray-50 ≈ 15:1, gray-500 on white ≈ 4.8:1, white on #1173d4 ≈ 4.6:1.

Doing this now costs five minutes; discovering after launch that your button color fails means retinting components across the app. The full rules and fixing strategies are in the WCAG contrast guide.

Step 6: Dark-Mode Variants (Don't Invert)

Naively inverting the palette produces glaring text, muddy accents, and broken elevation. Instead, re-derive each token for dark conditions:

• Backgrounds — dark gray with the same hue bias, never pure black: hsl(210, 25%, 8%) ≈ #0f1620
• Surfaces get lighter as they rise — cards at #1a2432, modals lighter still (shadows are invisible on dark)
• Accent gets lighter and slightly desaturated — #1173d4 fails on dark; use hsl(210, 75%, 62%) ≈ #55a0e6 (white-on-accent buttons may keep a deeper fill)
• Text is off-white — #e4eaf1, with muted text at #94a3b8, both re-checked against the new backgrounds
• Semantic colors brighten similarly — the same hue, raised lightness

The Worked Mini-Palette, Complete

:root {
  --bg: #f6f8fa;          --surface: #ffffff;
  --border: #c3ccd6;      --text: #10203a;
  --text-muted: #64748b;  --accent: #1173d4;
  --accent-hover: #0e61b3;
  --success: #199155;  --warning: #c77f05;  --error: #c52020;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1620;          --surface: #1a2432;
    --border: #33415580;    --text: #e4eaf1;
    --text-muted: #94a3b8;  --accent: #55a0e6;
    --accent-hover: #7ab4ec;
    --success: #34c07c;  --warning: #eda23b;  --error: #e05252;
  }
}

One hue (210), a biased neutral scale, four semantics, contrast verified, dark mode derived — a palette a solo developer can produce in an hour that will not embarrass the product later.

Frequently Asked Questions