Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

CSS color-mix()

Adam Argyle

CSS color-mix() 関数を使用すると、サポートされている色空間で、色を CSS から直接組み合わせることができます。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

color-mix() 以前は、色の濃さの調整、明るさの調整、彩度の調整を行うために、デベロッパーが使用していました。 CSS プリプロセッサカラー: calc() です。

SCSS を使用した場合以前

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

Sass は素晴らしい成績ですカラー CSS 仕様の一歩先を行く取り組みを続けています。しかしながら、 CSS で色を混ぜる実際の方法です。近づくには、部分的な計算を行う必要があります。色値を指定します。現在の CSS で混合をシミュレートする方法の例を簡略化して、以下に示します。

HSL の導入前

.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);
}

それが実現したいのです。柔軟性と性能が高く、多機能な 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);

7 色空間（srgb、linear-srgb、lch、oklch、lab、oklab、xyz）はそれぞれ、黒と白を混ぜた結果を示しています。およそ 5 種類のシェードが表示され、各色空間がグレーに異なるようにミックスされることがわかります。 — デモを試す

やっぱり効果は大きいですね。

別の例として、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);

7 色空間（srgb、linear-srgb、lch、oklch、lab、oklab、xyz）のそれぞれで異なる結果が得られた。多くはピンクや紫色ですが、実際にはまだ青色になっているものもあります。 — デモを試す

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 色相チャンネルを持つスペースの場合、 interpolation は shorter、longer、decreasing、increasing になります。これは、詳しくは、こちらの HD カラーガイドをご覧ください。

注: 色空間が円筒形の場合、color-mix() プレイグラウンドに選択プルダウンが追加されます。再生すると、ミックスが及ぼした効果を確認できます。

これは同じ青から白へのミックスの例ですが、今回はさまざまな色相補間方法を使用して、円柱空間を表現しました。

色相補間を可視化するために作成したもう一つの Codepen ですが、特に勾配に注目してくださいこれにより、それぞれの Pod がどのようにただし、色相補間が指定されている場合は、色空間によってミックス結果が生成されるので、研究をしましょう！

警告: 非円柱体の色相補間方法として、色空間が color-mix() の構文エラーである

さまざまな色の構文を使用した混合

ここまでは、blue や white などの CSS 名前付き色を主に使用してきました。CSS の色ミキシングにより、2 つの異なる色空間からの色をミックスできます。これは、ミキシングの色空間を指定することが重要になります。 2 つの色が同じ空間にない場合の共通空間です

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

上記の例では、hsl と display-p3 は oklch に変換されます。混ぜます。とてもクールで柔軟性があります。

混合比の調整

混ぜるたびに 2 つの色を均等にして多くの例を見てきましたが便利な構文があります。各色の割合を指定します

このトピックを開始するために、以下はすべて同じ（および仕様からの）ミックスリストです。

.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);
  }
}

これらはすべて、ブランドカラーに白または黒を混ぜることによって実現しています。

中間のカラーパターン

ライトモードとダークモード以外にも、さらに設定を進めることができます。イン次のデモでは、Radio Group に変更を加えて HTML の [color-scheme="auto"] タグにより、セレクタが条件付きで適用できるようになります。選択します。

この中間デモでは、カラーテーマ設定の手法も紹介しています。テーマカラーは :root にリストされています。そうすれば、すべてが見やすくなり、調整できます。スタイルシートの後半では、変数はそのまま使用し、定義します。これにより、色処理のためのスタイルシートで探す手間が省けます。それらはすべて最初の :root ブロックに含まれています。

その他の興味深いユースケース

Ana Tudor が優れたデモを実施しており、いくつかのユースケースを紹介しています。 :

DevTools を使用した color-mix() のデバッグ

Chrome DevTools は、color-mix() を適切にサポートしています。このモデルは構文がハイライトされ、スタイルのすぐ隣にミックスのプレビューが作成されます。 [Styles] ペインが表示され、代替色を選択できます。

DevTools では次のようになります。

カラーミックスの構文を調査している Chrome DevTools のスクリーンショット。

ミキシングをお楽しみください！

CSS color-mix()

CSS での色を組み合わせる

さまざまな色空間のミックス

色相補間方法の調整

さまざまな色の構文を使用した混合

混合比の調整

ネスト color-mix()

ライトとダークのカラーパターンの作成

基本的なカラーパターン

中間のカラーパターン

その他の興味深いユースケース

DevTools を使用した color-mix() のデバッグ

ネスト `color-mix()`