UI/UX Color Palette Guide

Color is one of the most powerful tools in interface design. A well-designed palette improves usability, communicates brand personality, and guides users toward desired actions.

1.1 Why is Color Crucial in UI/UX?

• Visual hierarchy: Directs user attention.
• Feedback: Communicates states (success, error, warning).
• Identity: Reinforces brand recognition.
• Emotion: Creates feelings and connections.
• Accessibility: Ensures everyone can use your product.

1.2 What You'll Learn

1. Anatomy of a complete UI palette
2. The 60-30-10 system applied to interfaces
3. Semantic colors and states
4. Dark mode and themes
5. Accessibility and contrast
6. Case studies of successful apps

A professional UI palette is a structured system with specific roles for each color.

2.1 The 5 Essential Components

2.2 Color Scales

Each color needs a scale of 9-11 shades (50-900) for different uses: subtle backgrounds, borders, hover states, text, etc.

The 60-30-10 rule ensures visual balance and clear hierarchy.

Semantic colors have universal meanings that users recognize instinctively.

4.2 Component States

Every interactive component needs: Default, Hover, Active, Focus, Disabled.

Neutrals make up 80% of any interface. A well-designed scale makes the difference.

5.1 11-Shade Scale

5.2 Warm vs Cool Neutrals

Add a subtle tint to your neutrals to make them more sophisticated. Choose based on your primary color.

82% of users prefer dark mode. But designing it well is complex.

6.1 It's Not Just Inverting Colors

6.2 Key Principles

• Avoid #000000: Use #121212 or similar
• Reduce saturation: 10-20% less on bright colors
• Text: Use #E0E0E0, not pure white
• Elevation: Lighter backgrounds, not shadows

Accessibility is not optional. It's a legal requirement in many countries and improves UX for everyone.

7.1 WCAG: The Standards

7.2 Color Blindness

8% of men have some form of color blindness. Solutions:

• Use blue + orange instead of red + green
• Add icons to states (✓ for success, ✕ for error)
• Don't rely solely on color to communicate information

Let's analyze the palettes of successful apps and what we can learn.

8.1 Spotify

8.2 Airbnb

8.3 Stripe

Let's create a complete UI palette from scratch.

Step 1: Define Your Primary Color

Should reflect your brand, be distinctive, and work in light/dark mode.

Step 2: Generate the Scale

From your base color (500), generate 10 variations (50-900).

Step 3: Choose Neutrals

Add a subtle tint of your primary to your neutrals.

Step 4: Define Semantics

• Success: Green (#10B981)
• Error: Red (#EF4444)
• Warning: Yellow (#F59E0B)
• Info: Blue (#3B82F6)

Step 5: Dark Mode Version

Invert neutrals, lighten primary, desaturate bright colors.

Step 6: Document

Use semantic names (--color-primary, not --blue-500).

CSS Custom Properties are the modern way to implement color systems.

10.1 Recommended Structure

:root {
  /* Primary */
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  
  /* Neutrals */
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text: #111827;
  
  /* States */
  --color-success: #10B981;
  --color-error: #EF4444;
}

[data-theme="dark"] {
  --color-primary: #60A5FA;
  --color-background: #111827;
  --color-text: #F9FAFB;
}

11.1 Our Tools

11.2 Reference Design Systems

• Material Design 3: Google's system with color tokens
• Tailwind CSS: Well-thought-out predefined palette
• Radix Colors: Accessible and consistent scales
• Apple Human Interface: iOS/macOS guide

A well-designed UI palette is the foundation of any successful digital product.

UI Designer's Checklist

Before you start designing, it's important to understand what type of palette best fits your project.

Answer these 4 questions and we'll recommend a palette style based on your product type, audience, and goals.

Studying the palettes of successful apps is one of the best ways to learn color design.

Explore the palettes of Notion, Slack, Discord, Linear, Figma, and Stripe. Each has a unique approach you can apply to your projects.

14.1 What to Learn From Each App?

The best way to learn is by practicing. These exercises will help you apply everything you've learned.

15.1 How to Use the Exercises

1. Read the project brief carefully
2. Consider the audience and context
3. Select your colors using the pickers
4. Observe the real-time preview
5. Click "Get Feedback" to see suggestions

15.2 Evaluation Criteria

• Contrast: Is the text readable? (minimum 4.5:1)
• Coherence: Do the colors work together?
• Context: Are they appropriate for the app type?
• Differentiation: Are primary and secondary distinguishable?

Design tokens are the modern way to manage design systems at scale.

16.1 What Are Design Tokens?

They are variables that store design decisions: colors, spacing, typography, etc. They allow maintaining consistency between design and code.

{
  "color": {
    "primitive": {
      "blue": {
        "50": { "value": "#EFF6FF" },
        "500": { "value": "#3B82F6" },
        "900": { "value": "#1E3A8A" }
      }
    },
    "semantic": {
      "primary": { "value": "{color.primitive.blue.500}" },
      "background": { "value": "{color.primitive.gray.50}" },
      "text": { "value": "{color.primitive.gray.900}" }
    },
    "component": {
      "button": {
        "primary": {
          "background": { "value": "{color.semantic.primary}" },
          "text": { "value": "#FFFFFF" }
        }
      }
    }
  }
}

16.2 Token Levels

16.3 Design Token Tools

• Figma Tokens: Plugin to manage tokens in Figma
• Style Dictionary: Transforms tokens to multiple platforms
• Tokens Studio: Syncs tokens between Figma and code

Figma is the most popular design tool. Here's how to export your palette to Figma.

17.1 Export Methods

17.2 Figma Style Structure

Even experienced designers make these mistakes. Learn to identify and avoid them.

Use this checklist to verify your palette is complete before implementing it.

Check each item as you complete it. The checklist saves your progress as you navigate the guide.