Using Color in UI Design

Practical principles for selecting and implementing colors in user interfaces. From system colors to state variations, learn how to create cohesive, functional design systems.

Building Your UI Color System

Every effective UI needs a structured color system. Start with these three foundational color types and expand as needed.

Primary Color

#2D7DD2

Your brand's main color. Used for primary actions, key UI elements, and brand recognition. Should be distinctive and appear throughout the interface.

Secondary Color

#7C3AED

Complements the primary color. Used for less prominent actions, highlights, and creating visual hierarchy. Should work harmoniously with primary.

Accent Color

#E8453C

Draws immediate attention. Used sparingly for CTAs, important notifications, and focal points. High contrast with primary and secondary.

Semantic Colors (Success, Error, Warning, Info)

✓

Success

Positive confirmation

#059669

#10B981

#34D399

#D1FAE5

Error

Critical issues

#DC2626

#EF4444

#F87171

#FEE2E2

⚠

Warning

Caution needed

#D97706

#F59E0B

#FBBF24

#FEF3C7

ⓘ

Info

General information

#2563EB

#3B82F6

#60A5FA

#DBEAFE

Background & Surface Colors

Create depth and hierarchy with subtle variations in background and surface colors. These form the foundation of your interface.

Background Base

#FAFAFA

The main background color. Should be very light (near white) for light mode or very dark for dark mode. Creates the canvas for content.

Surface

#FFFFFF

Sits on top of background. Used for cards, modals, and elevated content. Slightly brighter/darker than background to create depth.

Subtle Accent

#F5F5F5

For alternating rows, subtle highlights, or disabled states. Just barely different from background for gentle distinction.

Interactive State Variations

Every interactive element needs multiple color states. Users must understand when they can interact and receive visual feedback.

Default: Base state

Hover: 10-15% darker

Active: 20-25% darker

Focus: Light background + border

Disabled: Gray, low contrast

Implementation Examples

Copy-paste ready code snippets for CSS variables, Tailwind config, and design tokens.

:root {
  /* Brand Colors */
  --color-primary: #2D7DD2;
  --color-primary-hover: #2464B5;
  --color-primary-active: #1B4F8C;
  --color-secondary: #7C3AED;
  --color-accent: #E8453C;

  /* Semantic Colors */
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;

  /* Backgrounds */
  --color-bg-base: #FAFAFA;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F5F5F5;

  /* Text */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #6B6B6B;
  --color-text-tertiary: #9A9A9A;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#2D7DD2',
          hover: '#2464B5',
          active: '#1B4F8C',
        },
        secondary: '#7C3AED',
        accent: '#E8453C',
        success: {
          DEFAULT: '#10B981',
          bg: '#D1FAE5',
        },
        error: {
          DEFAULT: '#EF4444',
          bg: '#FEE2E2',
        },
        warning: {
          DEFAULT: '#F59E0B',
          bg: '#FEF3C7',
        },
        info: {
          DEFAULT: '#3B82F6',
          bg: '#DBEAFE',
        },
      },
    },
  },
}

{
  "color": {
    "brand": {
      "primary": {
        "value": "#2D7DD2",
        "type": "color"
      },
      "secondary": {
        "value": "#7C3AED",
        "type": "color"
      },
      "accent": {
        "value": "#E8453C",
        "type": "color"
      }
    },
    "semantic": {
      "success": {
        "value": "#10B981",
        "type": "color"
      },
      "error": {
        "value": "#EF4444",
        "type": "color"
      },
      "warning": {
        "value": "#F59E0B",
        "type": "color"
      },
      "info": {
        "value": "#3B82F6",
        "type": "color"
      }
    }
  }
}

Good vs Bad: Common Mistakes

✓ Good: Clear Hierarchy

Welcome Back

Continue where you left off

Why it works:

Strong contrast for text readability
Single vibrant color for CTA
Clear visual hierarchy
Neutral background doesn't compete

✕ Bad: Too Many Colors

Welcome Back

Continue where you left off

Problems:

Too many competing colors
Busy gradient background distracts
Poor text contrast on gradient
No clear focal point

✓ Good: Semantic Colors

Success! Your changes have been saved.

Why it works:

Green immediately signals success
Light background, darker text
Border adds visual weight
Follows universal conventions

✕ Bad: Wrong Semantic Color

Success! Your changes have been saved.

Problems:

Red suggests error, not success
Creates user confusion
Breaks established patterns
May cause unnecessary alarm