How to Pick Colors for Web Design and Branding

Color mistakes cost conversions. A call-to-action button with poor contrast gets ignored. Brand colors that fail accessibility standards exclude 8% of male users (color blindness). Inconsistent palettes make interfaces look amateurish.

Professional color selection requires more than aesthetics. You need technical precision: converting between HEX, RGB, and HSL formats, checking WCAG contrast ratios, and generating harmonious palettes that work across light and dark modes.

This guide covers the exact workflows designers and developers use daily: picking accessible colors, understanding color formats, applying color theory, and avoiding the pitfalls that plague amateur designs.

Understanding Color Formats

Web developers work with three primary color models, each serving different purposes in your workflow.

HEX (Hexadecimal)

The most common format in CSS. A 6-character code combining red, green, and blue values in base-16.

.button {
  background: #3B82F6; /* Blue-500 from Tailwind */
}

Anatomy: #RRGGBB

• First two characters: Red (00-FF)
• Middle two: Green (00-FF)
• Last two: Blue (00-FF)

HEX codes are compact and copy-paste friendly between design tools like Figma and your code editor. Most color pickers output HEX by default.

Short syntax: Some colors can be abbreviated: #F00 expands to #FF0000 (pure red).

RGB (Red, Green, Blue)

Defines colors by light intensity from 0 to 255 for each channel. Matches how screens physically emit light.

.text {
  color: rgb(59, 130, 246); /* Same blue as #3B82F6 */
}

RGB excels when you need dynamic color manipulation in JavaScript:

// Darken a color by 20%
const darken = (r, g, b, amount) => {
  return `rgb(${r * (1 - amount)}, ${g * (1 - amount)}, ${b * (1 - amount)})`;
};

RGBA variant: Add transparency with the alpha channel (0.0 to 1.0):

.overlay {
  background: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

HSL (Hue, Saturation, Lightness)

The most intuitive format for humans. Perfect for creating color variations programmatically.

.primary {
  background: hsl(217, 91%, 60%); /* Same blue */
}

Components:

• Hue (0-360°): Position on color wheel (0=red, 120=green, 240=blue)
• Saturation (0-100%): Color intensity (0%=gray, 100%=vivid)
• Lightness (0-100%): Brightness (0%=black, 50%=pure color, 100%=white)

HSL makes hover states trivial:

.button {
  background: hsl(217, 91%, 60%);
}

.button:hover {
  background: hsl(217, 91%, 50%); /* Just reduce lightness */
}

Modern Formats: LCH and OKLCH

CSS now supports perceptually uniform color spaces that prevent “muddy” gradients:

.gradient {
  background: linear-gradient(
    in oklch,
    oklch(0.7 0.2 0) 0%,
    oklch(0.5 0.3 280) 100%
  );
}

OKLCH produces smoother transitions than HSL, especially in blues and purples. Browser support reached 90%+ in 2024.

Color Theory for Digital Design

Color theory isn’t abstract art knowledge. It’s a systematic way to create visual hierarchy and guide user attention.

The Color Wheel

All color harmony rules derive from the 12-hue color wheel:

• Primary: Red, Yellow, Blue
• Secondary: Orange, Green, Purple
• Tertiary: Red-Orange, Yellow-Orange, etc.

Complementary Colors

Colors opposite on the wheel (180° apart). Creates maximum contrast and visual tension.

Example: Blue (#3B82F6) and Orange (#F97316)

Use case: Call-to-action buttons. If your brand is blue, make your CTA orange for maximum pop.

Warning: Never use red text on green backgrounds (or vice versa). Unreadable for color-blind users.

Triadic Colors

Three colors evenly spaced (120° apart). Offers vibrant contrast while maintaining balance.

Example: Red, Yellow, Blue

Use case: Data visualizations. Triadic schemes help differentiate categories without clashing.

Analogous Colors

Adjacent colors on the wheel (30° apart). Creates serene, cohesive designs.

Example: Blue, Blue-Green, Green

Use case: Backgrounds and gradients. Analogous schemes feel natural and harmonious, often found in nature photography.

Monochromatic Palettes

Single hue with varying lightness and saturation. The safest approach for beginners.

Example: Blue-900 (dark) to Blue-50 (light)

Use case: SaaS dashboards. Monochromatic palettes feel professional and reduce decision fatigue.

Building a Professional Color Palette

Don’t pick colors randomly. Follow this systematic process:

1. Start with Brand Colors (1-2 colors)

Your brand primary and (optionally) secondary. These are non-negotiable.

:root {
  --brand-primary: #3B82F6;
  --brand-secondary: #8B5CF6;
}

2. Apply the 60-30-10 Rule

Classic interior design rule that works for UI:

• 60%: Dominant color (backgrounds, large surfaces)
• 30%: Secondary color (cards, panels, navigation)
• 10%: Accent color (buttons, links, highlights)

Example:

• 60%: Neutral gray (#F3F4F6)
• 30%: Light blue (#DBEAFE)
• 10%: Brand blue (#3B82F6)

3. Generate Shades (9-11 stops)

Don’t use a single shade of blue. Create a full spectrum from dark to light:

--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--blue-200: #BFDBFE;
/* ... */
--blue-500: #3B82F6; /* Your base brand color */
/* ... */
--blue-900: #1E3A8A;

Tools: Tailwind’s color palette generator, Shadcn color scales.

4. Add Semantic Colors

Users expect certain colors for specific meanings:

--success: #10B981; /* Green */
--warning: #F59E0B; /* Orange */
--error: #EF4444;   /* Red */
--info: #3B82F6;    /* Blue */

Never use red for success or green for errors. Fight against Jakob’s Law (users expect conventional patterns).

5. Test in Light and Dark Modes

Your palette must work in both contexts. Dark mode isn’t just inverted colors:

Light mode background: #FFFFFF Dark mode background: #0F172A (not pure black - causes eye strain)

Reduce saturation in dark mode to prevent “neon” effect:

/* Light mode */
--primary-light: hsl(217, 91%, 60%);

/* Dark mode - reduce saturation by ~20% */
--primary-dark: hsl(217, 70%, 60%);

Accessibility: WCAG Contrast Ratios

Ignoring contrast standards is a legal risk. WCAG 2.1 requires minimum ratios between text and background.

Contrast Ratio Calculation

Contrast is measured as a ratio from 1:1 (invisible) to 21:1 (black on white).

Formula:

Contrast Ratio = (Lighter Luminance + 0.05) / (Darker Luminance + 0.05)

Don’t calculate manually. Use our Color Picker which shows real-time WCAG compliance.

WCAG Compliance Levels

Level	Normal Text	Large Text	Use Case
AA (Minimum)	4.5:1	3:1	Legal baseline for most sites
AAA (Enhanced)	7:1	4.5:1	Body text on content-heavy sites

Large text: 18pt+ (24px) regular or 14pt+ (18.66px) bold.

Common Failures

Gray text on white backgrounds:

/* ❌ FAIL: Only 2.32:1 contrast */
color: #CCCCCC;
background: #FFFFFF;

/* ✅ PASS: 4.53:1 contrast (AA compliant) */
color: #767676;
background: #FFFFFF;

Light blue on white:

/* ❌ FAIL: Only 1.36:1 */
color: #BFDBFE; /* Blue-200 */
background: #FFFFFF;

/* ✅ PASS: Use Blue-600 or darker (4.56:1) */
color: #2563EB;
background: #FFFFFF;

Color Blindness Considerations

8% of men have red-green color blindness. Never rely on color alone to convey information.

Bad: Green for success, red for error (indistinguishable to color-blind users)

Good: Icons + color:

<span class="success">✓ Success</span>
<span class="error">✗ Error</span>

Tools: Use Stark plugin for Figma or browser DevTools to simulate color blindness.

CSS Color Usage Patterns

CSS Custom Properties (Variables)

Define colors once, use everywhere:

:root {
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
}

[data-theme="dark"] {
  --text-primary: #F9FAFB;
  --text-secondary: #D1D5DB;
  --bg-primary: #1F2937;
  --bg-secondary: #111827;
}

body {
  color: var(--text-primary);
  background: var(--bg-primary);
}

Alpha Transparency

Use color-mix() for dynamic transparency (no RGBA conversion needed):

.overlay {
  /* Old way: convert HEX to RGBA manually */
  background: rgba(59, 130, 246, 0.5);

  /* New way: mix with transparent */
  background: color-mix(in srgb, #3B82F6 50%, transparent);
}

Gradients

Linear gradients for backgrounds, buttons, and overlays:

.hero {
  background: linear-gradient(
    135deg,
    #667EEA 0%,
    #764BA2 100%
  );
}

Radial gradients for spotlight effects:

.spotlight {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
}

Color Functions

Manipulate colors in CSS without preprocessors:

.button {
  --hue: 217;
  background: hsl(var(--hue), 91%, 60%);
}

.button:hover {
  /* Shift hue by 10 degrees for subtle effect */
  background: hsl(calc(var(--hue) + 10), 91%, 60%);
}

Common Mistakes to Avoid

Using Too Many Colors

Problem: Rainbow interfaces look unprofessional and increase cognitive load.

Fix: Limit to 3-5 core colors (primary, secondary, accent, plus semantic like error/success).

Poor Contrast

Problem: Light gray text on white backgrounds fails accessibility.

Fix: Test every text/background combination with a contrast checker. Aim for 4.5:1 minimum.

Inconsistent Color Application

Problem: Using #3B82F6 in one component, #3B81F5 in another (typo).

Fix: Use CSS variables or a design token system (Tailwind, Chakra UI, etc.).

Pure Black or White

Problem: #000000 and #FFFFFF are harsh and unnatural. Causes eye strain in dark mode.

Fix:

• Instead of white: #FAFAFA or #F9FAFB
• Instead of black: #0F172A or #1F2937

Ignoring Color Blindness

Problem: Using red and green as the only differentiators (8% of men can’t distinguish).

Fix: Add icons, patterns, or labels. Never rely on color alone.

Not Testing in Context

Problem: Colors look different on various backgrounds and screen types.

Fix: Test on actual devices (OLED vs LCD). Preview in light/dark mode. Check with f.lux or Night Shift enabled.

Pro Tips

Start with Grayscale

Design your entire UI in black, white, and gray first. Add color last. This forces you to create hierarchy through size, weight, and spacing.

Use Color Variables

Never hardcode HEX values in multiple places:

/* ❌ Bad: Change requires find/replace */
.button { background: #3B82F6; }
.link { color: #3B82F6; }

/* ✅ Good: Update once */
:root { --primary: #3B82F6; }
.button { background: var(--primary); }
.link { color: var(--primary); }

Extract Colors from Photos

Need a color palette for a nature-themed app? Use a photo:

1. Find high-quality nature photo (Unsplash)
2. Use our Color Picker or Adobe Color
3. Extract 5 dominant colors
4. Adjust lightness for text/background use

Use Pre-Built Palettes

Don’t reinvent the wheel. Start with proven systems:

• Tailwind CSS: 22 colors × 11 shades each
• Material Design: Google’s complete palette
• Radix Colors: Accessible by default
• Open Color: Korean-designed, global appeal

Customize from there instead of starting from scratch.

Learn from Top Sites

Visit Stripe, Vercel, Linear, or Notion. Use browser DevTools to inspect their color variables. Note how they:

• Use subtle grays (not pure black/white)
• Limit accent colors to 1-2
• Apply consistent spacing in color scales

Tools and Workflows

Design Tools

• Figma: Industry standard, built-in color picker with contrast checker
• Adobe Color: Generate palettes from color theory rules
• Coolors: Random palette generator with locking
• Khroma: AI-powered palette generator trained on your preferences

Developer Tools

• Browser DevTools: Inspect and edit colors in real-time
• CSS Variables Inspector: See all custom properties at once
• Accessibility tab: Chromium browsers show contrast ratios

Our Color Picker

Use our free Color Picker tool to:

• Convert between HEX, RGB, and HSL instantly
• Check WCAG contrast ratios in real-time
• Generate complementary, triadic, and analogous palettes
• Copy CSS-ready values to clipboard

Perfect for rapid prototyping and production color decisions.

Frequently Asked Questions

What is the best color format for CSS?

HEX for static values, HSL for dynamic color manipulation. If you need to programmatically darken or lighten colors, HSL is superior because you can adjust the lightness value without converting formats. For transparency, use the modern color-mix() function instead of converting to RGBA.

How do I pick accessible colors?

Start with your brand color. Test it against white and black backgrounds using a contrast checker (our tool shows real-time ratios). If it fails, adjust lightness until you hit 4.5:1 for normal text or 3:1 for large text. For dark mode, reduce saturation by 15-20% to prevent oversaturation.

Should I use pure black (#000000) in dark mode?

No. Pure black causes eye strain on OLED screens (pixels fully off creates harsh contrast). Use dark grays like #0F172A or #1F2937. Similarly, avoid pure white (#FFFFFF) and use #FAFAFA instead.

How many colors should my palette have?

Start with 3-5 core colors: primary, secondary (optional), accent, plus semantic colors (success, warning, error). Generate 9-11 shades of each (50-900 scale). Total palette: 30-50 colors maximum. More creates decision fatigue.

What is the 60-30-10 rule?

A guideline from interior design that works for UI: 60% dominant color (backgrounds), 30% secondary color (cards, panels), 10% accent color (buttons, highlights). This creates visual balance without overwhelming users.

How do I test for color blindness?

Use browser DevTools (Chromium has built-in emulation) or Figma plugins like Stark. The most common type is red-green color blindness (deuteranopia), affecting 8% of men. Always pair color with icons or labels and never rely on color alone to convey information.

Can I use gradients for backgrounds?

Yes, but subtly. Use gradients with colors close in hue (analogous scheme) for backgrounds. Avoid rainbow gradients or high-contrast combinations because they reduce text readability and feel dated.

Use Our Free Color Picker

Need to pick perfect colors for your next project? Our Color Picker tool gives you everything in one place:

• Instant conversion between HEX, RGB, and HSL formats
• Real-time WCAG contrast checker with AA/AAA compliance badges
• Automatic palette generation using color theory (complementary, triadic, analogous)
• Color history to track recent selections
• Click to copy all formats to clipboard

Perfect for designers building brand systems and developers implementing accessible UIs. No signup, completely free.