WEB標準カラーネームとカラーコード

はじめに

ウェブデザインを始めたばかりの方にとって、色の選択と指定は基本的でありながら重要なスキルです。
ウェブ上での色の表現方法には様々な方法がありますが、今回は「標準カラーネーム」と「カラーコード」について詳しく解説します。

ウェブ標準カラーネームとは？

ウェブ標準カラーネームとは、HTML及びCSSで名前を使って指定できる色のことです。
例えば、redやblueのように色名を直接指定することができます。
現在のWeb標準では140種類以上の色名が定義されています。

カラーコードとは？

カラーコードは、色をRGB（赤・緑・青）の組み合わせで表現する16進数の値です。
例えば、純粋な赤色は #FF0000 と表記します。これは「赤：最大（FF）、緑：なし（00）、青：なし（00）」を意味します。

主要な標準カラーネームとコード

基本色（Basic Colors）

カラーネーム	カラーコード	説明
black	#000000	黒
white	#FFFFFF	白
red	#FF0000	赤
green	#008000	緑
blue	#0000FF	青
yellow	#FFFF00	黄
cyan	#00FFFF	シアン（水色）
magenta	#FF00FF	マゼンタ（紫紅色）
gray	#808080	灰色

グレースケール

カラーネーム	カラーコード	説明
black	#000000	黒
darkgray	#A9A9A9	濃い灰色
gray	#808080	灰色
lightgray	#D3D3D3	薄い灰色
gainsboro	#DCDCDC	さらに薄い灰色
whitesmoke	#F5F5F5	白煙色
white	#FFFFFF	白

赤系

カラーネーム	カラーコード	説明
darkred	#8B0000	濃い赤
red	#FF0000	赤
crimson	#DC143C	深紅
salmon	#FA8072	鮭色
tomato	#FF6347	トマト色
coral	#FF7F50	サンゴ色
orangered	#FF4500	オレンジ赤

青系

カラーネーム	カラーコード	説明
navy	#000080	濃紺
darkblue	#00008B	暗い青
blue	#0000FF	青
royalblue	#4169E1	ロイヤルブルー
skyblue	#87CEEB	空色
lightblue	#ADD8E6	薄い青
aqua	#00FFFF	アクア（水色）

緑系

カラーネーム	カラーコード	説明
darkgreen	#006400	濃い緑
green	#008000	緑
limegreen	#32CD32	ライム緑
lime	#00FF00	ライム色
lightgreen	#90EE90	薄い緑
mediumseagreen	#3CB371	中間の海緑色
yellowgreen	#9ACD32	黄緑

黄・橙系

カラーネーム	カラーコード	説明
gold	#FFD700	金色
yellow	#FFFF00	黄色
lightyellow	#FFFFE0	薄い黄色
orange	#FFA500	オレンジ
darkorange	#FF8C00	濃いオレンジ

紫系

カラーネーム	カラーコード	説明
indigo	#4B0082	インディゴ
purple	#800080	紫
darkviolet	#9400D3	濃い紫
violet	#EE82EE	菫色
magenta	#FF00FF	マゼンタ
orchid	#DA70D6	蘭色
plum	#DDA0DD	プラム色

茶系

カラーネーム	カラーコード	説明
maroon	#800000	栗色
brown	#A52A2A	茶色
sienna	#A0522D	シエナ色
chocolate	#D2691E	チョコレート色
peru	#CD853F	ペルー色
sandybrown	#F4A460	砂茶色
tan	#D2B48C	淡い茶色

カラーコードの構造

カラーコードは #RRGGBB の形式で表されます：

RR：赤の強さ（00～FF）
GG：緑の強さ（00～FF）
BB：青の強さ（00～FF）

16進数では、00（最小）～FF（最大）の範囲で色の強さを表現します。

短縮表記

同じ数字が並ぶ場合は、短縮形で表記することもできます：

#FF0000 → #F00（赤）
#00FF00 → #0F0（緑）
#0000FF → #00F（青）

カラーネームとコードの使い方

HTMLでの使用例

<p style="color: red;">赤いテキスト</p>
<p style="color: #0000FF;">青いテキスト</p>
<div style="background-color: lightyellow;">黄色い背景</div>

注意: HTMLのstyle属性で直接指定する方法は簡単ですが、多くの場合はCSSを別に定義する方が管理しやすくなります。

CSSでの使用例

body {
  background-color: whitesmoke;
}

h1 {
  color: navy;
}

.highlight {
  background-color: #FFFF00; /* 黄色 */
}

.error-message {
  color: crimson;
}