CodeKitHubこのツールとは？
カラーミキサーは、2色の赤・緑・青の各チャンネルを選択した比率で線形補間します。これはグラデーションが内部で使うのと同じ計算です。0%では結果は色A、100%では色B、50%では各RGBチャンネルの算術的な中間値になります。
これは実際の絵の具を混ぜる場合（減法混色で顔料に依存する）とは異なり、HSL空間で平均を取るのとも同じではありません——RGB線形補間は、CSSのグラデーション、デザインツール、そしてほとんどの「2色の間の色」を求めるツールが使う方式であり、この結果はブラウザで同じ2色のグラデーションを表示したときに見える色と一致します。
なぜこれを使うのか？
- ベースカラーとアクセントカラーの間に自然に収まるホバーやアクティブ状態の色を、当てずっぽうで調整するのではなく見つけられます。
- グラデーションのスクリーンショットを目視で判断するのではなく、任意の比率での正確なHEXコードを確認できます。
- 11段階のランプがワンクリックで1色からもう1色への完全なパレットを生成し、データビジュアライゼーションや多段グラデーションに便利です。
- 任意のステップをクリックするだけでHEXコードを即座にコピーできます。
- 無料・即時・完全ローカル動作——アップロード不要、アカウント不要。
使い方
- カラーピッカーを使うかHEXコードを入力して、色Aと色Bを選びます。
- 比率スライダーをドラッグして、色Bをどれだけ混ぜるかを設定します。
- スウォッチの上に表示される結果のHEXとRGB値を確認します。
- 下の11段階ランプの任意のスウォッチをクリックしてHEXコードをコピーします。
例
入力
色A #3B82F6（青）、色B #F59E0B（アンバー）、比率50%出力
#9B9E7D — rgb(155, 158, 125)ちょうど50%のとき、各RGBチャンネルは2つの入力色の対応するチャンネルの算術平均になります。
よくある質問
なぜこれは実際の絵の具を混ぜた結果と一致しないのですか？
絵の具の混色は減法混色（顔料が光を吸収する）であり、関係する具体的な顔料に依存します——例えば青と黄色の絵の具を混ぜると緑になります。このツールは光（RGBチャンネル）を加法的・線形的に混ぜており、これは画面やCSSグラデーション、ほとんどのデジタルデザインツールが色を混ぜる方法と同じです。2つの方式は仕様として本質的に異なる結果を生みます。バグではありません。
これは2色間のCSS linear-gradientと同じですか？
はい——CSSのlinear-gradient(色A, 色B)はこのツールと同じ方法でRGBチャンネルを補間するため、そのグラデーションの中間点で見える色は、ここでの50%の結果と一致します。
混ぜた色がくすんで見えたり灰色っぽく見えたりするのはなぜですか？
彩度が高いが色相が大きく異なる2色（青とオレンジのような、ほぼ補色の関係）をRGB空間で混ぜると、低彩度でグレーがかった茶色っぽい中間色になることがよくあります——これはRGB補間の実際の性質であり、バグではありません。より鮮やかな混色を得たい場合は、カラーホイール上で近い色同士を混ぜるか、色相を調整しつつ彩度を高く保ったままHSL空間で混ぜてみてください（この単純なRGBミキサーはそれを行いません）。
一度に3色以上を混ぜることはできますか？
1回の操作ではできません——このツールは正確に2色を混ぜます。3色を組み合わせるには、最初の2色を希望の比率で混ぜ、結果をコピーして、3色目に対する新しい色Aとして貼り付けてください。段階的に行うことで、単純な3色平均では得られない重み付けの調整も可能になります。
このツールとカラー明度バリエーション生成ツール、どちらを使うべきですか？
2つの異なる色の間に位置する色が必要な場合——例えばブランドの青とアクセントのアンバーの間の遷移色——このミキサーを使ってください。1つの色の明るいバリエーションと暗いバリエーションが必要な場合（ホバー状態、背景色、Tailwind風の50-900ランプなど）は、代わりにカラー明度バリエーション生成ツールを使ってください。色相と彩度を固定して明度だけを変化させるため、結果は常に同じ色系統にはっきりと収まります。
入力フィールドにはどの色形式を入力できますか？
テキストフィールドは6桁のHEXコードを受け付けます。先頭の#があってもなくても構いません（例：3B82F6 または #3B82F6）。3桁の省略形HEX、rgb()表記、CSSカラー名はここでは解析されません——ただし各フィールドの横にあるネイティブのカラーピッカーで視覚的に任意の色を選ぶことができ、HEXフィールドはそれに合わせて自動更新されます。