はじめに
この文書の目的
この文書は、Webページでの色の指定と表示方法をやさしく解説します。主にCSSで使う色の表し方や、色の基礎的な考え方、標準化された色名について説明します。
対象読者
Web制作に関心がある方、デザインの基本を学びたい方、初めてCSSで色を扱う方を想定しています。専門用語は最小限にし、具体例で補足します。
本書で学べること
- CSSでの色指定の代表例（例: #ff0000、rgb(255,0,0)、”red”）
- 色の基本概念（RGBなどの考え方）
- 標準化された色名と使いどころ
色が重要な理由（簡単な例）
色は読みやすさや操作のしやすさに直結します。例えば背景を白、文字を#333333とするだけで可読性が大きく向上します。ブランドの印象や操作の誘導にも役立ちます。
読み方と注意点
各章では、実際の記述例を示しながら説明します。色の見え方は端末や環境で変わる点にご注意ください。
Web color basics
概要
Web colorsは、ウェブページの文字や背景の色を指定するための方法です。CSSで定義され、名前付き色、16進数（hex）、関数表記などの形式があります。初心者でも扱いやすい表記が多く、実務でも広く使われます。
主な表記形式と例
- 名前付き色：英語の名前で指定します。例: color: red;（赤）
- 16進数（hex）：#で始まる6桁や3桁の値を使います。例: #FF0000、短縮形 #F00
- RGB/RGBA：rgb(255, 0, 0) や rgba(255, 0, 0, 0.5)（透明度を指定）
- HSL/HSLA：hsl(0, 100%, 50%) や hsla(…)（色相・彩度・明度で指定）
- color()構文：色空間を明示して指定できる新しい方法です（高度な用途向け）。
使うときのポイント
- 透明度が必要ならRGBAかHSLA、あるいは8桁hex（#RRGGBBAA）を使います。
- hexや名前はブラウザ互換性が高く、学習が簡単です。
- 色の読みやすさ（コントラスト）を考えて選ぶと、見やすいデザインになります。
実際のCSS例
body { background-color: #F8F8F8; color: #333; }
.button { background: linear-gradient(#FF7A7A, #FF4D4D); }
上の表記を覚えると、ほとんどの色指定ができるようになります。
Hex and RGB
Hexコードの仕組み
16進数のカラーコードは「#RRGGBB」の形式で書きます。RR・GG・BBはそれぞれ赤・緑・青の強さを示す16進数の2桁（00〜FF）です。たとえば #FF0000 は赤が最大、緑と青が0で純粋な赤になります。#000000 が黒、#FFFFFF が白です。
3桁表記と変換
短く書く #RGB の形式もあり、各文字を2回繰り返して展開します。たとえば #F00 は #FF0000 と同じです。16進数を10進数に直すと0〜255の範囲になります。例：#1A2B3C → R=0x1A=26、G=0x2B=43、B=0x3C=60。
RGB表記と割合
CSSでは rgb(r, g, b) という書き方も使えます。ここで r, g, b は0〜255の整数か、0%〜100%の割合で指定できます。たとえば rgb(255, 0, 0) は #FF0000、rgb(100%, 0%, 0%) も同じ赤です。
色の混ぜ方（加法混色）
ディスプレイは光の三原色（赤・緑・青）を異なる強さで足し合わせて色を作ります。値を大きくするとその成分の光が強くなり、明るい色になります。したがって3つの値の組み合わせで数百万色を表現できます。
実用的なヒント
- 色を正確に指定したいときは16進かRGBどちらか一方に統一すると扱いやすいです。
- 複数色の微調整はRGBの数値を少し変えて試すと直感的に分かります。
Named and standard colors
概要
標準化された色名は、aqua、navy、silver のような読みやすい名前で色を指定できます。これらは初期のHTMLやVGA、X11といった歴史的な由来を持ち、現代のCSS仕様でsRGB空間内の具体的なRGB値に結び付けられています。
起源と特徴
- 起源：HTMLの初期、PCのVGA表示、UNIX系のX11などで使われてきました。これがウェブの色名の基礎になっています。
- 数：CSSでは約140の標準色名を定義しています。日常の表現に十分な名前が揃っています。
sRGBでの位置づけと互換性
ブラウザは色名を予め決められたsRGBのRGB値に変換します。たとえば、aqua は #00ffff、navy は #000080、silver は #c0c0c0 に対応します。sRGBを基準にしているので、多くのブラウザやデバイスで見た目が揃いやすいです。
実例と使い方
- CSSでは簡単に使えます：
color: navy; background-color: silver; - 素早い試作や読みやすさの確保に便利です。細かな色調整が必要な場合は16進表記（例：#0055aa）やRGB指定を併用してください。
注意点と実務上のポイント
- 名前の数は限られるため、正確なブランドカラーには不向きです。
- モニターの表示設定や色管理の有無で見え方が変わることがありますが、sRGB基準であるため差は小さくなります。
- 可読性を重視する場面では、名前でも16進・RGBでもコントラストを確認してください。
