Color Mix Lab

三原色をまぜて、お手本の色をつくろう!

あそびの設定

難易度

オレンジ・むらさき・みどりなど、三原色を2つ混ぜてできる色。混色の基本を覚えます。

お手本の色を見て、赤・青・黄のスライダーを動かして同じ色を作ります。白・黒で明暗の調整もできます。「こたえあわせ」を押すとスコアが出ます。全10問です。

絵の具を混ぜると何色になるか——減法混色のしくみ

光の三原色(赤・緑・青)を全部混ぜると白になります。これは加法混色と呼ばれ、テレビやスマホの画面が使う方式です。一方、絵の具やインクを全部混ぜると暗い茶色や黒に近づきます。こちらが減法混色です。Color Mix Lab が扱うのはこの減法混色、つまり「絵の具を混ぜる」体験です。

減法混色では、混ぜるほど光が吸収されて暗くなります。赤い絵の具は青と緑の光を吸収し、赤の波長だけを反射しています。青い絵の具は赤と緑を吸収します。この 2 つを混ぜると、青が赤を吸い、赤が緑を吸い、さらに赤が青を一部吸うことで、反射できる光はごくわずかになり紫がかった暗い色になります。光が「引かれていく」から減法と呼ぶのです。

Color Mix Lab では赤・青・黄を絵の具の三原色として扱い、内部では RYB カラーモデル(Gosset & Chen, 2004)の三線形補間で RGB に変換しています。この変換により、赤と黄を混ぜればオレンジ、青と黄を混ぜれば緑、赤と青を混ぜれば紫と、絵の具で実際に起こる混色が画面上で再現されます。

なぜ赤・青・黄が三原色なのか——光の波長と色の関係

人間の目には 3 種類の錐体細胞があり、それぞれ長波長(赤系)、中波長(緑系)、短波長(青系)の光に強く反応します。すべての色は、この 3 つの錐体への刺激の組み合わせとして脳が解釈しています。だから原色は 3 つで足りるのです。

ただし「赤・青・黄」が唯一の三原色というわけではありません。光を混ぜる加法混色では赤・緑・青(RGB)が使われ、印刷のインクではシアン・マゼンタ・イエロー(CMY)が使われます。絵の具の世界で赤・青・黄が長く使われてきたのは、実際に手に入りやすい顔料でほとんどの色を作れたからです。Color Mix Lab がこの三原色を採用しているのも、子どもが最初に触れる画材——クレヨンや絵の具——と同じ体験をスライダーで再現するためです。

白と黒で明暗を操る——明度・彩度という軸

色には「色相(赤・青・緑などの色み)」「彩度(鮮やかさ)」「明度(明るさ)」の 3 つの性質があります。三原色のスライダーだけでは色相と彩度をおおまかに操れますが、明度のコントロールが足りません。そこで白と黒のスライダーを用意しています。

白を混ぜると、絵の具に白い絵の具を足すのと同じで色が薄く明るくなります(パステルトーン)。サーモンピンクやラベンダーグレーのような淡い色を作るには白が欠かせません。黒を混ぜると色が暗く沈みます(ダークトーン)。フォレストグリーンやプラムのような深い色は黒を加えないと到達できません。

むずかしい難易度のターゲット色は、三原色だけでは再現できない微妙な中間色が並びます。白と黒をどのくらい混ぜるかが得点を左右する鍵になります。

色の違いを数値にする——CIE76 deltaE のしくみ

「この 2 つの色はどのくらい違うか」を客観的に測る指標が deltaE(デルタイー)です。Color Mix Lab では CIE76 という計算方法を使っています。手順は次のとおりです。

まず画面上の色(sRGB)をガンマ補正を解いて線形 RGB に変換し、さらに XYZ 色空間を経由して CIE L*a*b* 色空間へ変換します。L*a*b* は人間の知覚に近いように設計された色空間で、L* が明度、a* が赤〜緑の軸、b* が黄〜青の軸を表します。2 つの色の L*a*b* 値のユークリッド距離が deltaE です。

deltaE が 0 なら完全に同じ色、2.3 前後で人間がかろうじて違いを知覚できるレベル、10 を超えると明らかに別の色に見えます。Color Mix Lab ではこの値を 0〜100 点のスコアに換算しています(deltaE=0 で 100 点、50 以上で 0 点)。80 点を超えていれば、ほとんどの人が「同じ色」と感じる近さです。

  • deltaE 0〜2: ほぼ同じ色(スコア 96〜100 点)
  • deltaE 2〜5: よく見ると違う(スコア 90〜96 点)
  • deltaE 5〜10: 違いがはっきり分かる(スコア 80〜90 点)
  • deltaE 10〜25: 明らかに違う色(スコア 50〜80 点)
  • deltaE 25〜50: 全く別の色(スコア 0〜50 点)

難易度ごとの色の選び方

かんたんでは、オレンジ(赤+黄)、むらさき(赤+青)、みどり(青+黄)など、三原色を 2 つ混ぜるだけでできる二次色を出題します。どの原色を足せばよいかが直感的に分かるので、混色の第一歩に向いています。

ふつうでは、バーミリオン(赤が強めのオレンジ)、コバルトブルー(青に少し赤)、テラコッタ(赤+黄に少し青)など、3 色のバランスを微調整する三次色が加わります。「赤を多め、黄色を少し」のような比率の感覚が問われます。

むずかしいでは、サーモンピンク、ティール、ベージュ、ラベンダーグレーなど、白や黒で明暗を操作しないと作れない色が中心です。三原色の比率に加えて、白・黒の配分が合否を分けます。日常で目にするけれど「どう混ぜるか」を聞かれると迷う色が揃っています。

色彩感覚を育てるヒント

最初は当てずっぽうでスライダーを動かしても構いません。「赤を増やしたら茶色っぽくなった」「黒を少し入れたら急に暗くなった」という試行錯誤そのものが、色彩感覚を育てる体験です。

慣れてきたら、ターゲット色を見たときに頭の中で分解する癖をつけてみてください。「この色は青が多い。でも少し緑っぽいから黄色も足す。暗いから黒も少し」——この分解の過程が、絵を描くとき・服を選ぶとき・デザインをするときの色彩的な判断力につながります。

保護者の方は、お子さんと一緒にスライダーを動かしながら「もう少し黄色を足してみたら?」「白を入れたらどうなると思う?」と声をかけてあげると、対話を通じて色の名前と感覚が結びつきやすくなります。

つくりとプライバシー

Color Mix Lab はすべてブラウザの中で動きます。外部への通信は一切ありません。

混色の計算(RYB→RGB 変換)と色差の計算(CIE76 deltaE)はどちらも純粋な数学関数で、端末の中だけで完結します。効果音は Web Audio でその場で合成し、画像・音声ファイルを 1 つも読み込みません。

保存するのは難易度別のベストスコアだけで、お使いの端末の localStorage にのみ記録されます。名前や年齢を入力する場面はなく、操作の内容がどこかへ送られることもありません。

よくある質問

Q. 無料で使えますか?
A. はい、完全無料で登録も不要です。利用回数の制限もありません。
Q. 何歳から遊べますか?
A. 色に興味が出る 4〜5 歳くらいから遊べます。かんたん難易度は「赤+黄=オレンジ」のような基本的な混色なので、小さなお子さんでも感覚的に楽しめます。ふつう・むずかしいは大人でも考える微妙な色があり、色彩の勉強にもなります。
Q. スマホでも遊べますか?
A. はい。スライダーは指 1 本でドラッグするだけなので、スマホ・タブレット・パソコンのどれでも遊べます。
Q. 赤と青を混ぜても画面の色と絵の具の色が違うのはなぜですか?
A. 画面はRGB(光の三原色)で色を表現するため、絵の具の減法混色を完全に再現することは原理的にできません。Color Mix Lab は RYB カラーモデルの数学的な近似を使って、できるだけ絵の具らしい混色結果を画面上に表示しています。
Q. 100 点を取るにはどうすればいいですか?
A. deltaE(色差)が 0 に近いほど高得点です。ターゲット色をよく観察し、「この色は赤がどのくらい、青がどのくらい」と頭の中で分解してからスライダーを動かすと近づきやすくなります。白・黒の調整も忘れずに。
Q. スコアや記録はオンラインに保存されますか?
A. いいえ。すべてブラウザ内で動作し、保存されるのは難易度別のベストスコアだけで、ご自身の端末内にのみ保存されます。