色の混合
Free調整可能なバランスで2色をブレンドし、シンプルなRGB、ガンマ補正、またはHSLブレンドを使用します。
ブレンドグラデーション(0%〜100%)
最近のアクティビティ
全員に公開されています。すべての訪問者による直近20回の使用履歴を新しい順に表示します。
#FF0000 + #0000FF → #800080
16時間前
このツールの機能
2色を混ぜ合わせて結果の色を表示し、両者の比率を調整可能で、シンプルなRGB平均、ガンマ補正(線形光)ブレンド、または色相と彩度によるHSLブレンドの3つの混合方法から選べます。
仕組み
各色はまず16進数から赤・緑・青の値(0〜255)に変換されます。シンプルRGBモードは各チャンネルを直接線形補間します:結果 = 色1 + (色2 - 色1) × バランス。ガンマ補正モードは、まず画面が表示するsRGB値を標準のsRGB伝達関数を使って線形光に変換し、その線形空間で補間してから戻します。これは光が物理的に合成される仕組みに一致し、人為的に暗い中間点を避けられます。HSLモードは両方の色を色相/彩度/明度に変換し、色相をカラーホイール上で最短の角度経路で補間します(例えば350°付近の色相と10°付近の色相をブレンドする場合、180°を通る長い道のりではなく0°を通るよう正しくラップします)。彩度と明度は通常どおり補間し、結果をRGBに戻します。
解決できる問題
- 16進数の値を手動で推測することなく、グラデーション、テーマパレット、デザインシステムのための中間色を見つける。
- 色をブレンドする「正しい」方法は何を作るかによって異なるため、同じ2色を異なる方法で混ぜたときの見た目を比較する。
- 停止点を選ぶ前に、2つのブランドカラーやUIカラー間のグラデーション全体を一目でプレビューする。
よくある質問
›どのブレンドモードを使うべきですか?
シンプルRGBは、すばやく予測可能な混合に適しており、ほとんどの基本的なツールが行う方法と一致します。ガンマ補正は、特に暗い色と明るい色の間で、物理的に自然に見えるブレンドが欲しい場合により良い選択です。シンプルなRGB平均が生み出す濁った暗すぎる見た目を回避できるためです。HSLは、赤と緑が鈍い茶色ではなく黄色寄りになるような、顔料や絵の具の混合に近い結果を求める場合に試す価値があります。
›なぜ黒と白を混ぜると「シンプルRGB」の方が「ガンマ補正」よりも暗いグレーになるのですか?
シンプルRGBは生の0〜255の数値を直接平均するため、黒と白の50%はちょうど127.5、中間のグレーになります。ガンマ補正はまず両方の色を線形光に変換し(画面が期待するsRGBガンマカーブを打ち消す)、そこで平均を取り、その後戻すため、目に見えて明るい結果(約188)になります。これは、保存された色の値における等しいステップが、知覚される明るさにおける等しいステップに対応しないためです。
›「バランス」スライダーは何をしますか?
これは2色間の重み付けを設定します。0%は第1色が100%、100%は第2色が100%、50%は均等な混合です。動かすことで、中間点だけでなくブレンド全体の任意の地点をプレビューできます。
›なぜHSLブレンドは時に驚くような色を生み出すのですか?例えば、赤と青は紫を通って混ざるのに、赤と緑は黄色を通って混ざるのはなぜですか?
HSLブレンドは、赤・緑・青の値を直接平均するのではなく、360度のカラーホイール上で2つの色相間の最短経路を使って色相角を補間します。赤(0°)と緑(120°)はそのホイール上で比較的近く、途中で黄色(60°)を通過するため、シンプルなRGB平均のように単調な茶色になるのではなく、ブレンドが黄色寄りになるのです。
›このツールは透明度やアルファ値をサポートしていますか?
いいえ、これは完全に不透明な2色を混ぜ合わせます。半透明の色を別の色の上に重ねる必要がある場合(アルファ合成)、それは2つの単色をブレンドするのとは異なる操作であり、専用のツールが必要になります。
関連ツール
画像
RGBチャンネル画像
ブラウザ内で写真をグレースケールまたはカラー形式で赤、緑、青のチャンネルに分割し、再結合してZIPとしてダウンロードします。
Free画像
SVGコンバーター・ビューアー
SVGをPNG、JPEG、WEBP、BMP、ICO、またはAVIFに変換したり、PNG/JPEG/WEBP/BMP/GIF/ICOを有効なSVGにラップしたりでき、方向を自動検出してブラウザ内で直接行います。
Free画像
ポスターメーカー
任意の画像を、テープで貼り合わせて大きなポスターにできる印刷可能なA4/レター/A3ページに分割します。位置合わせしやすい調整可能な重なりつきで、すべてブラウザ内で完結。
Free画像
画像に線を追加
ドラッグまたは正確な座標で、アップロードした画像に1本以上の線を描き、フル解像度で結果をダウンロードします。
コメント (0)
このツールは役に立ちましたか?コメントを残したり、コツを共有したり、改善方法を教えてください。
まだコメントはありません。最初にご意見をお寄せください!