カラーミキサー

color-mix()は、指定した色空間で2つの色を混ぜるCSSの関数です。たとえばcolor-mix(in oklab, #ff5733, #3b82f6 30%)のように書きます。現在のすべてのブラウザで動作します。古いブラウザ向けには、上のスニペットのように、その前に通常の色をフォールバックとして書いておきましょう。

迷ったらOKLabが無難です。中間の色が明るさを保ち、濁りません。OKLCHは鮮やかさを保ちますが、色相環を最短経路で回るため、赤と青は紫やピンクを経由します。sRGBは昔のツールの混ぜ方で、中間の色がくすんで暗く見えがちです。

画面は光を足していくため、このツールは光の値を平均します。そのため青と黄色を混ぜると緑ではなく、グレーや淡い色になります。絵の具は光を差し引くので、同じ組み合わせでも紙の上では緑に見えます。絵の具の結果を予測したいときは、画面の色空間ではなく絵の具の混色モデルを使ってください。