CSS color-mix()

Adam Argyle

CSS の color-mix() 関数を使用すると、サポートされている任意の色空間で、CSS から直接色を混ぜることができます。

color-mix() より前は、色を暗くしたり、明るくしたり、彩度を下げたりするために、デベロッパーは CSS プリプロセッサまたは色チャネルの calc() を使用していました。

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass は、カラーの CSS 仕様を先取りして優れた仕事をしてきました。ただし、CSS で色を混ぜる方法はありませんでした。近づけるには、部分的な色値の計算を行う必要があります。以下は、CSS でミキシングをシミュレートする方法の簡略化した例です。

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() により、CSS で色を混ぜ合わせることができます。デベロッパーは、混合するカラースペースと、混合における各色の優先度を選択できます。

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

これらを兼ね備えた人材を、Google は求めています。柔軟性、パワー、フル機能を備えた API。Love it.

CSS で色を混ぜる

CSS は複数の色空間と色域の世界に存在するため、混合する色空間を指定することは必須です。さらに、色空間が異なると、ミックスの結果が大幅に変わる可能性があります。そのため、色空間の効果を理解しておくと、必要な結果を得ることができます。

インタラクティブな紹介については、こちらの color-mix() ツールをお試しください。 - 各カラースペースの効果を確認できます。 - 円筒形のカラー空間（lch、oklch、hsl、hwb）で混色する際の色相補間の効果を確認します。 - 上部の 2 つのカラーボックスのいずれかをクリックして、混色する色を変更します。- スライダーを使用して混合比率を変更します。- 生成された color-mix() CSS コードが下部に表示されます。

さまざまなカラー空間での混色

混合（およびグラデーション）のデフォルトの色空間は oklab です。一貫した結果が得られます。別のカラースペースを指定して、必要に応じてミックスを調整することもできます。

たとえば、black と white の場合、混ぜる色空間が違っても、それほど大きな違いは出ないはずです。これは間違いです。

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);