カラーツール

Mixer カラーミキサー

2 色を混ぜ、比率を調整して新しい色を即座に作成します。 複数の色形式に対応し、ワンクリックでコピー・エクスポートできます。

色 A
HEX
RGB
HSL
色 B
HEX
RGB
HSL
混合比
50%
色 A 色 B
送金
即時プレビュー
色 A
#2563eb
混合色
#804289
色 B
#dc2626
混在するカラー値
HEX をコピー RGB をコピー HSL をコピー CSS をコピー
HEX
#804289
RGB
128, 66, 137
HSL
293, 35%, 40%
CSS
rgb(128,66,137)
CSS 出力
/* Mixed color CSS */ .color-mixed { background: rgb(128, 66, 137); }
広告
Google AdSense 広告ブロック

Color Mixer とは何ですか?

カラーミキサー 2 色を混ぜ、混合比率を調整して新しい色を即座に生成できる無料オンラインツールです。グラフィックデザイナー、Web フロントエンド開発者、デジタルクリエイターなど、誰でも理想の配色を簡単に探せます。

Color Mixer の使い方は?

使い方は直感的で、左側へそれぞれ設定するだけです。 色 A 付き 色 B color(HEX、RGB、HSL を直接入力するか color picker で選択)を指定し、その後ドラッグして混合比スライダー 2 色の混合比率を調整します。右側には混合結果のカラーブロックと詳しい色値が即座に表示されます。

混色原理

このツールは色混合に RGB の線形補間を使用します。混合後の R、G、B 各チャンネルは、設定した比率に従って個別に計算されます。Value = (1 - ratio) × ColorA + ratio × ColorB. 0% では Color A、100% では Color B となり、中間比率では滑らかな色の遷移が生成されます。

利用シナリオ

Color Mixer と Color Palette Generator の違い

Color Mixer が重視するのは2 色の正確な混合、比率を調整して中間色を生成します。一方、Color Palette Generator は 1 つのメインカラーから完全なカラーチップ一式を生成します。両者は相互補完的で、デザイン工程の異なる段階における配色ニーズへ対応します。

よくある質問(FAQ)

the range of mixing ratios とは何ですか?
mix ratio は 0%~100% です。0% は Color A のみ、100% は Color B のみ、50% は半々を表します。slider で任意の割合へ細かく調整できます。
合成結果はどのように計算されますか?
RGB の線形補間で計算します。ブレンド後の R、G、B 各値は比率に応じて Color A と Color B の間を直線的に変化します。最も直感的で広く使われている色の混合方法です。
どの色形式に対応していますか?
Color A と Color B は HEX、RGB、HSL の各形式で入力でき、すべての値がリアルタイムで同期します。混色結果も HEX、RGB、HSL、CSS background 形式で出力され、そのままコピーして利用できます。
混在した結果をエクスポートできますか?
はい。左側のエクスポート機能から 3 色パレットを PNG または SVG 画像としてダウンロードでき、CSS Variables ファイルとしても出力できます。各色の値はワンクリックでクリップボードへコピーできます。
このツールはデータを保存しますか?
いいえ。色の混合計算はすべてブラウザ内で実行され、操作データがサーバーへ送信されることはありません。すべての機能を完全なオフライン環境でも利用できます。
color を入れ替えると割合も入れ替わりますか?
入れ替えると Color A と Color B の位置は逆になりますが、混合比率自体は変わりません。たとえば元の色が Color B を 30% 含む場合、入れ替え後はその 30% が元の Color A になるため、ブレンド結果もそれに応じて変化します。

ブラウザー互換性

このツールは標準 Web API を使用し、すべての主要な現代ブラウザに対応します。

🌐
Chrome
最新バージョン
🦊
Firefox
最新バージョン
🍏
Safari
最新バージョン
🔷
Edge
最新バージョン

プライバシーステートメント

このツールはすべてブラウザー内で実行されます。入力した色はサーバーへ送信されません。このツールでは Cookie やトラッキングも使用しません。