なぜHTMLで「チャック・ノリス色」は赤色っぽくなるのか？

HTMLやCSSで色を指定するとき、6ケタの16進数で構成される「カラーコード」のほかに、直接色名を指定する方法があります。しかし、色の名前ではなく、単なる俳優の名前であるはずの「チャック・ノリス」を指定しても、なぜか問題なく赤っぽい色が表示されます。その仕組みには、ちゃんと理由がありました。

Sam's place: A little rant about Microsoft Internet Explorer's color parsing
https://scrappy-do.blogspot.com/2004/08/little-rant-about-microsoft-internet.html

browser - Why does HTML think “chucknorris” is a color? - Stack Overflow
https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color

HTMLやCSSで色を指定するとき、「#000000(黒)」から「#ffffff(白)」までの6ケタの16進数が用いられます。これは、それぞれ頭から2ケタずつRGB値を示していて、たとえば「赤」はRGBが(255,0,0)なので、カラーコードだと「#ff0000」と表記され、「緑」はRGBが(0,255,0)なので「#00FF00」と表記されます。

しかし、カラーコードだと細かく段階を刻んで色を指定できるとはいえ面倒でもあるので、「グレー(gray：#808080)」や「空色(skyblue：#87ceeb)」、「チョコレート色(chocolate：#d2691e)」、「ベージュ(beige：#f5f5dc)」など代表的な140色は、名前とカラーコードが定義されていて、色名で指定することも可能です。

そこで出てくる謎が、色名の定義に入っていない「チャック・ノリス色(chucknorris)」を指定しても、黒や白ではなく、赤っぽい色が出ることです。

俳優であるチャック・ノリスは、映画「ドラゴンへの道」でブルース・リーの前に立ちはだかる空手の達人を演じた武術家であり、多数のアクション映画に出た実績から、オールスター映画「エクスペンダブルズ2」にも出演しています。

『エクスペンダブルズ２』予告編 - YouTube

経歴から考えると、「チャック・ノリスの行く先には敵の血の雨が降る」というようなイメージから赤っぽい色なのかもしれない……という想像もできますが、実際にはこの色になっている理由は「色とは無関係な文字列であってもカラーコードに変換する仕組みが備わっているため」です。

文字列からカラーコードへの変換ルールは以下の通り。

1：桁数が足りない部分・不正な部分は「0」として処理する
カラーコードは前述の通り6ケタの16進数で表現されますが、ケタ数が足りない部分や不正な部分は、すべて「0」として処理されます。たとえば「#F0F0F」も「F0F0F」も「#FxFxFx」も「FxFxF」も、すべて「#F0F0F0」と同じ扱いだというわけです。「チャック・ノリス色」の場合、表記のうちcしか有効にならないため「chucknorris」は16進数の「c00c0000000」という数値になります。

2：数値の総数を3で割りきれる数にそろえる
チャック・ノリス色を手順1で変換した数値は11ケタなので、末尾に0が追加されて「c00c00000000」になります。

3：数値を3グループに等分する
チャック・ノリス色を手順2で変換した「c00c00000000」の場合、「c00c 0000 0000」と区切ることができます。

4：頭2ケタを残してカラーコードにする
「c00c 0000 0000」の場合、頭2ケタを残すと「c0 00 00」となります。合計6ケタになるのでくっつけて、カラーコード「#c00000」、つまりRGB(192,0,0)を表現する数値となります。

たとえば、チャック・ノリスを9文字で切って「chucknorr」とした場合、手順3まで済ませた時点で「c00 c00 000」となり、手順4を実行すると「#c0c000」という薄黄色ができます。

同様の変換で「GIGAZINE色」を考えた場合、最終的には「#00a00e」という濃いめの緑色が得られました。