カラーコードのカラー名について
たまにHTML, CSS, SVGでカラーコードが16進数ではなくカラー名で指定されているのを見かける。
カラー名だと例えば#ff0000ならred、#0000ffならblueを指定することで16進数を指定したときと同じ色を指定できる。
<ul>
<li style="color: #ff0000;">foo</li>
<li style="color: #0000ff;">bar</li>
</ul>
<ul>
<li style="color: red;">foo</li>
<li style="color: blue;">bar</li>
</ul>
- foo
- bar
- foo
- bar
一見するとカラー名のほうがわかりやくて便利に見えるが、色の指定を間違いやすいなどのデメリットがあるため、なるべく使用しないほうが良い。
greenは#00ff00ではない
カラー名で特に多いのがgreenを#00ff00の指定してしまう間違い。
redは#ff0000、blueは#0000ffなのでgreenは#00ff00だと勘違いしている人が多いようだ。
例えば16進数で#ff0000、#00ff00、#0000ffをSVGで指定すると下図のようになるが…
<svg width="200" height="150" viewBox="0 0 200 150" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="50" fill="#ff0000"></rect>
<rect x="0" y="50" width="200" height="50" fill="#00ff00"></rect>
<rect x="0" y="100" width="200" height="50" fill="#0000ff"></rect>
</svg>
これをred, green, blueにすると…
<svg width="200" height="150" viewBox="0 0 200 150" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="50" fill="red"></rect>
<rect x="0" y="50" width="200" height="50" fill="green"></rect>
<rect x="0" y="100" width="200" height="50" fill="blue"></rect>
</svg>
見ての通り緑だけ色が変わっている。
カラー名のgreenは#00ff00ではなく#008000なのだ。
<svg width="200" height="150" viewBox="0 0 200 150" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="50" fill="#ff0000"></rect>
<rect x="0" y="50" width="200" height="50" fill="#008000"></rect>
<rect x="0" y="100" width="200" height="50" fill="#0000ff"></rect>
</svg>
もしカラー名で指定するなら#00ff00はlimeを指定するのが正しい。
<svg width="200" height="150" viewBox="0 0 200 150" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="50" fill="red"></rect>
<rect x="0" y="50" width="200" height="50" fill="lime"></rect>
<rect x="0" y="100" width="200" height="50" fill="blue"></rect>
</svg>
カラー名だとスペルミスによるリスクも
カラー名だとスペルミスによる間違えが発生しやすい。
例えば赤紫のfuchsiaがfuchsaiになるなどだ。
ちなみにカラー名が間違っているとSVGの場合は黒になってしまう。
<svg width="200" height="100" viewBox="0 0 200 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="50" fill="fuchsia"></rect>
<rect x="0" y="50" width="200" height="50" fill="fuchsai"></rect>
</svg>
HTMLやCSSでもカラー名がスペルミスで間違っていると指定が効かなくなってしまう。
カラー名を使用すると16進数で指定するより間違えて気付かない可能性が高いのでやめたほうが良いだろう。
