カラーミキサー

2〜5色をお好みの比率で混合して新しい色を作成するオンラインツール。RGB加算混合、グラデーションプレビュー、中間色生成、配色調和の推薦機能を提供。ワンクリックでHEXやRGBをコピー可能。

最終更新: 2026/01/17

混合する色

混合結果

#000000

rgb(0, 0, 0)

グラデーションプレビュー

中間色

ステップ:

配色調和の推薦

混合履歴

保存された履歴はありません

カラーミキサーとは？

カラーミキサーは、2つ以上の色を任意の比率で混ぜて新しい色を作り出すオンラインツールです。最大5色を同時に混合でき、各色の比率をスライダーで細かく調整できます。RGB加算混合方式を使用し、デジタル環境で正確な色混合結果を提供します。

ウェブデザイン、UI/UX作業、ブランドカラー開発など様々な分野で活用できます。混合された色のHEXコードとRGB値を即座に確認してコピーでき、実務ですぐに使用できます。グラデーションプレビュー、中間色生成、配色調和の推薦機能で、より創造的な色彩作業が可能です。

こんな時に使えます

ブランドカラー開発 – 既存のブランドカラーを基に補助色やアクセントカラーを作成し、統一感のあるカラーパレットを構成できます。
UI/UXデザイン – ボタンのホバー状態、無効状態など、基本色から派生したバリエーションカラーを正確な混合比率で生成します。
ウェブ開発 – CSSグラデーションを作成する前に、中間色がどのように見えるか確認し、調和のとれた配色を見つけることができます。
イラストレーション – 2色間の自然な遷移色が必要な時、中間色生成機能で滑らかなカラースペクトラムを作成します。
インテリアデザイン – ペイントや小物の色をデジタルでシミュレーションし、2色を混ぜた結果を事前に予測できます。
色彩学習 – 色混合の原理を視覚的に理解し、補色、類似色、三原色などの配色調和理論を直接実験できます。

主な機能

複数色混合 – 2色から5色まで同時に混合できます。色の数を自由に調整し、シンプルな2色混合から複雑な多色混合まで全て可能です。
比率調整スライダー – 各色の混合比率を0%から100%までスライダーで精密に調整できます。リアルタイムで結果が反映され、希望する色を簡単に見つけられます。
グラデーションプレビュー – 混合に使用した色が自然にどのように繋がるかグラデーションで確認できます。CSSグラデーション作業時に参考になります。
中間色生成 – 3ステップから9ステップまで選択して、混合色までの中間色を自動生成します。カラーパレットの拡張や滑らかな色遷移に便利です。
配色調和の推薦 – 混合結果の色を基準に、補色、類似色、三原色、分割補色など配色調和理論に基づいた推薦色を提供します。
混合履歴 – 以前に作った混合結果が自動的に保存されます。気に入った色を再度見つけたり比較する時に便利です。
ワンクリックコピー – HEXコードやRGB値をワンクリックでクリップボードにコピーでき、すぐにプロジェクトで活用できます。

使い方

色の数を選択 – 上部のドロップダウンで混合する色の数（2〜5個）を選択します。デフォルトは3色に設定されています。
色を入力 – 各色のカラーピッカーをクリックして色を選択するか、HEX入力欄に直接カラーコードを入力します。「ランダム色」ボタンで無作為な色を生成することもできます。
比率を調整 – 各色の下のスライダーを動かして混合比率を調整します。比率が変更されるとリアルタイムで混合結果が更新されます。
結果を確認 – 混合結果セクションで最終色とHEX/RGBコードを確認します。コピーボタンでコードをクリップボードに保存できます。
追加機能を活用 – グラデーションプレビューで色の流れを確認し、中間色のステップを調整して必要な色を見つけてください。配色調和タブで調和のとれた色の組み合わせも確認できます。

色混合の原理

RGB加算混合とは？

RGB加算混合（Additive Color Mixing）は、光の三原色である赤（Red）、緑（Green）、青（Blue）を足して新しい色を作る方式です。デジタル画面、モニター、TVなど光を発する装置で使用される色混合方式です。

赤 + 緑 = 黄色（Yellow）
緑 + 青 = シアン（Cyan）
青 + 赤 = マゼンタ（Magenta）
赤 + 緑 + 青 = 白（White）

絵の具やインクを混ぜる減算混合（Subtractive Mixing）とは逆に、色を加えるほど明るくなる特性があります。このツールはRGB加算混合方式を使用し、デジタル環境に最適化された正確な色混合結果を提供します。

加重平均計算方式

複数の色を混合する時、各色のRGB値に比率（重み）を適用して平均を計算します。例えば、赤（#FF0000）と青（#0000FF）を50:50の比率で混合すると：

R = (255 × 0.5) + (0 × 0.5) = 127
G = (0 × 0.5) + (0 × 0.5) = 0
B = (0 × 0.5) + (255 × 0.5) = 127
結果: RGB(127, 0, 127) = #7F007F（紫色）

配色調和理論

配色調和（Color Harmony）は、視覚的に調和し均衡の取れた色の組み合わせを作る理論です。色相環（Color Wheel）での位置関係によって様々な調和タイプがあります。

補色（Complementary）

色相環で正反対（180°）に位置する2色です。互いを引き立てる強いコントラスト効果を生み出します。例：赤と青緑、黄と紫。注目を集めたいデザインや強調効果によく使用されます。

類似色（Analogous）

色相環で隣接する（約30°間隔）色です。自然界でよく見られる調和のとれた組み合わせで、柔らかく快適な印象を与えます。例：赤-オレンジ-黄、青-青緑-緑。統一感のあるデザインに適しています。

三原色調和（Triadic）

色相環で正三角形を形成する（120°間隔）3色です。多彩でありながらバランスの取れた配色を作り出します。例：赤-黄-青、オレンジ-緑-紫。生き生きとしながらも安定したデザインに使用されます。

分割補色（Split-Complementary）

基準色とその補色の両隣の色（150°、210°）を使用する組み合わせです。補色調和の強烈さを維持しながらも、より多様な色を使用できます。初心者でも簡単に調和のとれたパレットを作れる方式です。

よくある質問

RGB混合と絵の具混合の結果が違うのはなぜですか？

RGB混合は光を加える加算混合方式であり、絵の具は光を吸収する減算混合方式だからです。加算混合では色を加えるほど明るくなり全ての色を混ぜると白になりますが、減算混合では色を混ぜるほど暗くなり全ての色を混ぜると黒に近くなります。このツールはデジタル環境に合ったRGB加算混合を使用しています。

混合比率はどのように計算されますか？

各色のスライダー値が重みとして使用されます。例えば色Aが60%、色Bが40%の場合、最終RGB値は各チャンネルごとに（A値 × 0.6）+（B値 × 0.4）で計算されます。全ての比率が0%の場合は均等に配分されます。

配色調和の推薦はどのような基準で提供されますか？

混合結果の色をHSL（色相-彩度-明度）色空間に変換した後、色相環での角度関係によって調和のとれた色を計算します。補色は180°反対位置、類似色は±30°隣接位置、三原色は120°間隔、分割補色は150°/210°位置の色を生成します。

混合履歴はどこに保存されますか？

混合履歴はブラウザのローカルストレージ（localStorage）に保存されます。同じブラウザで再度アクセスすると以前の記録が維持されます。ブラウザデータを削除したりシークレットモードを使用すると履歴が初期化されます。

中間色はどのように計算されますか？

最初の入力色から混合結果色まで線形補間（Linear Interpolation）を使用して中間色を生成します。選択したステップ数に応じてRGB各チャンネルの値を均等に分割し、自然な色遷移を作り出します。

モバイルでも使用できますか？

はい、モバイル端末でも完璧に使用できます。レスポンシブデザインで制作されており、スマートフォンやタブレットでもタッチで色選択と比率調整が可能です。別途アプリのインストールなしでウェブブラウザからすぐにご利用ください。