CSS · Modern CSS Features

Relative Colors

Mix colors together to create new shades automatically

Find videos you like?

Save to resource drawer for future reference!

What are Relative Colors?

Mix existing colors to create new ones without manual calculation

Mix colors together with color-mix() function

Lighten colors by mixing with white

Darken colors by mixing with black

Create entire color palettes from one base color

Perfect for themes and design systems

No manual color calculations needed

Simple Concept

Think of color-mix() like mixing paint! Mix blue paint with white paint to get light blue. Mix blue paint with black paint to get dark blue. That's exactly what color-mix() does in CSS!

How color-mix() Works

Understanding the basics

Mix with White

Makes colors lighter - like adding white paint

color-mix(in srgb, blue 50%, white)

Mix with Black

Makes colors darker - like adding black paint

color-mix(in srgb, red 70%, black)

Mix Two Colors

Blend two colors together to create a new one

color-mix(in srgb, purple 50%, pink)

Control the Mix

The percentage controls how much of the first color to use

50% = equal parts, 70% = more first color

Basic Syntax

How to write color-mix()

Basic Format

CSS

color-mix(in srgb, color1 percentage, color2)

Lighten a Color

CSS

/* Mix with white to lighten */
.button {
  background: color-mix(in srgb, #3b82f6 50%, white);
  /* Result: Light blue */
}

Darken a Color

CSS

/* Mix with black to darken */
.button:hover {
  background: color-mix(in srgb, #3b82f6 70%, black);
  /* Result: Dark blue */
}

Create Color Palette from Variable

CSS

:root {
  --brand: #10b981;
  --brand-light: color-mix(in srgb, var(--brand) 50%, white);
  --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
}

/* Now use them anywhere! */
.button { background: var(--brand); }
.button:hover { background: var(--brand-dark); }

Pro Tip

Use CSS variables with color-mix() so you can change one color and all variations update automatically!

See It In Action: Color Mixing Basics

Visual demonstration of how colors mix

Understanding Color Mix

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Color Mix Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Understanding color-mix()</h1>
      <p class="subtitle">Mix colors together to create new ones!</p>
      <!-- Example 1: Lighten -->
      <div class="demo-section">
        <div class="section-title">Making Colors Lighter</div>
        <div class="color-row">
          <div class="color-box blue">Blue</div>
          <div class="plus">+</div>
          <div class="color-box white">White</div>
          <div class="equals">=</div>
          <div class="color-box light-blue">Light Blue</div>
        </div>
        <div class="code-box">
          <span class="highlight">color-mix(in srgb, #3b82f6 50%, white)</span>
        </div>
      </div>
      <!-- Example 2: Darken -->
      <div class="demo-section">
        <div class="section-title">Making Colors Darker</div>
        <div class="color-row">
          <div class="color-box red">Red</div>
          <div class="plus">+</div>
          <div class="color-box black">Black</div>
          <div class="equals">=</div>
          <div class="color-box dark-red">Dark Red</div>
        </div>
        <div class="code-box">
          <span class="highlight">color-mix(in srgb, #ef4444 70%, black)</span>
        </div>
      </div>
      <!-- Example 3: Mix two colors -->
      <div class="demo-section">
        <div class="section-title">Mixing Two Colors</div>
        <div class="color-row">
          <div class="color-box purple">Purple</div>
          <div class="plus">+</div>
          <div class="color-box pink">Pink</div>
          <div class="equals">=</div>
          <div class="color-box purple-pink">Purple-Pink</div>
        </div>
        <div class="code-box">
          <span class="highlight">color-mix(in srgb, #8b5cf6 50%, #ec4899)</span>
        </div>
      </div>
      <div class="info">
        <strong>💡 Key Point:</strong> The percentage controls how much of the first color to use.
        50% means equal parts of both colors. 70% means more of the first color, less of the second!
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Practical Example: Color Palette

Generate shades from one base color

Auto-Generated Palette

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Color Palette Generator</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Automatic Color Palette</h1>
      <p class="subtitle">5 shades generated from one base color</p>
      <div class="palette">
        <div class="swatch shade-100">
          <div>100</div>
          <div class="label">Lightest</div>
        </div>
        <div class="swatch shade-300">
          <div>300</div>
          <div class="label">Light</div>
        </div>
        <div class="swatch shade-500">
          <div>500</div>
          <div class="label">Base</div>
        </div>
        <div class="swatch shade-700">
          <div>700</div>
          <div class="label">Dark</div>
        </div>
        <div class="swatch shade-900">
          <div>900</div>
          <div class="label">Darkest</div>
        </div>
      </div>
      <div class="code-sample">
        <div><span class="comment">/* One base color */</span></div>
        <div><span class="var-name">--brand-color</span>: #10b981;</div>
        <br>
        <div><span class="comment">/* Light shade - mix with white */</span></div>
        <div>background: color-mix(in srgb, var(--brand-color) 20%, white);</div>
        <br>
        <div><span class="comment">/* Dark shade - mix with black */</span></div>
        <div>background: color-mix(in srgb, var(--brand-color) 50%, black);</div>
      </div>
      <div class="info">
        <strong>💡 How it works:</strong> By changing just ONE color variable (--brand-color),
        all 5 shades automatically update! Perfect for themes and design systems.
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

When to Use Relative Colors

Common scenarios

Design Systems

Generate hover, active, and disabled states from base colors automatically

Theme Generation

Create light and dark variants of colors for themes

Brand Customization

Let users customize brand colors and auto-generate palettes

Color Palettes

Build entire color systems from a single base color

Why Use color-mix()?

No Math: No need to manually calculate hex/rgb values
Consistency: All shades stay related to base color
Easy Updates: Change one color, everything updates
Fast: Browser-optimized, no JavaScript needed

Browser Support (2024)

✅ Chrome 111+: Full support

✅ Firefox 113+: Full support

✅ Safari 16.2+: Full support

✅ Edge 111+: Full support

Great news: Widely supported in all modern browsers!

Previous Topic

Anchor Positioning

anchor-name, position-anchor, anchor(), and positioning elements relative to anchors (CSS 2024).

Next Topic

Trigonometric Functions

sin(), cos(), tan(), asin(), acos(), atan(), atan2() for mathematical calculations.

Ask a Question

Have a question about Relative Colors? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Modern CSS Features

Relative Colors

Mix colors together to create new shades automatically

Find videos you like?

Save to resource drawer for future reference!

What are Relative Colors?

Mix existing colors to create new ones without manual calculation

Mix colors together with color-mix() function

Lighten colors by mixing with white

Darken colors by mixing with black

Create entire color palettes from one base color

Perfect for themes and design systems

No manual color calculations needed

Simple Concept

Think of color-mix() like mixing paint! Mix blue paint with white paint to get light blue. Mix blue paint with black paint to get dark blue. That's exactly what color-mix() does in CSS!

How color-mix() Works

Understanding the basics

Mix with White

Makes colors lighter - like adding white paint

color-mix(in srgb, blue 50%, white)

Mix with Black

Makes colors darker - like adding black paint

color-mix(in srgb, red 70%, black)

Mix Two Colors

Blend two colors together to create a new one

color-mix(in srgb, purple 50%, pink)

Control the Mix

The percentage controls how much of the first color to use

50% = equal parts, 70% = more first color

Basic Syntax

How to write color-mix()

Basic Format

CSS

color-mix(in srgb, color1 percentage, color2)

Lighten a Color

CSS

/* Mix with white to lighten */
.button {
  background: color-mix(in srgb, #3b82f6 50%, white);
  /* Result: Light blue */
}

Darken a Color

CSS

/* Mix with black to darken */
.button:hover {
  background: color-mix(in srgb, #3b82f6 70%, black);
  /* Result: Dark blue */
}

Create Color Palette from Variable

CSS

:root {
  --brand: #10b981;
  --brand-light: color-mix(in srgb, var(--brand) 50%, white);
  --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
}

/* Now use them anywhere! */
.button { background: var(--brand); }
.button:hover { background: var(--brand-dark); }

Pro Tip

Use CSS variables with color-mix() so you can change one color and all variations update automatically!

See It In Action: Color Mixing Basics

Visual demonstration of how colors mix

Understanding Color Mix

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Color Mix Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Understanding color-mix()</h1>
      <p class="subtitle">Mix colors together to create new ones!</p>
      <!-- Example 1: Lighten -->
      <div class="demo-section">
        <div class="section-title">Making Colors Lighter</div>
        <div class="color-row">
          <div class="color-box blue">Blue</div>
          <div class="plus">+</div>
          <div class="color-box white">White</div>
          <div class="equals">=</div>
          <div class="color-box light-blue">Light Blue</div>
        </div>
        <div class="code-box">
          <span class="highlight">color-mix(in srgb, #3b82f6 50%, white)</span>
        </div>
      </div>
      <!-- Example 2: Darken -->
      <div class="demo-section">
        <div class="section-title">Making Colors Darker</div>
        <div class="color-row">
          <div class="color-box red">Red</div>
          <div class="plus">+</div>
          <div class="color-box black">Black</div>
          <div class="equals">=</div>
          <div class="color-box dark-red">Dark Red</div>
        </div>
        <div class="code-box">
          <span class="highlight">color-mix(in srgb, #ef4444 70%, black)</span>
        </div>
      </div>
      <!-- Example 3: Mix two colors -->
      <div class="demo-section">
        <div class="section-title">Mixing Two Colors</div>
        <div class="color-row">
          <div class="color-box purple">Purple</div>
          <div class="plus">+</div>
          <div class="color-box pink">Pink</div>
          <div class="equals">=</div>
          <div class="color-box purple-pink">Purple-Pink</div>
        </div>
        <div class="code-box">
          <span class="highlight">color-mix(in srgb, #8b5cf6 50%, #ec4899)</span>
        </div>
      </div>
      <div class="info">
        <strong>💡 Key Point:</strong> The percentage controls how much of the first color to use.
        50% means equal parts of both colors. 70% means more of the first color, less of the second!
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Practical Example: Color Palette

Generate shades from one base color

Auto-Generated Palette

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Color Palette Generator</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Automatic Color Palette</h1>
      <p class="subtitle">5 shades generated from one base color</p>
      <div class="palette">
        <div class="swatch shade-100">
          <div>100</div>
          <div class="label">Lightest</div>
        </div>
        <div class="swatch shade-300">
          <div>300</div>
          <div class="label">Light</div>
        </div>
        <div class="swatch shade-500">
          <div>500</div>
          <div class="label">Base</div>
        </div>
        <div class="swatch shade-700">
          <div>700</div>
          <div class="label">Dark</div>
        </div>
        <div class="swatch shade-900">
          <div>900</div>
          <div class="label">Darkest</div>
        </div>
      </div>
      <div class="code-sample">
        <div><span class="comment">/* One base color */</span></div>
        <div><span class="var-name">--brand-color</span>: #10b981;</div>
        <br>
        <div><span class="comment">/* Light shade - mix with white */</span></div>
        <div>background: color-mix(in srgb, var(--brand-color) 20%, white);</div>
        <br>
        <div><span class="comment">/* Dark shade - mix with black */</span></div>
        <div>background: color-mix(in srgb, var(--brand-color) 50%, black);</div>
      </div>
      <div class="info">
        <strong>💡 How it works:</strong> By changing just ONE color variable (--brand-color),
        all 5 shades automatically update! Perfect for themes and design systems.
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

When to Use Relative Colors

Common scenarios

Design Systems

Generate hover, active, and disabled states from base colors automatically

Theme Generation

Create light and dark variants of colors for themes

Brand Customization

Let users customize brand colors and auto-generate palettes

Color Palettes

Build entire color systems from a single base color

Why Use color-mix()?

No Math: No need to manually calculate hex/rgb values
Consistency: All shades stay related to base color
Easy Updates: Change one color, everything updates
Fast: Browser-optimized, no JavaScript needed

Browser Support (2024)

✅ Chrome 111+: Full support

✅ Firefox 113+: Full support

✅ Safari 16.2+: Full support

✅ Edge 111+: Full support

Great news: Widely supported in all modern browsers!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Anchor Positioning

Trigonometric Functions

Building Your Learning Module...

Relative Colors

Simple Concept

Mix with White

Mix with Black

Mix Two Colors

Control the Mix

Basic Format

Lighten a Color

Darken a Color

Create Color Palette from Variable

Pro Tip

Understanding Color Mix

Auto-Generated Palette

Design Systems

Theme Generation

Brand Customization

Color Palettes

Why Use color-mix()?

Browser Support (2024)

Anchor Positioning

Trigonometric Functions

Relative Colors

Simple Concept

Mix with White

Mix with Black

Mix Two Colors

Control the Mix

Basic Format

Lighten a Color

Darken a Color

Create Color Palette from Variable

Pro Tip

Understanding Color Mix

Auto-Generated Palette

Design Systems

Theme Generation

Brand Customization

Color Palettes

Why Use color-mix()?

Browser Support (2024)