ウェブカラーとは｜定義とカラーコード（HEX・RGB・sRGB）入門
ウェブカラーとは、ウェブページをデザインする際に使用される色と、その色を記述したり一覧にしたりする方法のことです。画面上でどの色を表示するかを数値や名前で指定する仕組み全般を指し、HTML/CSSで指定する色表現（16進数、rgb()、hsl() など）や、ブラウザや開発ツールで扱うカラーパレットを含みます。
基本的な表現方法（HEX・RGB・英語名）
ウェブページの一部の色を選択するには、いくつかの方法があります。色は、16進数形式のRGBトリプレット（3つの数字の集合）としてリストアップされることがあります（16進数トリプレット）。RGB トリプレットは 16,777,216 色の色を作ることができます（256 × 256 × 256 = 16,777,216）。
具体例：
- 16進数（HEX）: #RRGGBB 形式。例:
#ff0000は赤。短縮形として#rgb（例:#f00）も使用できます。 - RGB関数:
rgb(255, 0, 0)やアルファを含むrgba(255, 0, 0, 0.5)。 - HSL関数: 色相・彩度・明度で指定する
hsl(0, 100%, 50%)（赤）。 - 色名: 多くの一般的な色は、一般的な英語の名前で選ぶこともできます（例:
red,blue,lightseagreen）。
実務では、カラーツールなどのグラフィックソフトを使って色の値を作成することが多く、CSSにコピーペーストして使います。また、近年はアルファ（透明度）や拡張された16進形式（#RRGGBBAA）もサポートされるようになっています。
歴史的背景と色名の由来
MosaicとNetscape Navigatorの最初のバージョンでは、カラーリストのベースとしてX11のカラー名を使用していました。これは、どちらも X Window System アプリケーションとしてスタートしたからです。その名残で、いくつかの古い色名やスペル（例えば gray と grey の扱いなど）が歴史的に残っています。現代のブラウザは CSS Color Module に従い、標準化された色名セットや追加の色空間（例えば lab()）に対応しつつあります。
sRGB とカラーマネジメント
各ウェブカラーには、sRGBという独自の定義があります。これは、単一の蛍光体セット、与えられた伝達曲線（ガンマ）、適応ホワイトポイント（D65）、および表示条件の色度に関係しています。sRGB は、一般消費者向けの多くの実世界のモニターや表示条件に近いものになるように設計された色空間です。
カラーマネージメントがない環境でも、指定した色は大まかに期待通りに表示されますが、色の忠実度はデバイスや設定によって変化します。優れたユーザーエージェント（ブラウザ）は、ICCプロファイルなどのカラーマネジメントを使用して、より正確なカラー表示を行います。特に印刷物へ正確に再現する必要がある Web-to-print のような用途では、カラーマネジメントが重要になります。
実務での注意点と最新の仕様
- ガンマ差と明るさ: sRGB は非線形（ガンマ補正あり）なので、数値をそのまま線形合成すると見た目が期待と異なることがあります。影やグラデーションの計算では注意が必要です。
- デバイス差: モニターの色域（sRGB、Adobe RGB、DCI-P3 など）やキャリブレーションの違いにより同じ数値でも見え方が変わります。重要な色は色見本（校正印刷）で確認するのが望ましいです。
- アクセシビリティ: 色だけで情報を伝えない、コントラスト比（WCAG）を満たすなど、視認性や可読性を考慮してください。
- 最新の CSS 機能: CSS Color Module には、幅広い色関数（
rgb(),hsl(),lab(),lch()など）や拡張 HEX（アルファ付き）などが含まれ、より正確な色指定が可能になっています。
まとめ（実務チェックリスト）
- 色を指定する際は sRGB を基準に考える（ブラウザの標準）。
- HEX、rgb()、hsl() のいずれかで一貫して管理する。チームでルールを決めると良い。
- 重要な色はキャリブレーション済みモニターや印刷見本で確認する。
- アクセシビリティ（コントラスト、情報の伝え方）を必ずチェックする。
ろっかさんぷく
16進数トリプレットとは、HTMLやCSS、SVGなどのコンピュータプログラムで色を表すために使用される6桁の3バイトの数字のことです。バイトは色の赤、緑、青の部分を表します。1バイトは、00からFFまでの範囲の数字を表し、10進法では0から255までの数字を表します。これは、各色成分の最小（0）から最大（255）までの強度を表します。16進数トリプレットは、以下の順序で16進数表記で3つのバイトを連結して形成されます。
バイト１：赤の値（カラータイプ赤
バイト２：緑色の値（色は緑色タイプ
バイト３：青色の値（カラータイプ青
例えば、赤/緑/青の値が10進数である赤=36、緑=104、青=160（灰色がかった青）の色を考えてみましょう。10進数の36、104、160はそれぞれ24、68、A0に似ています。16進数のトリプレットは、16進数の6桁の数字を組み合わせて得られます（この例では2468A0）。
HTMLウェブカラー
1997年に制定され、当初は16色ありましたが、後にオレンジを加えて全17色になりました。後にオレンジが追加され、全17色になりました。元々の16色は「Windows VGAテンプレート」と呼ばれるものの一部であり、ハイライトなどのアクションに使用できる色であることを意味しています。[]
| カラー | 十六進法 | カラー | 十六進法 | カラー | 十六進法 | カラー | 十六進法 |
| #00FFFF | #808080 | ネイビー | #000080 | 銀 | #C0C0C0C0 | ||
| 黒 | #000000 | #008000 | #808000 | ティール色 | #008080 | ||
| #♪0000FF | #00FF00 | 紫 | #800080 | 白 | #＃ＦＦＦＦＦＦＦＦ | ||
| #＃ＦＦ０００ＦＦＦ | マルーン | #800000 | #＃FF0000 | 黄色い | #＃ＦＦＦＦＦＦ０００ |
HTMLの色を後から追加
| カラー | 十六進法 |
| #FFA500 |
エックス十一色
1991年のWorld Wide Webの発明以来、これらは「X11ウェブカラー」と呼ばれています。
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
選択されたウェブカラーのチャート
この表は、2002年以降にウェブデザイナーによって開発されたHTMLとX11の色と、非公式なコンセンサスウェブカラーを示しています。非公式色を使ってコードを入力する際には、色の名前を書くのではなく、その色の16進数コードを指定する必要があります。
| · みる · 話す · へんしゅう ウェブカラー（一覧 | |||||||||||||||
| ホワイト | 銀 | 黒 | ネイビー | スカイブルー | ターコイズ | 紺碧 | ティール色 | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 黄色い | 褐色 | 橙赤 | マルーン | 薔薇 | ピンク色 | 紫 | |||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| アイボリー | 菫色 | 桃 | アプリコット | 黄土色 | プラム | ||||||||||
|
|
|
|
|
|
|
| |||||||||
質問と回答
Q:ウェブカラーとは何ですか?
A:ウェブカラーとは、ウェブページをデザインする際に使用される色と、その色の表現方法、一覧性のことです。
Q:RGB3色で何種類の色を作ることができるのか?
A:RGBの3連色で16,777,216色の色を作ることができます。
Q:これらの色には、一般的な英語名があるのですか?
A:はい、多くの一般的な色は、一般的な英語名で選ぶこともできます。
Q:色彩値を作成するには、通常どのようなソフトウェアを使用するのですか?
A:多くの場合、カラーツールやその他のグラフィックソフトを使用して色値を作成します。
Q:オリジナルのMosaicやNetscape Navigatorのカラーリストのベースは何だったのですか?
A: MosaicとNetscape Navigatorの最初のバージョンは、どちらもX Window Systemのアプリケーションとして始まったので、X11カラーネームをカラーリストのベースとして使用しました。
Q: Webの色について、sRGBは何と関係があるのですか?
A: それぞれのウェブカラーは、単一の蛍光体セットの色度、与えられた伝達曲線、適応的なホワイトポイント、および視聴条件に関連するsRGBという独自の定義を持っています。
Q: ユーザーエージェントはどのようにしてこれらの色を正確に表示するのですか?
A: より良いユーザーエージェントは、Web-to-printアプリケーションにとって重要な、より良い色の忠実度を作り出すためにカラーマネージメントを使用しています。
