How to Create a Color Palette for Your Website

Step 1: Determine Brand Tone and Emotional Direction

Colors convey powerful psychological signals. Before selecting colors, answer these questions: Is your brand trustworthy (blue tones), energetic (orange/red tones), natural and friendly (green tones), or elegant and premium (black/purple tones)? Who is your target audience? What colors resonate emotionally with them? This step narrows your hue range and avoids repeated revisions later.

Step 2: Choose Your Brand Primary Color

The brand primary color is the starting point for the entire palette. Choose a color you're satisfied with both emotionally and visually, then record it in HSL format. Recommend setting the primary color's saturation at 60%–80% (vivid enough but not jarring) and lightness at 45%–55% (sufficient contrast on both white and black backgrounds).

/* Example: tech startup blue */
--primary: hsl(214, 72%, 52%);

Step 3: Generate Primary Color Scale

From the primary color, generate a scale of 5–10 shades by varying lightness (L), covering from very light (for backgrounds, highlights) to very dark (for text, dark buttons). Keep hue (H) and saturation (S) constant, only adjust lightness:

--primary-50:  hsl(214, 72%, 95%);
--primary-100: hsl(214, 72%, 88%);
--primary-200: hsl(214, 72%, 78%);
--primary-300: hsl(214, 72%, 65%);
--primary-400: hsl(214, 72%, 55%);
--primary-500: hsl(214, 72%, 52%); /* base */
--primary-600: hsl(214, 72%, 42%);
--primary-700: hsl(214, 72%, 32%);
--primary-800: hsl(214, 72%, 22%);
--primary-900: hsl(214, 72%, 12%);

Step 4: Establish Neutral Colors (Gray Scale)

Neutral colors (gray scale) are the most used colors on a website, for text, backgrounds, borders, dividers, etc. Using pure gray (0% saturation) often feels harsh; a better approach is using "tinted grays" with a slight brand hue, creating a more cohesive visual:

/* Tinted grays with brand hue */
--gray-50:  hsl(214, 20%, 98%);  /* page background */
--gray-100: hsl(214, 15%, 94%);  /* card background */
--gray-200: hsl(214, 15%, 88%);  /* border */
--gray-400: hsl(214, 12%, 60%);  /* placeholder */
--gray-600: hsl(214, 12%, 40%);  /* secondary text */
--gray-800: hsl(214, 15%, 18%);  /* primary text */
--gray-900: hsl(214, 20%, 8%);   /* dark bg */

Step 5: Add Accent and Semantic Colors

Accent colors are for UI elements that need to attract attention (badges, special labels). Semantic colors have fixed meanings: success (green), warning (yellow/orange), error (red), info (blue). These colors should differ from the primary but maintain similar saturation and lightness ranges for visual consistency:

--success: hsl(142, 65%, 42%);
--warning: hsl(38,  90%, 50%);
--error:   hsl(0,   72%, 52%);
--info:    hsl(199, 72%, 48%);

Step 6: Validate Contrast Ratios

Once the color palette is determined, you must validate contrast ratios for all common color combinations. WCAG AA requires at least 4.5:1 for body text vs background, and at least 3:1 for large text (18px+). Especially check:

• White text on primary color background (e.g., main buttons)
• Body text on page background
• Secondary text on card backgrounds
• Error/success color combinations

Step 7: Implement as CSS Variables

Define the finalized palette as CSS custom properties (variables) so the entire project can reference them, and changes only need to be made in one place:

:root {
  /* Semantic roles */
  --color-bg:        var(--gray-50);
  --color-surface:   var(--gray-100);
  --color-border:    var(--gray-200);
  --color-text:      var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-primary:   var(--primary-500);
  --color-primary-hover: var(--primary-600);
}