カラーミキサー

カラーミキサーは2 色を新しいものにブレンドし、その結果をHEX、RGB、HSLで表示します。 (#4466EEのような16 進コード、rgb()やhsl()の値、あるいはコーラルのようなCSS名)共通構文で1 色目と2 色目を与え、2 色目のうちどれくらい折り込むかを選択し、瞬時に混合色を計算し、2 色間の中間ステップのグラデーションも構築するため、単一の中間点ではなく全体の遷移を見ることができます。

グラデーションストリップはカラーミキサーチャートとしても機能します。 #FF0000 と #0000FF を入力し、グラデーションステップを 3 に設定して Mix Colors を押します。ストリップには #FF0000、#BF0040、#800080、#4000BF と #0000FF の 5 つのスウォッチが表示され、50% の比率での混合結果は #800080 です。原色のミキサーとして、ペイントではなく、軽く混合します。赤と黄色はオレンジ #FF8000 を与えますが、青と黄色はグレー #808080 を与えます。ペイントボックスが与える緑ではなく、カラーホイールミキサービューはなく、入力した 2 色とその間のステップのみです。

単純な混合は加重平均です: 50 パーセントの比率で各色は均等に寄与し、ツールは2 つの入力の間で赤、緑、青の各チャンネルを直線的に補間します。 0に向かって比率をスライドさせ、最初の色を維持します; 100に向かってスライドさせ、2番目に着地します。これは、CSS が 2 ストップ勾配に使用するのと同じ数学です。そのため、赤から青への勾配の中間点は、このツールが報告する紫色です。

プレーンなブレンドを超えて、ミキサーは、W3C合成とブレンド仕様で定義されている6 つの分離可能なブレンドモード (乗算、スクリーン、オーバーレイ、暗く、明るく、差分) に単純な平均を加えたものを提供します。 PhotoshopやGIMPのような画像エディターがレイヤー間で適用するのと同じ操作です。 multiplyは常に暗く(赤に青を掛けたものが黒)、スクリーンは常に明るく(青の赤がマゼンタ)、差分は2 つの色の間のチャンネルごとの距離を与えます。比率はレイヤーの不透明度のように機能し、ブレンドされた結果が最初の色にどれだけ強く適用されるかを制御します。

すべてがブラウザでクライアント側で実行されます。入力した色はタブから離れることはありません。また、色の計算は単純な算術であるため、ページが読み込まれるとツールはオフラインで動作します。デザイナーはミキサーに手を伸ばして、ブランドのプライマリとニュートラルの中間の色を見つけたり、色合いとアクセントのスケールを構築したり、デザイン ファイルにコミットする前に 2 つのレイヤーがどのように結合するかをプレビューしたりします。開発者はこれを使用して、グラデーション ストップを生成し、ホバー状態を計算し、混合結果を CSS に貼り付けることができる HEX または HSL 値に直接変換します。