ウェブカラーとは、ウェブページをデザインする際に使用される色と、その色を記述したり一覧にしたりする方法のことです。画面上でどの色を表示するかを数値や名前で指定する仕組み全般を指し、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() のいずれかで一貫して管理する。チームでルールを決めると良い。
- 重要な色はキャリブレーション済みモニターや印刷見本で確認する。
- アクセシビリティ(コントラスト、情報の伝え方)を必ずチェックする。