Color Comparison

hex値と名前付き色について

hex値の読み方

#RRGGBB は、赤（R）・緑（G）・青（B）の各成分の値を、2桁ずつ16進数で並べたものです。

• 16進数の1桁は 0〜9 と a〜f（a=10 … f=15）で、大文字・小文字は区別されません。
• 2桁で 00〜ff（10進数で 0〜255）を表します。左の桁が16の位、右の桁が1の位です。例: c8 = 12×16 + 8 = 200。
• 先頭から2桁ずつ「赤・緑・青」です。例: #ff8000 は 赤=255、緑=128、青=0 で、オレンジ色になります。
• 各成分の値が大きいほど、その成分の出力値が大きくなります。#000000 は3成分すべてが最小の黒、#ffffff はすべてが最大の白です。
• 3色の組み合わせは 256×256×256 = 16,777,216 通りです。
• 赤・緑・青が同じ値なら灰色になります。例: #808080（gray）。

3桁のhex値があるのはなぜ？

#RGB の3桁は、各桁を2回ずつ繰り返す短縮形です。#f80 は #ff8800 と同じ色になります。2桁が同じ数字の組（00, 11, 22 … ff）だけで作れるため、使える色は 16×16×16 = 4,096 通りです。6桁表記より短く書けるため、CSSの色指定を簡潔に記述できます。このツールの入力欄も、3桁と6桁に対応しています。

名前付き色のうち、3桁で書けるのは次の色です。

• black（#000）、white（#fff）、red（#f00）、lime（#0f0）、blue（#00f）
• yellow（#ff0）、aqua / cyan（#0ff）、fuchsia / magenta（#f0f）
• rebeccapurple（#639）、lightslategray / lightslategrey（#789）

CSSでは、アルファ値（不透明度）を加えた4桁（#RGBA）と8桁（#RRGGBBAA）の表記も使えます。末尾のアルファ値は、00 が完全に透明、ff が完全に不透明を表します。

148色の由来

• CSS Level 1では、基本となる16色（aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow）が定義されました。CSS Level 2では orange が加わり、17色になりました。
• その後、X11の色名（元はUNIX系システムで使われていた色名）を基にした多数の色名がSVG 1.0で採用され、CSS Color Module Level 3で標準化されました。これにより、rebeccapurple を除く147色が定義されました。
• CSS Color Module Level 4では rebeccapurple が加わり、148色になりました。transparent と currentcolor は別に定義されているキーワードなので、この148色には含まれません。

似た名前があるのはなぜ？

• gray と grey: アメリカ英語の gray とイギリス英語の grey を、どちらも書けるようにしたものです。darkgray / darkslategray / dimgray / gray / lightgray / lightslategray / slategray の7組は、それぞれ綴りが異なりますが、まったく同じ色です。
• aqua と cyan、fuchsia と magenta: aqua と fuchsia はHTML由来、cyan と magenta はX11由来の名前で、それぞれ同じ色（#00ffff、#ff00ff）です。
• この結果、148個の名前に対して、実際に異なるhex値は139種類です。gray / grey の7組と、aqua / cyan、fuchsia / magenta の2組を合わせた9組が重複しています。

名前から想像と違う色

• green は #008000 と暗めの緑で、明るい緑は lime（#00ff00） です。X11では green が #00ff00 でしたが、CSSの基本色では別の値が採用されました。X11由来の色名が追加された後も、この違いが残っています。
• darkgray（#a9a9a9）は gray（#808080）より明るい。名前の「dark」から想像する順序と逆になっています。これもX11由来の色名と、基本色の値の違いが残った例です。
• rebeccapurple（#663399）は、Web標準の発展に貢献したEric Meyer氏の娘Rebeccaさんを記念して、2014年にCSSの色名として追加されました。

このパレットの並び

有彩色は色相を30°ごとのグループに分け、グループ内を暗い色から明るい色の順に並べています（明るさはHSLのL値）。灰色・黒・白は最後にまとめています。同じ系統でも、鮮やかな色は L 値が中間になるため、見た目の明るさとは少し順序が前後します。