カラーミキサー(絵の具・光・知覚)
2〜10色を好きな割合で混ぜて、HEX・RGB・HSLで表示。sRGB平均、光の加法混色、知覚的なOKLab、絵の具に近い混色を一度に比べられます。
赤と青を混ぜると何色になるでしょう。それは混ぜ方しだいです。このミキサーは2〜10色を好きな割合で混ぜ、結果を4通りで示します。多くのサイトが使う単純なsRGB平均、光の加法混色(重なった照明や高速で回る色円盤の混ざり方)、知覚的なOKLab混色、そして絵の具風の近似的な減法混色です。比較表で4つを同時に見られます。
使い方
- 1行に色(HEX、rgb()、hsl()、CSSの色名)を1つと、
#FF0000 3のような量を入力します。 - 混合方法を選びます。
- 混ぜた色をHEX・RGB・HSL・OKLCHと、最も近いCSS色名で確認します。
- プレビューの下の表で方法ごとの結果を比べます。
計算式
sRGB:c = Σ wᵢcᵢ ÷ Σ wᵢ · 光:線形化したチャンネルを平均して再エンコード · OKLab:L、a、bを平均 · 絵の具:線形チャンネルで c = exp(Σ wᵢ ln cᵢ ÷ Σ wᵢ)
wᵢ は量(部またはパーセント)で、比率だけが意味を持ちます。線形化はsRGBのガンマ曲線を元に戻して光が物理的に足し合わされるようにするものです。絵の具モードは顔料のシミュレーションではなく、3チャンネルによる近似です。
計算例
赤と青を同量混ぜると、sRGB平均では #800080(255 ÷ 2 = 127.5 → 128 = 16進数の80)ですが、光として混ぜると、線形の強さの半分が188に再エンコードされて #BC00BC になります。赤3に白1なら #FF4040 です。
よくある質問
「光」モードだと赤 + 青がなぜ明るく見えるのですか?
画面は色をガンマエンコードして保存しています。保存された数値を平均すると(sRGBモード)光を少なく見積もることになり、実際の光の強さを平均すると、照明2つが重なったときのより明るい #BC00BC になります。
ここで青 + 黄色は緑になりますか?
光としては、純粋な青と黄色が足し合わされて明るいグレー(#BCBCBC)になります。実際の絵の具が緑になるのは、顔料ごとにスペクトルの広い範囲を吸収するからです。絵の具モードはそれを大まかに真似るだけで、中間的な青と黄金色の黄色はオリーブグリーンになりますが、純粋な #0000FF と #FFFF00 は共有するチャンネルがなく黒になります。
Webデザインではどの方法を使えばよいですか?
均一に見えるグラデーションや混色にはOKLabを使います。CSSのcolor-mix(in srgb, …)やほかのツールと合わせるなら、sRGB平均を使ってください。
最終更新:
この入力内容のページアドレス: https://kakao.mobile/ja/tools/color-mixer/
このツールを引用する
kakaoCalc. (2026, November 8). カラーミキサー(絵の具・光・知覚). https://kakao.mobile/ja/tools/color-mixer/
“カラーミキサー(絵の具・光・知覚).” kakaoCalc, 8 Nov. 2026, kakao.mobile/ja/tools/color-mixer/.