CSS color-mix() 関数

定義と使用方法

CSSの color-mix() この関数は、指定された色空間で指定された割合で二つの色値を混ぜ合わせるために使用されます。

例

例 1

hsl色空間で指定された割合で2つの色値を混ぜます：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

実際に試してみてください

例2

oklab色空間で異なる割合で2つの色値を混ぜます：

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

実際に試してみてください

CSS 文法

color-mix(color-interpolation-method, color1 %, color2 %)
値 説明
color-interpolation-method

必須です。使用する色の補間方法を定義します。

キーワード in と色空間名で構成されています。

以下の2つのタイプが利用可能です：

矩形色空間：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

極座標色空間：

  • hsl
  • hwb
  • lch
  • oklch
color1 %

必須です。混ぜる必要のある色の値、およびオプションのパーセンテージ値（0%から100%まで）を使用して、色の割合を指定します。

デフォルトのパーセンテージ値は50%です。
color2 %

必須です。混ぜる必要のある色の値、およびオプションのパーセンテージ値（0%から100%まで）を使用して、色の割合を指定します。

デフォルトのパーセンテージ値は50%です。

技術的詳細

バージョン： CSS Color Module レベル 5

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

相关页面

参考：CSS カラー