Creating color palettes with the CSS color-mix() function

Michelle BarkerMarch 8, 20247 minute read

Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the design system for our project?

I've been exploring using the relatively new CSS color-mix() function for this purpose. It's been fun to see the different palette variations I could generate! Let's dive into how color-mix() can be a game-changer for your design process.

Getting familiar with the `color-mix()` function

The color-mix() function allows us to specify the two colors we want to mix and then outputs the result. We can control the amount of each color in the mix, as well as the color interpolation space, which determines how the colors blend together.

A graphic showing the components of a color-mix() function, namely an interpolation method and two colors along with their percentages

The color interpolation method is a required parameter. We'll cover it in a later section. For now, we'll use srgb to walk through the examples.

We specify the amount of each color as percentages. If we omit the percentages of both colors, color-mix() will use 50% for each by default. As shown below, mixing red and blue in equal parts gives us a purple hue as expected.

<div class="row">
  <div class="mix"></div>
  <div class="result"></div>
</div>

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.row {
  display: flex;
  gap: 1rem;
  min-width: min(100%, 40rem);
}

.mix,
.result {
  border: 2px solid;
}

.mix {
  flex: 1 0 auto;
  background: linear-gradient(to right, red 50%, blue 0);
}

.result {
  aspect-ratio: 4 / 3;
  flex: 0 0 20%;
}

css

.result {
  background-color: color-mix(in srgb, blue, red);
}

If we specify the percentage for only one color, the percentage for the other color is automatically adjusted so that the total adds up to 100%. For example, whether we specify 90% for blue or 10% for red, the result is the same — a color that's mostly blue with a hint of red.

<div class="wrapper">
  <div class="group">
    <code>color-mix(in srgb, blue 90%, red)</code>
    <div class="row">
      <div class="mix"></div>
      <div class="result"></div>
    </div>
  </div>
  <div class="group">
    <code>color-mix(in srgb, blue, red 10%)</code>
    <div class="row">
      <div class="mix"></div>
      <div class="result"></div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

code {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.wrapper {
  width: min(100%, 40rem);
  margin: 2rem auto;
  display: grid;
  gap: 2rem;
}

.row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.mix {
  flex: 1 0 auto;
  background: linear-gradient(to right, blue 90%, red 0);
  border: 2px solid;
}

.result {
  flex: 0 0 20%;
  background: color-mix(in srgb, blue 90%, red);
  border: 2px solid;
  aspect-ratio: 4 / 3;
}

.group:nth-child(2) .result {
  background: color-mix(in srgb, blue, red 10%);
}

css

/* Both these will produce the same resultant color */
color-mix(in srgb, blue 90%, red)
color-mix(in srgb, blue, red 10%)

If the sum of the percentages for the two colors is less than 100%, the color-mix() behavior is slightly different: the sum is saved as an alpha multiplier, and the two colors are scaled using this multiplier so that their total reaches 100%. (See the Percentage Normalization section in the specification for a few examples).

Although both the color-mix() functions below mix the same amount of each color, the second function, where the sum of the percentages is 40%, produces the same color but with an alpha value of 0.4:

<div class="wrapper">
  <div class="group">
    <code>color-mix(in srgb, blue, red)</code>
    <div class="row">
      <div class="mix"></div>
      <div class="result"></div>
    </div>
  </div>
  <div class="group">
    <code>color-mix(in srgb, blue 20%, red 20%)</code>
    <div class="row">
      <div class="mix"></div>
      <div class="result"></div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

code {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.wrapper {
  width: min(100%, 40rem);
  margin: 2rem auto;
  display: grid;
  gap: 2rem;
}

.group .row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.mix {
  flex: 1 0 auto;
  background: linear-gradient(to right, blue 50%, red 0);
  border: 2px solid;
}

.result {
  flex: 0 0 20%;
  background: color-mix(in srgb, blue, red);
  border: 2px solid;
  aspect-ratio: 4 / 3;
}

.group:nth-child(2) .mix {
  background: linear-gradient(
    to right,
    blue 20%,
    red 0,
    red 40%,
    transparent 0
  );
}

.group:nth-child(2) .result {
  background: color-mix(in srgb, blue 20%, red 20%);
}

css

/* Result: rgb(128 0 128) */
color-mix(in srgb, blue, red)

/* Result: rgb(128 0 128 / 0.4) */
color-mix(in srgb, blue 20%, red 20%)

Creating light and dark variations with `color-mix()`

As a typical use case, we often need to create lighter or darker variations of a brand color. To achieve this, we can mix white or black into our base color in varying amounts with color-mix().

The example below demonstrates how different amounts of white and black are mixed with the base color blue to create its lighter and darker variations, showcasing the use of color-mix() in adjusting base color intensity.

<div class="row">
  <div class="square bg-blue-lighter"></div>
  <div class="square bg-blue-light"></div>
  <div class="square bg-blue"></div>
  <div class="square bg-blue-dark"></div>
  <div class="square bg-blue-darker"></div>
</div>

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.row + .row {
  margin-top: 1rem;
}

.square {
  aspect-ratio: 1;
  width: min(25%, 5rem);
}

css

/* Initial base color */
.bg-blue {
  background-color: blue;
}

/* 50% blue, 50% white */
.bg-blue-light {
  background-color: color-mix(in srgb, blue, white);
}

/* 25% blue, 75% white */
.bg-blue-lighter {
  background-color: color-mix(in srgb, blue, white 75%);
}

/* 50% blue, 50% black */
.bg-blue-dark {
  background-color: color-mix(in srgb, blue, black);
}

/* 25% blue, 75% black */
.bg-blue-darker {
  background-color: color-mix(in srgb, blue, black 75%);
}

Using custom properties to reuse the color variations

By storing the color-mix() values as custom properties, we can reuse them throughout our code. This approach can be useful when we want to create lighter or darker variants of a brand's primary color.

As an example, the code below illustrates how to create brand color variations using the --brand custom property.

css

:root {
  --brand: rgb(0 0 255);

  --brand-light: color-mix(in srgb, var(--brand), white);
  --brand-lighter: color-mix(in srgb, var(--brand), white 75%);
  --brand-dark: color-mix(in srgb, var(--brand), black);
  --brand-darker: color-mix(in srgb, var(--brand), black 75%);
}

We can also create variants of different opacities by mixing in transparent:

css

:root {
  --brand: rgb(0 0 255);
  --brand-alpha-50: color-mix(in srgb, blue, transparent);
  --brand-alpha-75: color-mix(in srgb, blue 75%, transparent);
}

The article Using color-mix() to create opacity variants by Una Kravets explains further.

Example: Styling button variants using `color-mix()` custom properties

Let's apply the color-mix() custom properties to a practical case: styling a simple button. First, we define the custom properties for our main base and secondary colors. As a bonus, we use color-mix() for our secondary color to mix the base color with pink.

css

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, blue, white);

  --secondary: color-mix(in srgb, var(--brand), pink);
  --secondary-light: color-mix(in srgb, var(--secondary), white);
}

Next, we apply these colors to the primary and secondary button variants, using the lighter color variants for hover states.

<button>Primary button</button>
<button class="secondary">Secondary button</button>

* {
  box-sizing: border-box;
}

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, blue, white);

  --secondary: color-mix(in srgb, var(--brand), pink);
  --secondary-light: color-mix(in srgb, var(--secondary), white);
}

button {
  appearance: none;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.65rem;
}

css

button {
  background-color: var(--brand);
  color: white;
}

button:where(:hover, :focus) {
  background-color: var(--brand-light);
}

button.secondary {
  background-color: var(--secondary);
}

button.secondary:where(:hover, :focus) {
  background-color: var(--secondary-light);
}

We're not limited to defining custom properties at the root level only. For instance, we could set a custom property for a component's base color and create variations of this base color within the component's styling using color-mix(). For a secondary component variant, we could simply apply a different base color. This is illustrated below.

<div class="card">
  <h3>Card title</h3>
  <p>Hello</p>
</div>

<div class="card secondary">
  <h3>Card title</h3>
  <p>Hello</p>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica", sans-serif;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

css

.card {
  --color: blue;
  background: color-mix(in srgb, var(--color), white 80%);
  border-top: 5px solid var(--color);
  padding: 1rem;
}

.secondary {
  --color: deeppink;
}

Here's a demo of this concept applied to a variety of UI components.

<div class="wrapper">
  <button>Primary button</button>
  <button class="button--secondary">Secondary button</button>

  <blockquote>
    <p>I am a simple quote</p>
    <cite>Ms A. Person</cite>
  </blockquote>

  <blockquote class="blockquote--secondary">
    <p>I am a simple quote</p>
    <cite>Ms A. Person</cite>
  </blockquote>

  <div class="grid">
    <article class="card">
      <img
        src="https://images.unsplash.com/photo-1422205512921-12dac7b3b603?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDcyMzE0MzJ8&ixlib=rb-4.0.3&q=80&w=400"
        alt="Pink flowers in a meadow" />
      <div class="card__content">
        <h3>Card heading</h3>
        <a href="#0">Find out more</a>
      </div>
    </article>
    <article class="card card--secondary">
      <img
        src="https://images.unsplash.com/photo-1422205512921-12dac7b3b603?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDcyMzE0MzJ8&ixlib=rb-4.0.3&q=80&w=400"
        alt="Pink flowers in a meadow" />
      <div class="card__content">
        <h3>Card heading</h3>
        <a href="#0">Find out more</a>
      </div>
    </article>
  </div>
</div>

* {
  box-sizing: border-box;
}

:root {
  --base: orchid;
  --secondary: color-mix(in srgb, var(--base), lightblue 50%);
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  padding: 1rem;
}

p {
  margin-block: 0;
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
}

h3 {
  margin-block: 0;
}

.wrapper {
  max-width: 40rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

button {
  --color: var(--base);
  appearance: none;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--color);
}

button:where(:hover, :focus) {
  background: color-mix(in srgb, var(--color), white 20%);
}

.button--secondary {
  --color: var(--secondary);
}

blockquote {
  --color: var(--base);
  background: color-mix(in srgb, var(--color), white 75%);
  padding: 1rem;
  margin-inline: 0;
  border-left: 5px solid var(--color);

  p {
    font-size: 1.5em;
  }
}

cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
}

.blockquote--secondary {
  --color: var(--secondary);
}

.card {
  --color: var(--base);
  background: color-mix(in srgb, var(--color), white 75%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.card--secondary {
  --color: var(--secondary);
}

.card__content {
  padding: 1rem;

  a {
    display: block;
    margin-top: 1rem;
    color: color-mix(in srgb, var(--color), black 40%);
  }
}

Creating warm and cool variations with `color-mix()`

While creating lighter or darker variations of an existing color is a common use case for color-mix(), beyond that, we could also create warm and cool variations by mixing warmer or cooler colors into our original palette.

Here we're defining an initial color palette (colors grabbed from Coolors), along with the colors we want to mix to create the warm and cool variants using custom properties.

css

:root {
  --yellow: rgb(221 215 141);
  --peach: rgb(220 191 133);
  --chocolate: rgb(139 99 92);
  --khaki: rgb(96 89 77);
  --grey: rgb(147 162 155);

  --mix-warm: red;
  --mix-cool: blue;
}

.palette > div {
  --color: var(--yellow);

  &:nth-child(2) {
    --color: var(--peach);
  }

  &:nth-child(3) {
    --color: var(--chocolate);
  }

  &:nth-child(4) {
    --color: var(--khaki);
  }

  &:nth-child(5) {
    --color: var(--grey);
  }
}

Then we're using custom properties to apply the second color mixed into the original base color, as well as specifying the amount. We're also specifying default values, so that if no value is given for --mix, the original base color will be used.

css

.palette > div {
  background: color-mix(
    in srgb,
    var(--color),
    var(--mix, var(--color)) var(--amount, 10%)
  );
}

This way, we're able to mix different colors and apply them to the entire palette.

css

.cool {
  --mix: var(--mix-cool);
}

.cool--20 {
  --amount: 20%;
}

.warm {
  --mix: var(--mix-warm);
}

.warm--20 {
  --amount: 20%;
}

<ul>
  <li class="item">
    <p>Original color palette</p>
    <div class="palette">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>red 10%</p>
    <div class="palette warm">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>red 20%</p>
    <div class="palette warm warm--20">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>blue 10%</p>
    <div class="palette cool">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>blue 20%</p>
    <div class="palette cool cool--20">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>white 40%</p>
    <div class="palette white" style="--amount: 40%">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
</ul>

* {
  box-sizing: border-box;
}

:root {
  --yellow: rgb(221, 215, 141);
  --peach: rgb(220, 191, 133);
  --chocolate: rgb(139, 99, 92);
  --khaki: rgb(96, 89, 77);
  --grey: rgb(147, 162, 155);

  --mix-warm: red;
  --mix-cool: blue;
}

body {
  margin: 0;
  padding: 1rem;
  font-family: "Helvetica", sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
}

.item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  & > div {
    --color: var(--yellow);
    aspect-ratio: 1;
    background: var(--color);

    &:nth-child(2) {
      --color: var(--peach);
    }

    &:nth-child(3) {
      --color: var(--chocolate);
    }

    &:nth-child(4) {
      --color: var(--khaki);
    }

    &:nth-child(5) {
      --color: var(--grey);
    }
  }
}

.item:not(:first-child) {
  .palette > div {
    background: color-mix(
      in srgb,
      var(--color),
      var(--mix, var(--color)) var(--amount, 10%)
    );
  }
}

.cool {
  --mix: var(--mix-cool);
}

.cool--20 {
  --amount: 20%;
}

.warm {
  --mix: var(--mix-warm);
}

.warm--20 {
  --amount: 20%;
}

.white {
  --mix: #fff;
}

Specifying the interpolation color space in `color-mix()`

In the previous sections, we used srgb (standard red green blue) as the color interpolation method. We can drastically change the outcome by modifying the color space we use for interpolation. Color spaces are a complex topic and well beyond the scope of this article, but it's worth noting some advantages and disadvantages of a few color spaces when deciding which one to use in color-mix().

Exploring the color space options

Color interpolation determines how one color transitions to another. A good way to visualize this is with gradients, as done in the Color interpolation section by Adam Argyle, which goes into great depth about color spaces and gamuts.

Classic RGB interpolation can result in muddy colors in the central interpolation zone (the middle area of a gradient), whereas the colors remain vibrant when using lch or oklch. As illustrated in the image below, the results are distinctly different when applied to the warm and cool color palettes in the previous example.

The same color mixes produce different results when we compare sRGB (left) and OKLCH (right) color spaces

Unlike srgb and hsl, both oklch and oklab are perceptually uniform. In the words of Lea Verou, this means:

the same numerical change in coordinates produces the same perceptual color difference

Therefore, I tend to prefer oklch and oklab color spaces when it comes to color interpolation with color-mix() — but the choice is yours!

Understanding the shorter and longer interpolation paths

In polar (or circular) color spaces, such as oklch, oklab, and hsl, we can also choose the direction in which the color is interpolated. When we mix two colors equally, the resulting hue angle will be halfway between the angles of the two colors. This will differ depending on whether the interpolation follows the shorter or the longer path around the color circle.

css

color-mix(in hsl, rgb(255 88 88), rgb(86 86 255));
color-mix(in hsl longer hue, rgb(255 88 88), rgb(86 86 255));

Comparing longer and shorter interpolation direction in the HSL color space. The shorter hue produces a pink-ish purple (left) and the longer hue produces a bright green (right).

In the frame below, experiment by mixing colors in different color spaces to observe the outcomes.

<div class="controls">
  <label for="amount">Amount</label>
  <input type="range" min="0" max="100" id="amount" />

  <label for="c1">Color 1</label>
  <input type="color" id="c1" value="#FF0000" data-color />

  <label for="c2">Color 2</label>
  <input type="color" id="c2" value="#0000FF" data-color />

  <fieldset>
    <p>Interpolation method</p>
    <input type="radio" id="shorter" name="method" value="shorter" checked />
    <label for="shorter">Shorter</label>
    <input type="radio" id="longer" name="method" value="longer" />
    <label for="longer">Longer</label>
  </fieldset>

  <fieldset>
    <p>Color space</p>
    <input type="radio" id="srgb" name="space" value="srgb" checked />
    <label for="srgb">srgb</label>

    <input type="radio" id="oklch" name="space" value="oklch" />
    <label for="oklch">oklch</label>

    <input type="radio" id="hsl" name="space" value="hsl" />
    <label for="hsl">hsl</label>
  </fieldset>
</div>
<p data-text hidden></p>

* {
  box-sizing: border-box;
}

body {
  --c1: red;
  --c2: blue;
  --amount1: 50%;
  --amount2: 50%;
  background: color-mix(
    in var(--space, srgb),
    var(--c1) var(--amount1),
    var(--c2) var(--amount2)
  );
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  min-height: 100vh;
  margin: 0;
  font-family: "Helvetica", sans-serif;
}

.controls {
  max-width: 20rem;
  padding: 1rem;
  background: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  max-height: 100vh;
  overflow: auto;
}

fieldset {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: subgrid;
  gap: 0.5rem;
  padding: 0.75rem;

  p {
    grid-column: span 2;
    margin: 0;
  }
}

[data-text] {
  align-self: center;
  background: rgb(255 255 255 / 0.7);
  padding: 1rem;
  margin: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 1.4;
}

const amountInput = document.querySelector("#amount");
const text = document.querySelector("[data-text]");
const colorInputs = document.querySelectorAll("[data-color]");
const colorSpaceInputs = [...document.querySelectorAll('[name="space"]')];
const methodInputs = [...document.querySelectorAll('[name="method"]')];

const setAmounts = (value) => {
  document.body.style.setProperty("--amount1", `${value}%`);
  document.body.style.setProperty("--amount2", `${100 - value}%`);
};

const getColorSpace = () => {
  const space = colorSpaceInputs.find((el) => el.checked).value;

  if (space === "srgb") return space;

  const method = methodInputs.find((el) => el.checked).value;

  return `${space} ${method} hue`;
};

const setTextContent = (value) => {
  const c1 = getComputedStyle(document.body).getPropertyValue("--c1");
  const c2 = getComputedStyle(document.body).getPropertyValue("--c2");

  text.hidden = false;

  text.innerHTML = `
    <code>color-mix(in ${getColorSpace()}, ${c1} ${value}%, ${c2} ${
      100 - value
    }%)</code>`;
};

amountInput.addEventListener("input", (e) => {
  const { value } = e.target;
  setAmounts(value);
  setTextContent(value);
});

colorInputs.forEach((el) => {
  el.addEventListener("input", (e) => {
    const { id, value } = e.target;
    document.body.style.setProperty(`--${id}`, value);

    setTextContent(amountInput.value);
  });
});

const setColorSpace = () => {
  document.body.style.setProperty("--space", getColorSpace());
};

colorSpaceInputs.forEach((el) => {
  el.addEventListener("change", (e) => {
    const { value } = e.target;
    setColorSpace(value);
    setTextContent(amountInput.value);
  });
});

methodInputs.forEach((el) => {
  el.addEventListener("change", () => {
    const space = colorSpaceInputs.find((el) => el.checked).value;
    setColorSpace();
    setTextContent(amountInput.value);
  });
});

setAmounts(amountInput.value);
setTextContent(amountInput.value);
setColorSpace();

Browser support for `color-mix()`

The color-mix() function has been supported in all modern browsers since mid-2023. As always, remember that not all users will have the latest browsers. One way to ensure everyone gets a usable experience is by setting an initial color value. Browsers that do not support color-mix() will ignore the second declaration.

css

div {
  /* First declaration is fallback for browsers that do not support color-mix() */
  background: rgb(150 0 255);
  background: color-mix(in srgb, blue, red);
}

Alternatively, we can use a feature query to detect whether the browser supports color-mix() and provide styles accordingly:

css

.card {
  background: lightblue;
}

@supports (color-mix(in srgb, blue, white)) {
  .card {
    --color: blue;
    background: color-mix(in srgb, var(--color), white 80%);
    border-top: 5px solid var(--color);
  }
}

If you use PostCSS, there is a PostCSS plugin that comes bundled with postcss-preset-env. This plugin allows you to write color-mix() functions without worrying about browser support because your code is automatically converted during build time into CSS that's cross-browser compatible. For example:

css

.some-element {
  background-color: color-mix(in srgb, red, blue);
}

becomes:

css

.some-element {
  background-color: rgb(128 0 128);
}

It's worth noting, this will only work with static values and not custom properties or dynamic values set in JavaScript.

Color interpolation resources

If you're interested in diving deeper into color spaces and color interpolation on the web, here are a few articles to help you understand them:

Okay, Color Spaces by Eric Portis
OKLCH for better color in the browser by Jason Lengstorf
High Definition CSS Color Guide by Adam Argyle
Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS by Geoff Graham
LCH colors in CSS: what, why, and how? by Lea Verou

Summary

We've seen how to use color-mix() to create variations of colors, and how the function can be used in combination with custom properties for use in projects and design systems. With browser support already pretty great, we can look forward to a new era of working with color on the web!

Creating color palettes with the CSS color-mix() function

Getting familiar with the `color-mix()` function

Creating light and dark variations with `color-mix()`

Using custom properties to reuse the color variations

Example: Styling button variants using `color-mix()` custom properties

Creating warm and cool variations with `color-mix()`

Specifying the interpolation color space in `color-mix()`

Exploring the color space options

Understanding the shorter and longer interpolation paths

Browser support for `color-mix()`

Color interpolation resources

Summary

Previous Post Modernizing conventional test automation with TestGrid

Next Post Testing JavaScript with Jest on Vultr

Creating color palettes with the CSS color-mix() function

Previous Post Modernizing conventional test automation with TestGrid

Next Post Testing JavaScript with Jest on Vultr

Stay Informed with MDN