Webの色名とカラーコード｜CSSの名前付き色・16進数・Webセーフカラーを解説

Webページの色を指定するとき、多くの人は「#ff0000」のような記号の並びを思い浮かべます。しかしCSSでは、それと並んで「red」「tomato」「skyblue」といった英単語の色名でも色を指定できます。これらは名前付き色（named colors）と呼ばれ、ブラウザがあらかじめ対応するカラーコードを知っているため、コードを覚えていなくても直感的に色を扱えます。本記事では、Webの色名とは何か、カラーコードとどう対応しているのか、そして目的の色に近い色名をどう探すのかを順を追って解説します。

Webの色名とは何か

Webの色名とは、CSSやHTMLで色を指定するときに使える、あらかじめ決められた英単語の名前のことです。たとえば color: red; と書けば赤、color: blue; と書けば青が表示されます。数字の羅列であるカラーコードを覚えなくても、英単語で色を指定できるのが大きな特徴です。

これらの色名はCSS Color仕様として標準化されており、現在のブラウザは約140種類以上の名前付き色を共通で認識します。red や green のような基本的な色から、tomato（トマト色）、salmon（サーモン）、khaki（カーキ）、orchid（蘭の花の色）のように、身近なものに由来したユニークな色名まで幅広く用意されています。

名前付き色の正体は、実は特定のカラーコードに付けられた別名（エイリアス）です。たとえば red は #ff0000 と完全に同じ色を指します。どの色名がどのコードに対応するのかを実際に調べたいときは、色名検索ツールで色名やコードを入力して確かめてみるのが分かりやすいでしょう。

色名と16進カラーコードの対応

Webで最もよく使われる色の表記は、16進カラーコードです。# に続けて6桁の16進数を書き、それぞれ2桁ずつが赤（R）・緑（G）・青（B）の光の強さ（0〜255）を表します。

#ff6347 → R=255, G=99, B=71（これが tomato）

つまり名前付き色は、この6桁のコードに人間が読みやすい名前を付けたものにすぎません。代表的な対応をいくつか挙げてみましょう。

このように、色名・16進コード・RGB値は同じ色を別の書き方で表しているだけです。デザインの現場では、配色を決める段階では分かりやすい色名で当たりを付け、最終的な実装では微調整しやすい16進コードに置き換える、といった使い分けもよく行われます。色名とコードを相互に変換したいときはカラーコード変換ツールが便利で、HEX・RGB・HSLなどの表記を一度に確認できます。

名前付き色の種類とtomatoのような色

名前付き色には、大きく分けて基本的な色と拡張された色があります。black・white・red・green・blue・yellow などは誰もが思い浮かべる基本色です。一方で、CSSにはこれをはるかに超える数の色名が用意されています。

• 食べ物・自然由来：tomato（トマト）、salmon（鮭）、chocolate（チョコレート）、wheat（小麦）など、身近なものの色をそのまま名前にしたもの。
• 植物・花由来：orchid（蘭）、plum（すもも）、lavender（ラベンダー）など、やわらかな色合いを表すもの。
• グレー系の豊富なバリエーション：gray を中心に dimgray・slategray・gainsboro など、微妙に異なる灰色が多数。

たとえば tomato は #ff6347 に対応する、赤よりも少しオレンジ寄りのやわらかな赤です。単なる red ではきつすぎるが、もう少し温かみのある赤が欲しい、という場面で重宝します。こうした「名前だけでは色味が想像しにくい色」こそ、実際に表示して確認することが大切です。気になる色名がどんな見た目になるかは、色名検索ツールでプレビューしながら探せます。

Webセーフカラーとは

Webセーフカラーとは、かつて表示できる色数が256色しかないディスプレイが多かった時代に、どの環境でも同じように見えることを目指して選ばれた216色のことです。各成分（R・G・B）を 00, 33, 66, 99, cc, ff の6段階に限定し、その組み合わせ（6×6×6＝216色）で構成されます。

当時は、これ以外の色を指定すると環境によって色が変わってしまうおそれがあったため、Webデザインではセーフカラーの範囲内で配色するのが定石でした。#ffcc00 や #3366ff のように、各桁が同じ文字の繰り返しになっているコードがWebセーフカラーの目印です。

ただし、現在のディスプレイはほぼすべてが1,600万色以上を表示できるため、Webセーフカラーを厳密に守る必要はほとんどありません。歴史的な背景を知る知識として、また「覚えやすく扱いやすいコード」を選ぶ際の目安として理解しておけば十分です。

色名で指定するメリット・デメリット

色名（名前付き色）とカラーコードは同じ色を表せますが、それぞれに向き不向きがあります。

メリットは、なんといっても可読性です。color: tomato; と書かれていれば、コードを見ただけでおおよその色が想像できます。試作やプロトタイプ、ちょっとしたサンプルコードでは、色名のほうが手早く意図を伝えられます。

デメリットは、選べる色が約140色に限られることと、微妙な調整ができないことです。ブランドカラーのように「特定の1色」を正確に再現したい場合は、色名では足りず16進コードが必要になります。また、同じ色味でも少しだけ明るくしたい、といった調整は数値でなければ表現できません。実務では、下書きや説明には色名、最終的な実装には16進コードと使い分けるのが現実的です。色名から正確なコードを知りたいときはカラーコード変換ツールで変換しておくとよいでしょう。

近い色名の探し方

「このコードに近い色名はあるか」「イメージしている色に一番近い名前付き色はどれか」を探したい場面は意外と多いものです。探し方にはいくつかのコツがあります。

1. 基準の色から名前を逆引きする

手元に #ff6347 のようなコードがある場合、それに最も近い名前付き色を調べると tomato が見つかります。完全一致しなくても「ほぼ同じ色名」が分かれば、コードを覚えなくても色を扱えるようになります。色名検索ツールなら、コードを入力して近い色名を探したり、色名から見た目を確認したりが一度にできます。

2. 系統で絞り込む

赤系なら red・tomato・crimson・salmon、青系なら blue・skyblue・navy・steelblue のように、同じ系統の色名をまとめて見比べると、目的の色味に近いものを選びやすくなります。明るさや鮮やかさの違いを並べて確認するのがコツです。

色名・16進コード・RGB・HSLは、いずれも同じ色を別の言葉で表したものにすぎません。まずはカラーコード変換ツールで表記を行き来させ、色名検索ツールで実際の見た目を確かめてみてください。色の対応関係を目で見て触れることが、配色を自在に扱う近道になります。

なお本記事は一般的な情報の提供を目的としたものです。色名やカラーコードの扱いはブラウザや仕様の更新により変わる場合があります。最新の公式仕様やドキュメントもあわせて確認したうえでご利用ください。