カラーミキサー

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

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

プレーンなブレンドを超えて、ミキサーは W3C Compositing and Blending 仕様で定義されている分離可能なブレンドモードを提供します: multiply、screen、overlay、darken、lighten、difference、average これらは、Photoshop や GIMP のような画像エディターがレイヤー間で適用するのと同じ操作です。 multiply は常に暗くなり (赤に青を掛けたものは黒)、screen は常に明るくなり (青の赤はマゼンタ)、差分は 2 つの色の間のチャンネルごとの距離を与えます。比率はレイヤーの不透明度のように機能し、ブレンドされた結果が最初の色にどれだけ強く適用されるかを制御します。

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