カラーミキサー

混合カラー

#7B6FBD

#7B6FBD⎘ rgb(123, 111, 189)⎘ hsl(248, 35%, 59%)⎘

合計: 100%

ティント（白を混ぜる）

シェード（黒を混ぜる）

#8D7F3B

色相環の反対側の色 — コントラストやアクセントカラーに最適

色を混ぜると履歴が表示されます...

カラーミキサーの使い方

色を選ぶ: 各行の左にあるカラースウォッチをクリックするとブラウザのカラーピッカーが開きます。HEXコードを直接テキストボックスに入力することも可能です。最大5色まで同時に混ぜられます。

比率を調整: スライダーをドラッグするか、数値を入力して各色の配合比率を設定します。下部の比率バーで割合を視覚的に確認できます。合計が100%でなくても自動的に正規化して混合比率を計算します。

色を追加: 「色を追加（最大5色）」ボタンをクリックすると、3〜5色目を追加できます。

値をコピー: 結果パネルのHEX・RGB・HSLバッジをクリックするとクリップボードにコピーされます。

ティント＆シェード: ティント（白を混ぜた明るい色）とシェード（黒を混ぜた暗い色）のバリエーションが自動生成されます。クリックすると色1として使用できます。

補色: 混合結果の色相環で正反対の色（補色）を自動計算します。「色1として使用」ボタンで配色に取り込めます。

カラー履歴: 混合結果が変わるたびに自動で履歴に追加されます。履歴スウォッチをクリックすると色1に再適用できます。

比率が配色を決める: 同じ2色でも、50:50と90:10では全く異なる色が生まれます。比率バーを見ながら微調整することで、ブランドカラーに近い中間色や、アクセントとして使えるわずかに色付いたニュートラルカラーを作ることができます。

3色以上の混合: 2色で大まかなベースを作り、3色目を少量（10〜20%）加えると温度感・彩度感を調整できます。例えばブルーとホワイトの混合にわずかなイエローを加えると、眩しすぎない自然な明るさの青を作れます。

ティントでUIデザインに活かす: デザインシステムでは同じ色相を明度違いで複数使うことが多く、ホバー・フォーカス・無効状態などのUI状態に活用します。ティントジェネレーターから即座にバリエーションを取得して、CSS変数に設定しましょう。

補色でコントラストを確保: 混合色をメインカラーとして使う場合、補色はアクセントボタンや罫線・アイコンカラーとして最適です。補色を使うことで視線を誘導し、情報の優先度を伝えやすくなります。