遊び方
画面の左にランダムな目標色が表示され、右の四角には今のスライダーが作っている色がリアルタイムで映ります。R(赤)・G(緑)・B(青)のスライダーはどれも0から255まで動き、 ラウンドの開始時には中間値の128に置かれます。目標と同じに見えたら「この色で提出する」を押してください。提出した瞬間に、目標色の正確なRGB値、自分が選んだ値、 チャンネルごとの差(自分の値から正解を引いたもの)が表になって表示されます。差がプラスならそのチャンネルを上げすぎ、マイナスなら足りなかったということなので、 次のラウンドで感覚を修正する手がかりになります。全5ラウンドで、合計点の理論上の最高は500点です。提出後は「次のラウンド」を押すまで先へ進まないので、結果をじっくり確認できます。
RGBの色はどう作られるのか
パソコンやスマートフォンの画面は、赤・緑・青の3種類の光を異なる強さで発光させて色を作ります。これが加法混色で、絵の具のように混ぜるほど暗くなる減法混色とは逆に、光は足すほど明るくなります。 各チャンネルは8ビット、つまり256段階(0〜255)で表され、表現できる色の数は256 × 256 × 256 = 16,777,216通りです。3つの値がすべて0なら黒、すべて255なら白、3つが同じ値ならグレーになります。 赤と緑を最大にすると黄(255, 255, 0)、緑と青はシアン(0, 255, 255)、赤と青はマゼンタ(255, 0, 255)です。絵の具の感覚とは違うため、最初は戸惑うかもしれません。 ウェブで使う#RRGGBB表記は、同じ値を16進数2桁ずつ並べたものです。たとえば(200, 80, 40)は#C85028になります。数値と色表記を相互に変換したいときはカラーコード変換が便利です。
点数の計算方法
ゲームは3つのチャンネルそれぞれの差を絶対値にして足し合わせ(差の合計、0〜765)、その最大値765に対する割合を100点から引きます。式にすると点数 = 100 − 差の合計 ÷ 765 × 100を四捨五入した値で、0点未満にはなりません。 1チャンネルが1ずれるごとに約0.13点が引かれる計算です。下の表はこの式をそのまま実行して、各点数に必要な差の合計の上限を求めたものです。
| 取りたい点数 | 差の合計の上限 | 1チャンネルあたりの平均許容誤差 |
|---|---|---|
| 99点以上 | 11 | 約3.7 |
| 98点以上 | 19 | 約6.3 |
| 95点以上 | 42 | 約14.0 |
| 90点以上 | 80 | 約26.7 |
| 80点以上 | 156 | 約52.0 |
| 70点以上 | 233 | 約77.7 |
| 60点以上 | 309 | 約103.0 |
| 50点以上 | 386 | 約128.7 |
表から分かるのは、満点に近づくほど急に厳しくなるということです。90点以上なら差の合計80以内、1チャンネルあたり平均約27(256段階の約1割)のズレまで許されますが、99点には合計11以内、 1チャンネルあたり4程度の精度が必要で、これは目ではほとんど区別できない差です。
| 3チャンネルすべてのズレ | 差の合計 | 点数 |
|---|---|---|
| ±1 | 3 | 100点 |
| ±2 | 6 | 99点 |
| ±5 | 15 | 98点 |
| ±10 | 30 | 96点 |
| ±15 | 45 | 94点 |
| ±25 | 75 | 90点 |
| ±40 | 120 | 84点 |
| ±64 | 192 | 75点 |
計算例3つ
- 目標(200, 80, 40)、提出(180, 100, 60): 差は20 + 20 + 20 = 60で、点数は100 − 60 ÷ 7.65 ≈ 92点。3チャンネルとも20ずつ外れても90点台前半に収まります。
- 目標(255, 0, 0)の純粋な赤を、スライダーに触らず(128, 128, 128)のまま出すと、127 + 128 + 128 = 383で50点です。 彩度の高い極端な色は、毎回中間値から始まるこのゲームでは出発点から最も遠いため、何もしなければ低い点になります。
- 目標(30, 200, 90)、提出(60, 170, 90): 30 + 30 + 0 = 60で92点。1チャンネルだけぴったり合っても、残り2つのズレがそのまま点数に響きます。
参考までに、スライダーをまったく動かさずに提出した場合の平均点は、可能な目標色16,777,216通りをすべて計算すると約74.9点です。つまり75点前後が「何もしなかった場合の基準線」で、そこからどれだけ上積みできるかが実力になります。
素早く色を合わせるコツ
3本のスライダーを同時に合わせようとすると難しいので、まず目立つチャンネルを決めましょう。赤みが強い色ならRを大きく上げ、明るく淡い色なら3つとも高くて互いに近く、暗くくすんだ色なら3つとも低い値になります。 3つの値が近いほど無彩色(グレー)に寄るので、彩度が低く見える色は、チャンネル同士の間隔を詰める方向に動かします。1回に動かすスライダーは1本にして、そのたびに自分の色の四角を目標の四角と見比べると効率的です。 人の目は緑の明るさの違いに比較的敏感だと言われ、Gのズレは目に付きやすいことがありますが、このゲームの点数は3チャンネルを同じ重みで扱うため、見た目の違和感と失点は必ずしも一致しません。
周囲の環境も影響します。画面の明るさ、ナイトモードやブルーライトカット、モニターの色調整によって同じ値でも見え方が変わり、隣り合う色の影響で印象が変わる同時対比も起こります。 同じ人が同じ端末で遊んでも点数にばらつきが出るため、別の端末の点数と直接比べることはあまり意味がありません。色の関係を視覚的に確かめたいときはカラーパレットジェネレーターも役立ちます。
感覚を鍛える練習の順序
最初の数回は点数よりも、結果表で「どのチャンネルがどちらにズレたか」を読む練習に使いましょう。3つの差がすべてプラスなら全体に明るすぎ、すべてマイナスなら暗すぎです。 符号が混ざっている場合は色相(どの系統の色か)を取り違えていることが多く、たとえばRがプラスでBがマイナスなら目標より赤寄り、Gだけがマイナスなら緑が足りず紫がかっています。 自分がどちらの方向に癖で外すのかを把握するだけでも上達します。次の段階では、最も大きいチャンネルから動かして明るさを先に合わせ、それから残り2つの比率を調整してみてください。 最終的な目標は90点以上で安定させることで、1チャンネルあたり平均約27以内の誤差なので、肉眼の比較でも十分狙えます(画面設定によって変わります)。それ以上の精度は画面設定や目の疲れに大きく左右されます。
限界と注意点
- 採点式は各チャンネルの単純な差を足すだけなので、人が感じる色の違い(知覚的な距離)とは一致しないことがあります。暗い色の小さな差と明るい色の同じ差は、見え方が違います。
- 乱数にはブラウザーのMath.randomを使うため毎回違う色が出ますが、セキュリティ用途の乱数ではありません。点数や履歴は保存も送信もされず、ページを再読み込みすると最初からになります。
- このゲームは色彩感覚を気軽に楽しむためのもので、色覚特性の診断とは関係ありません。色の区別が気になる場合は色覚テストで参考確認ができますが、正確な診断には眼科での検査が必要です。
よくある質問
点数はどのように計算されますか?
目標と自分の色のR・G・Bの差を絶対値で合計し、最大値765に対する割合を100点から引きます。完全に一致すれば100点、最も遠い組み合わせなら0点で、5ラウンドの合計は最高500点です。
スライダーが毎回128から始まるのはなぜですか?
どの目標色にも公平なスタート位置にするためです。128は0〜255の中間なので、どちらへ動かしても最大128で届きます。何も触らずに提出した場合の平均は約74.9点です。
提出後に修正できますか?
できません。提出するとそのラウンドの点数が確定し、スライダーは操作できなくなります。代わりに正解のRGBとチャンネルごとの差が公開されるので、次のラウンドの参考にしてください。
色の区別が苦手でも楽しめますか?
スライダー横の数値と、提出後に表示されるチャンネルごとの差を手がかりに練習できます。見た目の判断だけに頼らず、数値の傾向をつかむ遊び方もできます。
同じ色が続けて出ることはありますか?
目標色はR・G・Bをそれぞれ0〜255から独立に抽選するため理論上はありえますが、組み合わせが16,777,216通りもあるので、実際にはまず起こりません。
関連ツール
- カラーパレットジェネレーター: 1色からバランスのよい配色を作る
- カラーコード変換: RGB・HEX・HSLを相互に変換する
- 色順記憶ゲーム: 色の記憶力を鍛える