CSS Color Mixing: Create Custom Palettes with color-mix()

Colors are a huge part of any website’s look and feel. Instead of manually picking different shades, you can use CSS color mixing to create smooth color transitions automatically. This makes your styles more flexible and easier to update.

With color-mix(), you can blend colors effortlessly—lightening, darkening, or even mixing two different colors to create new ones. Combined with CSS variables, this is a game-changer for modern web design.

Why Use color-mix()?

1. Saves Time – No need to define multiple shades manually.
2. Consistent Design – Shades are automatically generated, keeping colors balanced.
3. Easier Updates – Change one base color, and all shades adjust instantly.
4. More Dynamic – Mix and match colors on the fly.

Here’s how you can use color-mix() to create a full palette of shades for multiple colors in CSS.

HTML Structure

    <div class="container gray">
        <div class="box shade-10"></div>
        <div class="box shade-20"></div>
        <div class="box shade-30"></div>
        <div class="box shade-40"></div>
        <div class="box shade-50"></div>
        <div class="box shade-60"></div>
        <div class="box shade-70"></div>
        <div class="box shade-80"></div>
        <div class="box shade-90"></div>
        <div class="box shade-100"></div>
    </div>

    <div class="container navy">
        <div class="box shade-10"></div>
        <div class="box shade-20"></div>
        <div class="box shade-30"></div>
        <div class="box shade-40"></div>
        <div class="box shade-50"></div>
        <div class="box shade-60"></div>
        <div class="box shade-70"></div>
        <div class="box shade-80"></div>
        <div class="box shade-90"></div>
        <div class="box shade-100"></div>
    </div>

    <div class="container green">
        <div class="box shade-10"></div>
        <div class="box shade-20"></div>
        <div class="box shade-30"></div>
        <div class="box shade-40"></div>
        <div class="box shade-50"></div>
        <div class="box shade-60"></div>
        <div class="box shade-70"></div>
        <div class="box shade-80"></div>
        <div class="box shade-90"></div>
        <div class="box shade-100"></div>
    </div>

    <div class="container">
        <div class="box green shade-10"></div>
        <div class="box green shade-20"></div>
        <div class="box orange shade-30"></div>
        <div class="box orange shade-40"></div>
        <div class="box navy shade-50"></div>
        <div class="box navy shade-60"></div>
        <div class="box gray shade-70"></div>
        <div class="box gray shade-80"></div>
        <div class="box green shade-90"></div>
        <div class="box orange shade-100"></div>
    </div>

CSS Color Mixing:

/* --------------------- */
/*  Snippflow Color-mix  */
/* --------------------- */
body {
    --orange: #ffa545;
    --gray: #C0C9D8;
    --navy: #2C3E50;
    --green: #46a787;
}

/* 🎨 Assign base color dynamically */
.orange   { --base: var(--orange); }
.gray  { --base: var(--gray); }
.navy  { --base: var(--navy); }
.green { --base: var(--green); }

/* Generate shades */
.shade-10  { background: color-mix(in srgb, var(--base) 90%, white 10%); }
.shade-20  { background: color-mix(in srgb, var(--base) 80%, white 20%); }
.shade-30  { background: color-mix(in srgb, var(--base) 70%, white 30%); }
.shade-40  { background: color-mix(in srgb, var(--base) 60%, white 40%); }
.shade-50  { background: var(--base); }
.shade-60  { background: color-mix(in srgb, var(--base) 90%, black 10%); }
.shade-70  { background: color-mix(in srgb, var(--base) 80%, black 20%); }
.shade-80  { background: color-mix(in srgb, var(--base) 70%, black 30%); }
.shade-90  { background: color-mix(in srgb, var(--base) 60%, black 40%); }
.shade-100 { background: color-mix(in srgb, var(--base) 50%, black 50%); }

Result

See the Pen CSS Color Mixing: Create Custom Palettes with color-mix() by Snippflow (@snippflow) on CodePen.

Mixing Two Colors

If you want to mix two colors instead of just lightening or darkening, color-mix() has you covered. Here’s how you can blend red and yellow in different percentages:

:root {
    --red: #FF6F61;
    --yellow: #FFD700;
}

.mix-10  { background: color-mix(in srgb, var(--red) 90%, var(--yellow) 10%); }
.mix-20  { background: color-mix(in srgb, var(--red) 80%, var(--yellow) 20%); }
.mix-30  { background: color-mix(in srgb, var(--red) 70%, var(--yellow) 30%); }
.mix-40  { background: color-mix(in srgb, var(--red) 60%, var(--yellow) 40%); }
.mix-50  { background: color-mix(in srgb, var(--red) 50%, var(--yellow) 50%); }

See also