カラーミキサー
2 つの HEX 色を指定した比率で RGB または Lab 色空間で混ぜ、できあがった中間色を色見本とコピー可能な HEX 値で表示します。
カラーミキサー — 2 つの色を HEX で貼り付け、比率スライダーで色 B をどれだけ混ぜるかを決め、通常の RGB と知覚的に均一な Lab のどちらで混ぜるかを選ぶと、結果がプレビュー色見本とコピー可能な HEX 値としてすぐに表示されます。待つようなプリセットも押すボタンもなく、入力したりドラッグしたりするたびに混合結果が再計算されます。すべてブラウザ内で完結するため、色がデバイスの外に出ることはありません。
カラーミキサーとは？
カラーミキサーは、2 つの色の間を補間してその中間色を返す無料のオンラインツールです。色 A と色 B を HEX で入力し（#rrggbb でも #rgb の短縮形でも可）、比率コントロールを 0%（完全に色 A）から 100%（完全に色 B）まで動かし、色空間を選びます。RGB は生のチャンネルをそのまま混ぜ、Lab は知覚空間で混ぜるため中間点が自然に見えやすく、くすんだグレーになりにくくなります。デザイナー、フロントエンド開発者、イラストレーターは、2 つのブランドカラーの中間トーンを探す、滑らかな 2 色グラデーションを作る、ホバーや枠線用の淡い色を導く、2 つの絵の具やグラデーションの停止点が中間でどう出会うかをプレビューする、といった用途に使います。結果は大きな色見本として表示され、その下にワンクリックでコピーできる読み取り専用の HEX フィールドがあります。
カラーミキサーの使い方
- 最初の色を「カラー A (HEX)」フィールドに、2 番目の色を「カラー B (HEX)」フィールドに、#rrggbb または #rgb 形式で入力または貼り付けます。
- 「比率」スライダーをドラッグ（または数値を入力）して、色 B をどれだけ混ぜるかを設定します。0% で色 A、100% で色 B、50% でちょうど中間になります。
- RGB / Lab の切り替えで混合空間を選びます。知覚的により均一に混ぜたいなら Lab、チャンネルごとに素直に平均したいなら RGB を選びます。
- プレビュー色見本がリアルタイムで更新されるのを見ながら、その下に表示される混合色の HEX 値を読み取ります。
- 結果の横のコピーボタンをクリックして、混合した HEX をクリップボードにコピーします。
使用例
赤と青の RGB 中間点
入力
A #ff0000, B #0000ff, 比率 50%, RGB
出力
#800080
ほぼ白寄り
入力
A #4f86f7, B #ffffff, 比率 75%, RGB
出力
#d3e1fd
彩度の高い 2 色での Lab と RGB の比較
#00a000 と #d000d0 を 50% で混ぜます。RGB ではくすんだ混色になりますが、Lab に切り替えると、2 つの色相の間として目が期待する中間点に近づきます——中間でくすんでほしくない 2 色グラデーションに便利です。
よくある質問
- RGB と Lab の違いは何ですか？
- RGB は赤・緑・青のチャンネルを個別に混ぜます。高速で CSS の色の平均化と完全に一致しますが、離れた色相ではくすんだグレーに寄ることがあります。Lab は両方の色を知覚空間 CIELAB に変換してそこで補間し、戻します。通常は中間点がより明るく、目が期待する色に近くなります。どちらも #rrggbb の結果を出力します。
- 比率コントロールは何を意味しますか？
- 比率は混合の中で色 B が占める割合です。0% では結果は色 A と同じ、100% では色 B と同じ、50% では両者のちょうど中間になります。スライダーをドラッグするか、正確なパーセントを入力できます。
- どのカラー形式を入力できますか？
- どちらの入力欄も #rrggbb（6 桁）または #rgb（3 桁の短縮形）の HEX を受け付けます。いずれかの値が有効な HEX カラーでない場合はエラーメッセージが表示され、両方が有効になるまで混合結果は表示されません。出力は常に #rrggbb 形式の HEX 値です。
- 混合した色をワークスペースのチェーンで使えますか？
- はい。結果は出力ポートとして公開されるので、deftdeck のワークスペースでは混合した HEX を別のツールに直接つなげられ、色・比率・色空間を変えるたびに自動的に更新されます。
- 私の色はどこかに送信されますか？
- いいえ。すべての混合計算はブラウザ内でローカルに実行されるため、色の値がサーバーにアップロードされることはありません。オフラインでも動作し、パレットのプライバシーが保たれます。