Customizing Colors

Learn how to customize Tailwind's color system to match your brand, create custom themes, and extend the default palette.

What You'll Learn

• Understanding Tailwind's default colors
• How to add custom colors to tailwind.config.ts
• Using custom colors in your components
• Creating a consistent color scheme
• Working with opacity and gradients

Tailwind's Default Color Palette

Tailwind includes a comprehensive color system out of the box.

Standard Colors

Each color comes in shades from 50 (lightest) to 950 (darkest):

Example with Blue:

• blue-50 - Very light blue (#eff6ff)
• blue-100 - Lighter blue
• blue-200 - Light blue
• blue-300 - ...
• blue-500 - Base blue
• blue-600 - Most commonly used
• blue-700 - Dark blue
• blue-800 - Darker blue
• blue-900 - Very dark blue
• blue-950 - Almost black blue

Available colors:

• Grays: slate, gray, zinc, neutral, stone
• Reds: red, rose
• Oranges: orange, amber
• Yellows: yellow, lime
• Greens: green, emerald, teal
• Blues: cyan, sky, blue, indigo
• Purples: violet, purple, fuchsia
• Pinks: pink

How to Use Default Colors

{/* Background colors */}
<div className="bg-blue-600">Blue background</div>
<div className="bg-green-500">Green background</div>

{/* Text colors */}
<p className="text-red-600">Red text</p>
<p className="text-purple-700">Dark purple text</p>

{/* Border colors */}
<div className="border border-gray-300">Light gray border</div>

Our Current Color Usage

Looking at our codebase, we use these colors frequently:

Blues: Primary brand color

// Backgrounds
<div className="bg-blue-600">
<div className="bg-blue-50">  // Very light blue for cards

// Text
<span className="text-blue-600">

// Hover states
<Link className="hover:text-blue-600">

Purples: Accent color

// Gradients
<div className="bg-gradient-to-r from-blue-600 to-purple-600">

// Cards
<div className="bg-purple-50">

Grays: Neutral content

// Text
<p className="text-gray-600">
<h1 className="text-gray-900">

// Backgrounds
<div className="bg-gray-50">
<div className="bg-gray-100">

Yellow: Status indicators

<span className="text-yellow-600">Launching Soon</span>
<span className="bg-yellow-400">🚀 Currently in Launch Preparation</span>

Adding Custom Colors

To add custom colors that fit your brand, edit tailwind.config.ts.

Current Configuration

Open tailwind.config.ts:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

export default config;

Adding a Custom Color

Let's add a custom "brand" color:

theme: {
  extend: {
    colors: {
      background: "var(--background)",
      foreground: "var(--foreground)",

      // Add custom brand color
      brand: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',  // Base brand color
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a',
        950: '#172554',
      },
    },
  },
},

Now you can use:

<div className="bg-brand-600">Custom brand color</div>
<p className="text-brand-500">Brand text</p>

Adding Simple Custom Colors

If you don't need all shades, add a single color:

theme: {
  extend: {
    colors: {
      background: "var(--background)",
      foreground: "var(--foreground)",

      // Simple custom colors
      'k12-blue': '#2563eb',
      'k12-purple': '#7c3aed',
      'accent': '#f59e0b',
    },
  },
},

Usage:

<div className="bg-k12-blue">K12worX blue</div>
<span className="text-accent">Accent color</span>

Creating a Color Scheme

Step 1: Choose Your Colors

Pick colors that represent your brand:

• Primary: Main brand color (buttons, links, key elements)
• Secondary: Supporting color (accents, highlights)
• Accent: Call attention (alerts, badges, special items)
• Neutral: Text and backgrounds

Step 2: Define Shades

Use a tool like https://uicolors.app/create to generate shades:

1. Enter your base color
2. Tool generates 50-950 shades
3. Copy the output

Step 3: Add to Config

theme: {
  extend: {
    colors: {
      // Primary brand colors
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        // ... (from color generator)
        500: '#3b82f6',  // Your chosen color
        // ...
        900: '#1e3a8a',
      },

      // Secondary color
      secondary: {
        50: '#faf5ff',
        100: '#f3e8ff',
        // ...
        500: '#a855f7',  // Your chosen color
        // ...
        900: '#581c87',
      },

      // Accent color
      accent: {
        DEFAULT: '#f59e0b',  // Single color
        light: '#fcd34d',
        dark: '#d97706',
      },
    },
  },
},

Step 4: Use in Components

{/* Primary color */}
<button className="bg-primary-600 hover:bg-primary-700">
  Primary Button
</button>

{/* Secondary color */}
<div className="bg-secondary-50 border-2 border-secondary-500">
  Secondary box
</div>

{/* Accent color */}
<span className="text-accent">Important!</span>
<div className="bg-accent-light">Accent background</div>

Replacing Default Colors

If you want to replace Tailwind's default colors (not recommended for beginners):

theme: {
  colors: {  // NOT extend, will replace all defaults!
    white: '#ffffff',
    black: '#000000',

    // Your custom colors only
    primary: {
      // ...
    },
  },
},

Warning: This removes ALL default colors (blue, red, green, etc.)!

Better approach: Use extend to keep defaults and add customs.

Opacity Modifiers

Tailwind supports opacity modifiers on colors:

Syntax: {property}-{color}-{shade}/{opacity}

{/* 50% opacity */}
<div className="bg-blue-600/50">Semi-transparent blue</div>

{/* 75% opacity */}
<div className="bg-white/75">Mostly opaque white</div>

{/* 10% opacity */}
<div className="bg-black/10">Very transparent black</div>

Common uses:

{/* Frosted glass effect */}
<div className="bg-white/95 backdrop-blur-sm">

{/* Subtle overlay */}
<div className="bg-black/30">

{/* Card on colored background */}
<div className="bg-white/10">

Examples from our codebase:

// Header
<header className="bg-white/95 backdrop-blur-sm">

// Mobile menu
<div className="bg-white/95 backdrop-blur-md">

Gradients

Create beautiful gradients with Tailwind:

Linear Gradients

Syntax: bg-gradient-to-{direction} from-{color} to-{color}

Directions:

• bg-gradient-to-r - Right
• bg-gradient-to-l - Left
• bg-gradient-to-t - Top
• bg-gradient-to-b - Bottom
• bg-gradient-to-br - Bottom-right (diagonal)
• bg-gradient-to-tr - Top-right (diagonal)

{/* Left to right */}
<div className="bg-gradient-to-r from-blue-500 to-purple-600">
  Horizontal gradient
</div>

{/* Top to bottom */}
<div className="bg-gradient-to-b from-gray-50 to-white">
  Subtle vertical gradient
</div>

{/* Diagonal */}
<div className="bg-gradient-to-br from-pink-500 to-orange-400">
  Diagonal gradient
</div>

From our homepage hero:

<section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
  Beautiful gradient hero section
</section>

Three-Color Gradients

Add a middle color with via:

<div className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600">
  Three-color gradient
</div>

Gradient Text

Create gradient text (advanced):

<h1 className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
  Gradient Text
</h1>

Hands-On Exercises

Exercise 1: Add a Custom Color

1. Open tailwind.config.ts
2. Add a custom color:

theme: {
  extend: {
    colors: {
      background: "var(--background)",
      foreground: "var(--foreground)",

      // Your custom color
      'my-color': '#10b981',  // Choose any hex color
    },
  },
},

3. Save the file
4. Restart the dev server (Cmd+C, then npm run dev)
5. Use it in a component:

<div className="bg-my-color text-white p-4 rounded">
  Using my custom color!
</div>

Exercise 2: Create a Gradient Background

Find a section in app/page.tsx and add a gradient:

<section className="bg-gradient-to-r from-green-500 to-blue-600 text-white py-16">
  Your content here
</section>

Exercise 3: Use Opacity Modifiers

Make a semi-transparent overlay:

<div className="relative">
  <img src="/image.jpg" alt="Background" />
  <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
    <h2 className="text-white text-4xl">Overlay Text</h2>
  </div>
</div>

Exercise 4: Change the Brand Colors

Update the hero section gradient:

Find (in app/page.tsx):

<section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">

Try different combinations:

{/* Orange to red */}
<section className="bg-gradient-to-r from-orange-500 to-red-600 text-white">

{/* Green to teal */}
<section className="bg-gradient-to-r from-green-500 to-teal-600 text-white">

{/* Pink to purple */}
<section className="bg-gradient-to-r from-pink-500 to-purple-600 text-white">

Color Accessibility

Contrast Ratios

Ensure text is readable against backgrounds:

Good contrast (WCAG AA compliant):

{/* Dark text on light background */}
<div className="bg-white text-gray-900">Excellent contrast</div>

{/* Light text on dark background */}
<div className="bg-gray-900 text-white">Excellent contrast</div>

{/* Medium text on white */}
<div className="bg-white text-gray-700">Good contrast</div>

Poor contrast (avoid):

{/* Light text on light background */}
<div className="bg-gray-100 text-gray-300">Hard to read!</div>

{/* Medium on medium */}
<div className="bg-gray-500 text-gray-400">Poor contrast</div>

Testing Contrast

Use browser DevTools:

1. Inspect element
2. Look for contrast ratio warning
3. Adjust colors if needed

Or use: https://webaim.org/resources/contrastchecker/

Best Practices

1. Use Semantic Color Names

{/* ✅ Good: Semantic names */}
colors: {
  primary: {...},
  secondary: {...},
  danger: {...},
  success: {...},
}

{/* ❌ Avoid: Color-based names when meaning matters */}
colors: {
  blue: {...},
  red: {...},
}

Why: If you change from blue to green, "primary" still makes sense, but "blue" doesn't!

2. Limit Your Palette

{/* ✅ Good: 2-3 main colors + neutrals */}
- Primary (brand color)
- Accent (highlights)
- Gray (text/backgrounds)

{/* ❌ Avoid: Too many custom colors */}
- 10+ different custom colors

Why: Consistency creates better design!

3. Use the -600 Shade for Primary Colors

{/* ✅ Good: -600 for buttons, links */}
<button className="bg-blue-600">

{/* ❌ Too light */}
<button className="bg-blue-300">

{/* ❌ Too dark */}
<button className="bg-blue-900">

Why: -600 provides good contrast and vibrancy!

4. Keep -50 to -100 for Backgrounds

{/* ✅ Good: Subtle backgrounds */}
<div className="bg-blue-50">Light blue background</div>

{/* ❌ Too intense for backgrounds */}
<div className="bg-blue-600">Too bold for a background</div>

Troubleshooting

Problem: Custom color not working

Check:

1. Did you restart the dev server after editing config?
2. Is the color in the extend section?
3. Did you use quotes around the color name?

// ✅ Correct
'my-color': '#10b981',

// ❌ Wrong (no quotes)
my-color: '#10b981',

Problem: Gradient not showing

Check:

1. Do you have both from- and to- colors?
2. Is bg-gradient-to-{direction} specified?
3. Try a more obvious color combination for testing

Problem: Colors look different than expected

Remember:

• Monitors have different color profiles
• Test on multiple devices
• Use hex values from design system for consistency

Quick Reference

Default colors:

bg-{color}-{shade}    // blue-600, red-500, etc.
text-{color}-{shade}
border-{color}-{shade}

Custom colors (after adding to config):

bg-primary-600
text-brand-500
border-accent

Opacity:

bg-blue-600/50       // 50% opacity
text-white/75        // 75% opacity

Gradients:

bg-gradient-to-r from-blue-600 to-purple-600
bg-gradient-to-b from-gray-50 to-white
bg-gradient-to-br from-pink-500 via-purple-500 to-blue-500

Adding to config:

theme: {
  extend: {
    colors: {
      'custom-name': '#hexvalue',
      brand: {
        500: '#hexvalue',
        600: '#hexvalue',
      },
    },
  },
},

What You've Learned

You now know how to:

• ✅ Use Tailwind's default color palette
• ✅ Add custom colors to tailwind.config.ts
• ✅ Create gradients
• ✅ Use opacity modifiers
• ✅ Ensure color accessibility
• ✅ Follow color best practices

What's Next

You've completed Chapter 05! Now let's put your knowledge into practice with real changes:

Continue to Section 06: Making Changes →

---

Quick Links

• ← Responsive Design
• Chapter 05 Overview
• Continue to Making Changes →