カラーミキサー

計量カップで色を視覚的に混ぜ、色を選んで量を調整し、RGB・HSL・HEX の混色結果を確認できます。

調色エリア

カップ 1

5

カップ 2

5

混色結果

入力比率

50%

RGB 内訳

赤: 142 (35.9%)

緑: 114 (28.8%)

青: 140 (35.4%)

混合色

色の詳細

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

カラーミキサー – 仕組みとカラーサイエンス

色の混合はなぜ成り立つのか

色の混合には、大きく分けて2つの方式があります。

加法混色は、ディスプレイや光を使うシステムで用いられます。有色の光が重なると、光が足し合わされて明るくなります。赤 + 緑 = 黄、赤 + 青 = マゼンタ、緑 + 青 = シアン。三色すべてを最大輝度で重ねると、白になります。

減法混色は、絵の具・印刷インク・顔料など、物質の色に使われます。材料が特定の波長を吸収し、残りを反射することで色が生まれます。減法混色の三原色はシアン（Cyan）・マゼンタ（Magenta）・イエロー（Yellow）の CMY です。大量に混ぜると黒に近づいていきます。

このツールは加法 RGB モデルを採用しており、デジタルディスプレイと Web デザインの標準として広く使われています。

RGB カラーモデル

RGB は、次の3つのチャンネルで色を定義します。

赤（R）：0〜255
緑（G）：0〜255
青（B）：0〜255

ディスプレイの各ピクセルには赤・緑・青の3つのサブピクセルが含まれています。各チャンネルの輝度を変えることで、1677 万色以上（ $256^3 = 16{,}777{,}216$ ）の色を表現できます。

主なカラーフォーマット

フォーマット	例	説明
HEX	#FF6B35	CSS でよく使われる 6 桁の16進数形式
RGB	rgb(255, 107, 53)	赤・緑・青を10進数で表した形式
HSL	hsl(16, 100%, 60%)	色相・彩度・明度で表した形式。直感的に調整しやすい

混色結果の計算方法

ミキサーは各 RGB チャンネルの加重平均を取ることで混色結果を算出します。 $N$ 種類の入力色があり、それぞれの量が $a_1, a_2, \ldots, a_N$ 、RGB 値が $(r_i, g_i, b_i)$ の場合、結果は次のようになります。

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

要するに、量（レベル）が多い色ほど、最終的な混色に与える影響が大きくなります。

例：赤（#FF0000）を3、青（#0000FF）を1の割合で混ぜる場合：

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

混色後の色はおよそ #BF0040 — 深みのある赤紫色になります。

活用シーン

Web デザイン・UI

配色パレットの構築、透明オーバーレイのテスト、ベースカラーからアクセントカラーの作成などに活用できます。

学習・教育

光・人間の色覚・カラーサイエンスが互いにどう関係しているかを、視覚的かつ直感的に学ぶことができます。

デジタルアート

イラスト制作・グラフィックデザイン・画像編集において、画面上で色を重ねた結果を事前に確認するのに役立ちます。

混色をうまく活用するコツ

三原色から始める — 赤・緑・青は RGB 混色の基本です。
レベルを調整する — レベルが高いほど、その色が最終的な混色に強く影響します。
出力フォーマットを使い分ける — CSS・デザインツール・コードに応じて、HEX・RGB・HSL を使い分けましょう。
RGB 均等 = グレー — 赤・緑・青のすべてが同じ値になると、無彩色（グレー）になります。

よくある質問

加法混色と減法混色の違いは何ですか？加法混色は光を使い、色を重ねるほど明るくなり、最終的に白になります。減法混色は顔料を使い、色を重ねるほど暗くなり、最終的に黒に近づきます。

絵の具を混ぜたときと色が違うのはなぜですか？このツールは絵の具や顔料ではなく、光の RGB モデルで混色しているためです。ディスプレイ上では赤 + 青 = マゼンタになりますが、絵の具では光の吸収・反射の仕組みが異なるため、見た目の色も違います。

結果のカラーコードは CSS でそのまま使えますか？はい。出力される HEX・RGB・HSL の値は、CSS や主要なデザインツールでそのままご利用いただけます。

各グラスの「レベル」は何を表していますか？その色が混色全体に占める相対的な量を示しています。レベル 8 の色は、レベル 4 の同じ色と比べて、混色への影響が2倍になります。