カラーミキサー
2色を混ぜてグラデーション全体を確認。ミックス比率を調整して理想の色を見つけましょう。
カラー 1
カラー 2
ミックス比率 — 50% カラー1 : 50% カラー2
ミックスカラー
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
グラデーションスケール（クリックでコピー）
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4
このツールについて
カラーミキサーは2つの16進数カラーをRGB空間でブレンドし、0〜100%の任意の比率でスムーズなミックスを生成します。グラデーションスケールは7つの均等なステップを表示します。
RGBブレンドはブラウザが色を合成するときと同じ操作で、数学的に正確で予測可能です。50%のミックスカラーはRGB空間での両色の真の中間点です。
使い方
- カラーピッカーを使うか16進数コードを直接入力して2つの色を選択します。
- プリセットボタンでクラシックな色の組み合わせを試してみてください。
- 比率スライダーをドラッグしてミックスを調整します。0%はカラー1、100%はカラー2です。
- グラデーションスウォッチをクリックするか、HEXコピーボタンで色をコピーします。
活用事例
UIデザイナーはブランドカラーと白や黒をブレンドしてホバー・アクティブ・無効状態の色を作ります。モーションデザイナーはキーフレームアニメーション用の中間色を選択します。フロントエンド開発者はグラフィックエディタなしでグラデーションの中間点を生成します。
よくある質問
- CSSグラデーションと同じですか？ — はい。CSS linear-gradientもデフォルトでsRGBでブレンドします。ここに表示されるステップはCSSグラデーションが通過する中間点と完全に一致します。
- 赤と青を混ぜても紫にならないのはなぜ？ — RGBでは赤(#ff0000)と青(#0000ff)を50%ミックスすると#7f007f（暗いマゼンタ）になります。鮮やかな紫は#8000ffのような青紫との混合が必要です。
- グラデーションのステップを増やせますか？ — スケールは常に7ステップを表示します。比率スライダーで特定の中間点を確認できます。
- アルファ/透明度はサポートしていますか？ — いいえ、このツールは不透明な16進数カラーのみ対応しています。