色の組み合わせを作る

元になる1色から、色相を決まった角度だけ回した色を作ります。 できた色どうしを重ねたときに文字が読めるかも、全部の組で計算します。

この道具が書くのは「何度回したか」だけです

補色・三色・類似色といった名前は、色相を何度回すかを決めているだけです。 補色なら180度、三色なら120度ずつ、類似色なら30度ずつ。それ以上のことは、この決まりからは出てきません。

だからこのページは「この組み合わせは調和します」とは書きません。 180度という数は計算の決まりであって、 そう回した色がきれいに見えることの証明ではないからです。 昔からこの角度が使われてきたのは本当ですが、「よく使われてきた」と「必ずきれいになる」は別のことです。

この道具が確かに言えることは2つだけです。色相を何度回したかと、その2色を重ねたら文字が読めるか。 どちらも計算で出せて、あとから同じ答えが出せます。似合うかどうかは、 出てきた色を見てあなたが決めてください。

色相・彩度・明度のうち、動かすのは色相だけです

色相（しきそう）は「赤っぽい・青っぽい」という色あいのことで、0度から360度の輪の上の位置で表します。彩度（さいど）は鮮やかさ、明度（めいど）は明るさです。 この道具は色相だけを回して、彩度と明度は1も動かしません。出てくるのは 「同じ鮮やかさ・同じ明るさで、色あいだけが違う色」です。

輪なので、はしがありません。350度の色を30度回すと、380度ではなく20度に戻ってきます。時計の針が11時から2時間進むと1時になるのと同じです。

絵の具の補色と、光の補色は別の色です

ここがこのページでいちばん大事なところです。同じ「反対の色」という言葉が、2つの違うものを指しています。

画面の色は光を足して作ります。赤・緑・青の光を強くしていくと、 重なったところは明るくなり、3つとも最大にすると白になります。この混ぜ方を加法混色（かほうこんしょく・足し算の混ぜ方）といいます。

絵の具やインクは逆です。紙に置いた絵の具は当たった光の一部を吸いこみ、残った光がはね返って目に届きます。 絵の具を混ぜると吸いこむ色が増えるので、 混ぜるほど暗くなり、たくさん混ぜると黒っぽくなります。こちらは減法混色（げんぽうこんしょく・引き算の混ぜ方）です。

混ぜ方が逆なので、「向かい側」に置く色も変わります。 この道具が使っている光の輪では、赤の向かいは水色（シアン）で、 この2つを光として重ねると白になります。 いっぽう絵の具でよく使われる輪では、赤の向かいは緑です。 こちらを混ぜても白にはならず、濁った暗い色に近づきます。

しかも絵の具の輪は1つに決まっていません。 何色を基本の色とするかで並べ方が変わり、どれが正しいという決まりはありません。 だから「赤の反対の色」を1つに決めることもできません。 どの輪の上の話なのかを言わずに「反対の色」と言うと、相手と違う色を思い浮かべたまま話が進みます。

この道具は、絵の具を混ぜた色を出しません。絵の具は粒が光を吸ったり散らしたりするので、 混ぜた結果は足し算でも掛け算でも決まらないからです。 出せない色を、それらしい数字で出すことはしません。

色相環は、虹の両はしをつないで作った輪です

色を輪に並べたのはニュートンで、1704年の本『光学』（Opticks）に円の図が載っています。 面白いのは目盛りの決め方です。円周を7つに分けた幅を、 ニュートンは音階の音の間隔の比で決めたと書いています。 つまり色の輪の目盛りは、音楽から借りてきたものでした。

もう1つ。虹は輪ではありません。赤から紫まで一列に並んでいて、赤と紫は反対のはしにあります。 それを丸めて両はしをつないだのが色相環です。 つないだところにできる赤紫は虹の中には無い色で、 ニュートン自身も「これはプリズムの色ではない」と書いています。

だから色相環は、自然にそう並んでいるものではなく人が作った並べ方です。 並べ方が変われば向かい側の色も変わる ── 絵の具の補色と光の補色が食い違うのは、これが理由です。

きれいでも、重ねると読めない組み合わせがあります

補色どうしは輪の上でいちばん遠い色ですが、遠いことと読みやすいことは別です。 コントラスト比は色あいの遠さではなく明るさの差を測っているからです。

赤（#ff0000）と水色（#00ffff）は補色ですが、 重ねると3.19対1しかありません。 本文の文字に必要な4.5対1に届かないので、この2色で文章を書くと読みにくくなります。

ところが同じ補色でも、青（#0000ff）と黄（#ffff00）なら8.00対1あって、本文にも十分です。「補色だから見やすい」も「補色だから見にくい」も成り立ちません。その2色で測るしかない、というのが答えです。

コントラスト比がどう計算されているか（明るさをどう数えるか）は、カラーコードの変換のページに書いてあります。この道具はその計算を呼んで、作った色の全部の組み合わせに当てています。

彩度が0の色は、回しても同じ色のままです

白・黒・灰色は、赤・緑・青の値が全部同じ色です。色あいを持っていないので、色相を回しても向かう先がありません。 だから何度回しても同じ色が出てきます。

これは決まりとしてそう定められています。CSS の仕様は、彩度が0%のときの色相を「無力（powerless）」と呼び、0度でも180度でも、どの角度でも同じ結果になると書いています。 彩度を少しずつ下げていくと回したときの差も小さくなり、0がその行き着く先です。

入れた色は、どこにも送っていません。角度を回す計算もコントラスト比の計算も、 すべてあなたの端末の中で終わります。送る先を持たない造りです。

出どころ: 色相の目盛り（赤が0度、緑が120度、青が240度）と、 彩度が0のとき色相が無力になることはCSS Color Module Level 3（新しいタブで開きます）と CSS Color Module Level 4 から。コントラスト比の式はWCAG 2.2（新しいタブで開きます）の定義そのままです。ニュートンの円と、音階の比で目盛りを決めたこと、 赤紫がプリズムの色ではないことは、『光学』第1書 第2部 命題VI 問題II の原文（新しいタブで開きます）で確かめました。