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);
大きな効果があります。
別の例として、blue と white を見てみましょう。特に、色空間の形状が結果に影響する可能性があるため、これを選択しました。この場合、白から青への移動中にほとんどの色空間が紫色になります。また、oklab がミキシングに適した色空間であることも示しており、白と青を混ぜる（紫ではない）ほとんどの人の期待に近いものとなっています。
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
color-mix() を使用して色空間の効果を学ぶことは、グラデーションの作成についても豊富な知識です。色 4 の構文を使用すると、グラデーションで色空間を指定できます。これにより、グラデーションは一定の領域にミックスが表示されます。
.black-to-white-gradient-in-each-space {
--srgb: linear-gradient(to right in srgb, black, white);
--srgb-linear: linear-gradient(to right in srgb-linear, black, white);
--lab: linear-gradient(to right in lab, black, white);
--oklab: linear-gradient(to right in oklab, black, white);
--lch: linear-gradient(to right in lch, black, white);
--oklch: linear-gradient(to right in oklch, black, white);
--hsl: linear-gradient(to right in hsl, black, white);
--hwb: linear-gradient(to right in hwb, black, white);
--xyz: linear-gradient(to right in xyz, black, white);
--xyz-d50: linear-gradient(to right in xyz-d50, black, white);
--xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}
どの色空間が「最適」なのかという疑問に答えるなら、そのような色空間はありません。たくさんの選択肢があるのはそのためです。また、どちらかが「最適」であれば、新しい色空間は開発されません（oklch と oklab を参照）。それぞれの色空間は、輝きをもたらし、最適な選択となるでしょう。
たとえば、鮮明なミックス結果が必要な場合は hsl または hwb を使用します。次のデモでは、2 つの鮮やかな色（マゼンタとライム）を混ぜて、hsl と hwb の両方が鮮やかな色を、sRGB と oklab は彩度の低い色を作り出しています。
一貫性があり控えめにしたい場合は、oklab を使用してください。以下のデモでは、青と黒をミックスして、hsl と hwb で過度に鮮やかな色相の色を生成し、sRGB と oklab でより濃い青を生成します。
color-mix() プレイグラウンドを 5 分間操作し、さまざまな色と空間を試してみましょう。各空間の利点を実感できます。また、私たち全員がユーザー インターフェースでその可能性に適応していくと、色空間に関するガイダンスが増えると予想されます。
色相補間方法を調整する
円柱の色空間（角度を受け取る h 色相チャンネルを持つ色空間）に混合する場合は、補間を shorter、longer、decreasing、increasing にするかどうかを指定できます。詳細については、こちらの HD カラーガイドをご覧ください。
同じ青から白へのミックスの例を以下に示しますが、今回は色相補間方法が異なる円柱状の空間にのみ存在します。
次に、色相補間を可視化するために作成した別の Codepen がありますが、特にグラデーション用です。色相補間が指定されている場合に、各色空間がどのようにミックス結果を生成するか理解するのに役立つはずです。ぜひお試しください。
さまざまな色の構文の混在
これまでは、blue や white など、CSS の名前付きの色がほとんど混在していました。CSS のカラーミックスでは、2 つの異なる色空間の色を混在させることができます。この点も、ミキシングの色空間を指定することが重要なもう一つの理由です。そうすることで、2 つの色が同じ空間にない場合の共通空間が設定されます。
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
前の例では、hsl と display-p3 は oklch に変換されてから混合されます。かなりクールで柔軟性に優れています。
混合比率の調整
これまでのほとんどの例で示したように、混合するたびに各色の部分が同じになるとは限りません。良いことに、最終的なミックスに各色をどの程度含めるかを定義する構文があります。
このトピックの始めに、仕様どおりに同等のミックスのサンプルを次に示します。
.ratios-syntax-examples {
/* omit the percentage for equal mixes */
color: color-mix(in lch, purple, plum);
color: color-mix(in lch, plum, purple);
/* percentage can go on either side of the color */
color: color-mix(in lch, purple 50%, plum 50%);
color: color-mix(in lch, 50% purple, 50% plum);
/* percentage on just one color? other color gets the remainder */
color: color-mix(in lch, purple 50%, plum);
color: color-mix(in lch, purple, plum 50%);
/* percentages > 100% are equally clamped */
color: color-mix(in lch, purple 80%, plum 80%);
/* above mix is clamped to this */
color: color-mix(in lch, purple 50%, plum 50%);
}
これらの例はエッジケースを明確にするためのものです。最初の例では、50% は必須ではないがオプションで指定できることを示しています。最後の例は、合計した比率が 100% を超えると、合計が 100% に固定されるという興味深いケースを示しています。
また、一方の色のみで比率を指定した場合、もう一方の色は 100% の余りと見なされます。この動作を説明するために役立つ例をさらにいくつか示します。
color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */
次の例は、次の 2 つのルールを示しています。 1. 比率が 100% を超えると、比率が固定され、均等に分配されます。1. 一方の比率のみを指定した場合、もう一方の色は、100 からその比率を引いた値に設定されます。
最後のルールは少し明確ではありません。両方の色に割合を指定しても、合計が 100% にならない場合はどうなるでしょうか。
color-mix(in lch, purple 20%, plum 20%)
この color-mix() の組み合わせにより、透明度、40% 透明になります。比率の合計が 100% にならないと、組み合わせは不透明になりません。どちらの色も完全に混ざることはありません。
ネスト color-mix()
すべての CSS と同様に、ネストは想定どおりに処理され、内部関数が最初に解決され、その値を親コンテキストに返します。
color-mix(in lch, purple 40%, color-mix(plum, white))
目的の結果を得るため、必要な範囲だけネストしてください。
ライト / ダークのカラーパターンを作成する
color-mix() を使用してカラーパターンを作成してみましょう。
基本的なカラーパターン
次の CSS では、ブランドの 16 進数色に基づいてライトモードとダークモードを作成します。ライトモードでは、2 種類の濃い青色のテキストと、非常に薄い白の背景サーフェス色が作成されます。次に、ダーク設定のメディアクエリでは、カスタム プロパティに新しい色が割り当てられるため、背景は暗く、テキスト色は明るくなります。
:root {
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
}
@media (prefers-color-scheme: dark) {
:root {
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
}
}
これらはすべて、ブランドカラーに白または黒を混ぜることで実現できます。
中間カラーパターン
さらに、ライトモードとダークモード以外のものを追加することで、さらに改善できます。次のデモでは、ラジオボタン グループを変更して HTML タグ [color-scheme="auto"] の属性を更新し、セレクタで条件付きでカラーテーマを適用できるようにします。
この中間デモでは、すべてのテーマカラーを :root にリストするカラーテーマ設定手法も紹介しています。こうすることで、全体像を把握しやすくなり、必要に応じて調整できます。スタイルシートの後半では、定義した変数を使用できます。これにより、色操作はすべて最初の :root ブロックに含まれているため、スタイルシートで色操作を探す手間を省くことができます。
その他の興味深いユースケース
Ana Tudor には、いくつかの学習ユースケースを含む優れたデモがあります。
DevTools を使用した color-mix() のデバッグ
Chrome DevTools は color-mix() をサポートしています。構文を認識してハイライト表示し、[スタイル] ペインのスタイルのすぐ隣にミックスのプレビューを作成し、代替色を選択できます。
DevTools では次のようになります。
ミキシングをお楽しみください！