カラーミキサー
CSSのcolor-mix()のように、選択した色空間で2色を任意の割合で混ぜます。任意のCSS形式で色を2つ入力し、2色目の割合を0～100%に設定して、OKLab、OKLCH、Lab、LCH、sRGB、linear sRGB、Display P3、HSL、HWB、XYZから選びます。結果はHEX、RGB、HSL、OKLCHに加え、スタイルシートですぐ使えるcolor-mix()式で表示されます。
よくある質問
割合はどのように機能しますか？
割合は、混色における色2の比率です。0%では色1、100%では色2が返され、50%では選択した空間で2色の中間になります。color-mix(in space, color1 (100 - p)%, color2 p%)と同じです。
どの色空間を選べばよいですか？
既定のOKLabは知覚的に均一で、濁った中間色や暗い中間色を避けられます。sRGBは旧来のブラウザーやSassのようにガンマ符号化されたチャンネルを混ぜるため、彩度の高い色同士を混ぜると暗くくすんだ色になります。Labは従来のCIE知覚色空間で、OKLabに似ていますが、青の均一性はやや劣ります。
色相ベースの空間では何ができますか？
OKLCH、LCH、HSL、HWBは、色相を色相環の短い弧に沿って補間します。CSSの既定値では、中間色の彩度が保たれるため、どちらの入力色より鮮やかになることがあります。一方の色が色相のない無彩色のグレーなら、もう一方の色の色相を使います。
linear sRGBとXYZは何に使いますか？
どちらも光の強度を線形に混ぜるため、重なり合う光線のように、sRGBの場合より中間色が明るく見えます。物理ベースの効果や、ぼかしたピクセルやブレンドしたピクセルの見た目を再現するのに便利です。
透明度はどのように扱われますか？
CSSのcolor-mix()と同様に、ミキサーは乗算済みアルファで補間するため、透明色によって混色結果が黒に引き寄せられることはありません。アルファ値自体も同じ割合で補間され、8桁の16進コードとCSS関数のスラッシュ以降に表示されます。
どの入力形式を使えますか？
#の有無を問わない16進コード、CSSの色名、rgb()、hsl()、hwb()、lab()、lch()、oklab()、display-p3などのoklch()空間、color()、cmyk()に対応し、自由に組み合わせて使えます。各色は100文字まで入力できます。
結果がsRGBの色域外になるとどうなりますか？
Display P3、OKLCH、LCHで混ぜると、sRGBでは表示できない色が生成されることがあります。その場合、HEX、RGB、HSLはCSS Color 4アルゴリズムを使ってsRGBにマッピングされ、結果に注記が付きます。OKLCH値にはマッピング前の色が維持されます。
color-mix()式を使うにはどうすればよいですか？
色を指定できるCSSプロパティに貼り付けてください。入力色は16進コードで指定され、広色域の入力にはoklch()が使われるため、ブラウザーが同じ混色を再計算します。color-mix()はChrome、Edge、Firefox、Safariの現行バージョンすべてで動作します。
結果の精度はどのくらいですか？
割合は整数のパーセントで指定し、culoriライブラリを使って完全な精度で混色します。RGBチャンネルは整数に、HSLのパーセント値は小数点以下2桁に丸め、OKLCHの明度と彩度は小数点以下4桁で表示するため、ブラウザーによって最後の桁が1段階異なることがあります。
2色の間に複数の段階を作るにはどうすればよいですか？
25%、50%、75%など、割合を変えてミキサーを実行してください。白、黒、グレーに向かう色のスケール全体を作る場合は、Color Tint、Shade、Tone Generatorを使うと、すべての段階を1つの表で生成できます。