私はデザインファイルとスタイルシートの間のどこかで、ホバー状態、境界線、またはグラデーションストップが正しく見えるまで、ある色を別の色に小突いて、驚くべき量の1 日を過ごします。 何年もの間、私は頭の中で算術を行ったり、ピッカーでそれを目に入れましたが、ブランドブルーとウォームニュートラルの中間の正確な色が必要になり、貼り付けることができる16 進コードとして必要になるまで問題ありませんので、私は構築しました カラーミキサー で Toolz.dev これは、2 つの色を制御する比率でブレンドし、画像エディターが使用するのと同じブレンド モードを提供し、結果を HEX、RGB、および HSL に渡します。これは、そのガイドと、" mixing colors" の意味です。画面上で。
tl;dr: カラーミキサーは2 色を1 つにブレンドします。 The Toolz カラーミキサー 2 色を調節可能な比率で補間し、W3C分離可能なブレンドモード(マルチプライ、スクリーン、オーバーレイ、ダークン、ライトニング、ディファレンス、アベレージ)をサポートし、色間の中間ステップのグラデーションを構築し、すべての結果をHEX、RGB、およびHSLのhex、rgb()、hsl()、およびCSSカラー名を受け入れ、完全にクライアント側で実行されます。
画面上で2 色を混ぜる方法は?
平易な答えは2 つのcolors' 赤く、緑および青いチャネルの加重平均です。 redを混合するために (255, 0, 0) と 青 (0, 0, 255) 等分すると、各チャンネルを平均します。赤になります (255+0)/2 = 128、 グリーン 滞在 0、 青 なる (0+255)/2 = 128、 与え (128, 0, 128)、これはヘックスです #800080、固体紫色. 1 つの側面に重量を移動し、2 つの色の間のラインに沿ってスライドします。それはまさに比率スライダーがすることです。0 パーセントで最初の色を維持し、100 パーセントで 2 番目の色に着地し、50 パーセントが均等に分割されます。
これは、2 ストップ CSS グラデーションが使用するのと同じ補間であり、これが中間点である理由です linear-gradient(red, blue) はその紫色です。 mixer は、あなたの2 つの色の間の勾配を、それぞれの中間停止としてコピーできる見本抽出物のストリップとしても描くことによって関係を明示します。 " これら 2 つの間に等間隔に配置された 3 つの色、" グラデーション ストリップがそれらを得る最も速い方法です。
一つ正直な注意点、それは人々を驚かせるので: 平均RGBチャンネルは顔料が混合する方法ではありません 画面上では、色は軽く、添加的に結合します; ペイントセットでは、それらは顔料であり、減算的に結合します 赤と緑の光の混合は、あなたが顔料をブレンドしていない光の値を平均しているので、ペイントから得られるであろう鮮やかな黄色ではなく鈍いオリーブに向かって傾向がある これはツールのバグではなく、sRGBの性質であり、より活気のある結果が必要なときの修正は、ホイールの上に一緒に近くに座っている色合いを混合することです カラーコンバーター 色相について推論しながら、フォーマット全体で同じ色が表現されているのを確認したい場合に、ミキサーと並んで便利です。
Mix モードとブレンド モードの違いは何ですか?
Mix は上記の加重平均です: 常に 2 つの色の間の直線のどこかに着地します。 blend モードは完全に別のものです。これらは、Web 用に標準化された、画像エディターからのレイヤー ブレンド操作です W3C合成とブレンドのレベル1 仕様。それぞれがチャネルを単純な平均ではなく異なる式で組み合わせます。
| モード | チャンネルごとの式 (値 0 ～ 1) | 効果 |
|---|---|---|
| ミックス | b (比率で重み付け) を表します |
加重平均、2 つの色の間に収まります |
| 乗算 | a x b |
常に暗いです; 白は色を変化させず、黒は黒を強制します |
| スクリーン | a + b - a x b |
常に軽いです;乗算の逆数 |
| オーバーレイ | 乗算またはスクリーニングを基本で行います | コントラストを高めます |
| 暗くする | min(a, b) |
より暗いチャンネルを保ちます |
| 明るくする | max(a, b) |
より軽いチャネルを維持します |
| 違い | abs(a - b) |
チャネル距離; 同一の色は黒を与えます |
| 平均 | (a + b) / 2 |
両方の加重なし平均 |
運ぶ価値のある直感: multiply は常に暗くなります。これは、2 つの分数を掛けると分数が小さくなるため、赤と青は黒になります (各色には他の色のチャンネルが欠落しています)。反転した値に掛け算されるため、画面は常に明るくなります。違いによりチャンネルごとの距離が得られるため、違いの下で色を混合すると純粋な黒が生成されます。ミキサーでは、比率スライダーはレイヤーの不透明度のように動作します。ブレンドされた結果は最初の色を超えて色褪せるため、微妙な効果から完全な効果までダイヤルできます。
比率スライダーは、何を制御しますか?
比率は、最初の色に対して 2 番目の色、または選択したモードのブレンド結果がどの程度強く適用されるかを設定します。最上層の不透明度と考えてください。0 パーセントでは、最上層は見えず、最初の色はそのまま表示されます。100 パーセントでは、最上層は完全に不透明で、そのモードの完全なブレンドが得られます。50 パーセントでは、均等に分割されます。プレーン ミックスの場合、これはおなじみの加重平均に減少します。Multiply のようなモードでは、完全な効果ではなく、穏やかな暗さを適用できます。
その統一モデルは意図的です、なぜならそれは1 つのスライダーがすべてのモードで同じ概念的な仕事をすることを意味するからです 実際には、私は低い比率を使用して、色を別の色にわずかにナッジします (" ボタンであるホバー状態ですが、15 パーセントはblack" に向かっています) 、そしてフルブレンドしたいときは高い比率を使用します グラディエントジェネレータ 混合された色のペアを完全なマルチストップ CSS グラデーションにしたいときに、ミキサーがオフになる場所を選択します。
2 色の中間の正確な色を取得するにはどうすればよいですか?
モードを Mix に設定し、比率を 50 に設定すると、結果が正確な中間点になります。グラデーション ストリップからまっすぐに読むこともできます。中央のスウォッチが中間色です。2 つのエンドポイントの間に等間隔の色をいくつか必要とする場合は、グラデーションのステップ数を上げて、必要な位置でスウォッチをコピーします。これは、パレットの色合いを生成する場合でも、データ視覚化の色を間隔をあける場合でも、2 つのブランド色の間に位置するニュートラルを見つける場合でも、ミキサーが構築された日常的なタスクです。
2 つの色をブレンドするのではなく、1 つの色のファミリー全体を構築するには、 カラーシェードジェネレータ 白、黒、グレーに向かって 1 つの色を混ぜて色合い、色合い、色調を生成するため、フィット感が優れています。テキストまたは UI の色を選択するときは、結果を実行します カラーピッカー そして、コントラストチェックは、美しく混ざり合った色が読みやすさのしきい値に失敗する可能性があるためです。ピッキングからチェック、出荷までのより広範なワークフローは、にレイアウトされています Web 開発者ツールキット ガイド.
なぜ私の混合された色は時々泥だらけまたは暗く見えるのですか?
2 つのことが原因で、どちらもツールではなく色空間に関するものです 1 つ目はすでに述べた加法-対減算の不一致です: RGBの遠い色相を平均すると灰色に向かってドリフトするため、ホイール上の反対の色が鈍いものに混ざります 2 つ目は、sRGB値が線形光ではなくガンマエンコードされていることです 光の真の物理平均は、まず線形空間に変換され、平均され、その後、より明るく保たれます ほとんどのツール、CSS勾配、および画像エディタは、ガンマエンコードされたsRGBで直接補間します なぜなら、それは高速で予測可能であり、設計者が勾配から期待するものと一致するので、このミキサーは、より明るいブレンドが必要な場合は、より近い色相を混合するか、スクリーンモードに寄りかかるか、または最終的なCSSのOKLCHのような知覚的に均一な空間に手を伸ばすことです データプライバシー オンラインツール ガイドは、中点が濁っているかどうかにかかわらず、サーバー上ではなくブラウザでこの計算を行うことが、ローカルに保ちたい設計作業の正しいデフォルトである理由を説明しています。
よくある質問
2 色を混ぜる方法は?
2 つの色を混合するには、赤、緑、青のチャンネルを平均し、各色の量で重み付けします。赤 (255、0、0) と青 (0、0、255) の 50/50 の混合は、平均して (128、0、128) になります。このツールは補間を行い、比率スライダーで重みをシフトできるため、正確な中間点だけでなく、2 つの色の間のどこにでも着地できます。
MixとMultiplyの違いは何ですか?
Mix は 2 つの色の間に収まる加重平均であるため、赤と青を混合すると紫になります。 multiply は、オーバーラップするインクやライト フィルターと同じようにそれらを組み合わせてチャネル値を乗算するため、常に両方の入力と同じくらい暗い色または暗い色を生成します。 red と blue を乗算すると黒になります。各色には他の色が持つチャネルが欠けているためです。 multiply は画像編集からのブレンド モードであり、単純な平均ではありません。
2 つの明るい色を混ぜると、泥だらけの結果が得られることがあるのはなぜですか?
RGB チャンネルを平均すると、カラー ホイールで 2 つの色が遠く離れた位置にあるときは常に結果が灰色に移動するためです。赤と緑は平均して、鮮やかな黄色ではなく鈍いオリーブブラウンになります。画面の色は光として混ざり、予想される鮮やかな黄色は顔料の混合から得られるため。より活発なブレンドの場合は、色相がより近い色を混合するか、結果を明るく保つスクリーン モードを試してください。
RGBではなくHSLで色を混ぜることはできますか?
このミキサーは、CSS グラデーションと画像エディターがデフォルトで行う RGB で補間し、その結果も HSL で報告します。 RGB での混合は予測可能であり、2 ストップの CSS グラデーションのレンダリング方法と一致します。 HSL での補間色相はカラー ホイールの周りを長距離移動し、予期しない中間色相を生成する可能性があるため、汎用ブレンドでは RGB 補間がより安全なデフォルトとなります。
レシオスライダーは何が変わりますか?
比率は、2 番目の色、つまりブレンドされた結果が最初の色にどれだけ強く適用されるかを設定します。 0 パーセントでは最初の色が変更されず、100 パーセントでは選択したモードの完全な 2 番目の色または完全なブレンドが得られ、50 パーセントでは均等に分割されます。ブレンド モードでは、画像エディターのレイヤーの不透明度のように動作し、ブレンドされた色がベース上でフェードインします。
2 色の中間の色を得るには?
モードを Mix に設定し、比率を 50 パーセントに設定すると、結果が正確な中間点になります。中間スウォッチが中間色であるグラデーション ストリップから読み取ることもできます。より細かい制御を行うには、グラデーションにさらにステップを追加し、2 つの色の間で必要な位置に一致する中間スウォッチをコピーします。
Screen や Overlay などのブレンド モードは何に使用されますか?
これらは、画像エディターのレイヤー ブレンド モードであり、W3C コンポジティングおよびブレンディング仕様で Web 用に定義されています。 「スクリーン」は明るくなり、輝きやハイライトに使用され、「倍増」は暗くなり、影や色合いに使用され、「オーバーレイ」は 2 つを組み合わせることでコントラストが高まります。ミキサーでプレビューすると、CSS またはデザイン ツールに適用する前に、2 つの色のレイヤーがどのように組み合わされるかを予測できます。
ミキサーはどのような色のフォーマットを受け入れますか?
ミキサーは、16 進コード (3 桁、6 桁、または 8 桁)、rgb()および rgba()値、hsl()および hsla()値、およびコーラルやリベッカパープルなどの一般的な CSS カラー名を受け入れます。各入力には、クリックして視覚的に選択できるネイティブ カラー スウォッチがあり、すべての結果が HEX、RGB、および HSL で表示されるため、スタイルシートに必要な形式をコピーできます。
カラーミキサーは無料でプライベートですか?
はい。カラー ミキサーは完全に無料で、サインアップも透かしも使用制限もなく、すべての計算はブラウザで行われます。入力した色はアップロードされないため、混合するものは何もデバイスから離れないため、数学はローカルで実行されるため、ページの読み込み後に接続を失った場合でもツールは動作し続けます。
