カラーミキサー

画面の上で色が混ざるしくみ

画面のすべての色は、赤・緑・青の光でできています。光を足すほど明るくなるので、この混色は加法混色と呼ばれます。赤い光と緑の光で黄色になり、緑と青でシアン、三つすべてを最大にすると白になります。上のミキサーもこの方式で、指定した比率に合わせて二色の赤・緑・青のチャンネルを平均します。足し算ではなく平均なので、赤と緑の光を50対50で混ぜるとオリーブ #808000 になります。足し合わせたときの黄色と同じ色相で、明るさが半分になった色です。

50対50で混ぜた色が思ったより明るく、くすんで見えるのはこのためです。色相環で向かい合う二色、たとえば青と黄色は、チャンネルが打ち消し合って濁ったグレーに近づきます。鮮やかさを保ちたいときは、比率を中央から動かすか、色相環で近い位置にある二色を選んでください。

絵の具の混色が違う理由

絵の具やインク、染料は逆の働きをします。顔料は当たった光の一部を吸収し、残りを反射するため、色を足すほど光が減っていきます。これが減法混色で、その原色は学校で習う赤・黄・青、あるいは印刷で使うシアン・マゼンタ・イエローです。赤と緑の絵の具は濁った茶色になりますが、赤と緑の光は黄色になります。

実際の顔料の仕上がりを画面上のツールが正確に予測することはできません。結果は絵の具そのもの、つまり不透明度や顔料の粒の細かさ、もともと含まれる白や黒の量に左右されるからです。古典的な結果は下の表で確認し、ミキサーは配色を計画する道具として使ってください。

二色を混ぜると何色になる？

よく検索される組み合わせを、絵の具での伝統的な結果と、同じ二色を画面が平均したときの結果を並べて示します。二つの列が食い違うのは意図的で、顔料を混ぜることと光を混ぜることの違いがそのまま表れています。

絵の具の結果は一般的なものです。実際の顔料はメーカーや不透明度によって変わります。画面の値はこのページが計算した正確な50対50の平均です。

カラーミキサーの使い方

1. 二つの色を選ぶ. どちらかの色見本をクリックしてカラーピッカーを開くか、下の入力欄に直接HEXコードを入力します。RGBの値は自動で更新されます。
2. 比率を決める. スライダーを動かして配分を変えます。50では二色が同じ重みになり、どちらかの端に寄せるとその色が多く残ります。
3. 結果をコピーする. 混ざった色は名前とHEX、RGBの値を表示します。コピーボタンで、どちらの形式でもデザインツールやCSSにそのまま持っていけます。
4. パレットとして保存する. 混色からパレットを生成すると、その色を中心にした一式の配色が手に入ります。コントラストの確認と共有用ページも付いてきます。

覚えておきたい混色のコツ

• 色を明るくするには白を、暗くするには黒を混ぜます。同じ明度のグレーを混ぜると、明るさを変えずに彩度だけを落とせます。
• 色相環で向かい側にある色を少しだけ混ぜるのが、色を落ち着かせるいちばん早い方法です。濁りやすい黒の代わりに使ってください。
• インターフェースの色には調和だけでなくコントラストが必要です。混ぜた色を文字に使う前に、背景との組み合わせを必ず確認しましょう。
• 混ぜた中間色が心地よい二色は、パレットでも相性がよいものです。その中間色は境界線やホバー状態、控えめな背景に向いています。