カラーミキサー
全カラーツール
無料
2色または3色を絵の具や光のように好きな割合で混ぜて結果の色を確認、2色を最大10段階でブレンド。HEX・RGB・HSL・CMYKをコピー。
色 1
配合量
50%
色 2
配合量
50%
色 3
配合量
50%
混色モデル
レシピ
混ぜた色
2 色または 3 色を選び、それぞれの配合量を設定してください。混ぜた色はブラウザー上ですぐに計算されます。結果や各値をクリックするとコピーできます。
開始色
終了色
ステップ数
生成する中間シェードの数（1〜10）。
ブレンドモード
グラデーション
ミックスパレット
2 色とステップ数を選ぶと、その間のすべてのシェードがブラウザで即座に計算されます。
カラーミキサーについて
カラーミキサーは、2色または3色を混ぜたときにできる色を表示します。色を選び、それぞれの割合を設定すると、混ぜた結果の色がHEX、RGB、HSL、CMYKの値とともにすぐに表示され、各色の配分を示すレシピバーも確認できます。
3つの混色モデルは、それぞれ違う疑問に答えます。「絵の具」は実際の顔料のように混ぜるので、青と黄色は緑になり、黒は少し足すだけでよく効きます。「光」は画面や色つきの光が混ざる仕組みで色を平均するので、赤と緑は黄色になります。「知覚」はCSSのcolor-mix()が使うOKLab空間で平均し、UIやデザインの作業で滑らかで均一な結果が得られます。
もうひとつのビュー「ブレンドステップ」では、開始色から終了色へ最大10段階の中間色でグラデーションをつくります。RGBまたはHSLを選べ、グラデーションのプレビューと、そのまま貼り付けられるCSSグラデーションも用意されています。すべてブラウザ内で処理され、サーバーは使いません。
カラーミキサーの使い方
- 「色を混ぜる」ビューを開いて2色を選ぶか、「色を追加」で3色目を加えます。
- 各色の量を設定します。横のパーセンテージが混合に占める割合です。
- 混色モデルを選びます。「絵の具」「光」「知覚」のいずれかです。
- 混ぜた色またはその値をクリックしてコピーするか、「レシピをコピー」で配分を保存します。
- 「ブレンドステップ」に切り替えて、2色の間に最大10色のグラデーションをつくります。
よくある質問
はい。色の混合は無料かつ無制限で、アカウントもクレジットもサーバー処理も不要です。ツールはすべてブラウザ内で動作します。
「絵の具」モデルでは、実際の絵の具と同じく青と黄色は緑になります。「光」モデルでは明るいグレーになります。画面は顔料ではなく光を混ぜるためです。「色を混ぜる」ビューでいろいろな組み合わせを試して、モデルを比べてみてください。
「絵の具」は光を吸収する顔料をシミュレートするので、混ぜるほど暗くなり、青と黄色で緑になります。「光」は、ピクセルや色つきランプが混ざるのと同じく、リニアな光の中で色を平均します。「知覚」はOKLabで平均し、バランスの取れた均一な結果になり、CSSのcolor-mix()とも一致します。
はい。3色目を追加して、各量を1から100の間で設定します。量は相対値なので、2、1、1なら50%、25%、25%の混合になります。レシピバーとパーセンテージで各色の正確な割合を確認できます。
顔料が光を吸収し散乱する仕組みに基づく近いシミュレーションですが、実際の絵の具はブランド、顔料、メディウムによって異なります。色相の予測や配分の試行に使い、最後に少量のサンプルで確かめてください。
「ブレンドステップ」ビューでは、RGBブレンドは赤・緑・青の各チャンネルを直接補間するため、反対の色相を混ぜるとグレーを通ることがあります。HSLブレンドはカラーホイールを回るように進むので、中間ステップの彩度が保たれ、より鮮やかに見えます。
「色を混ぜる」ビューで2色を同じ量で混ぜます。「光」なら物理的な平均、「知覚」なら見た目の中間点が得られます。「ブレンドステップ」ビューでは、1ステップにするとRGBまたはHSLブレンドの中間点になります。
人気の検索
カラーミキサー
オンライン 色を混ぜる
2色を混ぜるとできる色
絵の具 色の混ぜ方
3色を混ぜる
混色 計算
2色 ブレンド
ブレンドステップ カラー
色と色の間 グラデーション
混色ツール
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。