第1回：ウェブにおける色の基礎（2025年最新版）
（2025年最新・実践ガイド）
はじめに：
ウェブデザインにおいて「色」は、見た目だけでなく、使いやすさやブランドイメージに直結する重要な要素です。本記事では、最新のウェブ制作トレンドと実務に即した色指定方法を、分かりやすく解説します。
色の種類
ウェブサイトで使われる色には主に2種類があります。
- コード（CSS等）で指定する色
- 画像素材そのものに含まれる色
本記事では「コードで指定する色」を中心に説明します。
コードで指定する色の活用範囲
CSS等で指定した色は、背景色・文字色・ボーダー・シャドウ・内発光・ボタン・リンクなど、ほぼすべてのウェブ要素に使われます。
単色（ソリッドカラー）もグラデーションも指定可能です。
色の指定方法（2025年最新版）
| 指定方法 | 書き方例 | 特徴 |
|---|---|---|
| 16進数（hex） | #FF0000 | 最も普及、約1,600万色を表現可 |
| rgb/rgba | rgb(255,0,0)rgba(255,0,0,0.8) | 直感的、透明度も指定可 |
| カラー名 | red black | 手軽だが色数限定 |
| hsl/hsla | hsl(0,100%,50%) | 色相環で調整しやすい |
| color()関数 | color(srgb 1 0 0)color(display-p3 1 0 0) | CSS4以降、広色域や最新デバイス対応 |
【補足】主要な色指定方法の解説
1. 16進数（hex）表記
例：#FF0000（赤）
→ 赤成分が最大値（FF＝255）、他は0。
→ 3色すべて最大（#FFFFFF）は白、すべて0（#000000）は黒。
約1,600万色の表現が可能。
2. rgb/rgba表記
例：rgb(255,0,0)（赤）、rgba(255,255,0,0.8)（80%不透明な黄色）
→ 0～255の数値指定。
→ rgbaは透明度も指定可能。
3. カラー名（color name）表記
例：white、black、gray など
→ CSSで147色が標準定義（使える色は限定的）。
4. hsl/hsla表記
例：hsl(0, 100%, 50%)（赤）
→ H（色相 0～360°）、S（彩度 0～100%）、L（明度 0～100%）
→ hslaは透明度も指定可能。
5. color()関数【最新】
例：color(srgb 1 0 0)（赤）、color(display-p3 1 0 0)（広色域の赤）
→ CSS4以降でサポート。
→ 最新のデバイスや高色域ディスプレイにも対応。
色の取得・選定方法
- Figma・Photoshop等のカラーピッカー
- オンラインツール（「カラーピッカー」で検索）
- スクリーンショットやペイントツールで調査
- デザインシステムで用意されたカラーパレット
アクセシビリティへの配慮【必須】
- テキストと背景のコントラスト比は「4.5:1以上」が推奨（WCAG基準）
- 色だけで情報を伝えない（必ずアイコンやテキスト併用）
- 色覚バリアフリーを意識した設計が標準
ダークモード対応（推奨実装）
近年はダークモード対応が標準です。
ユーザー環境に応じて、自動で色を切り替えることが推奨されます。
@media (prefers-color-scheme: dark) {
body { background: #222; color: #eee; }
}
CSSカスタムプロパティ（変数）を使うと、色変更やダークモード対応も容易です。
カラーマネジメントとデザインシステム
・主要カラーをCSS変数で一元管理
例：
root { --main-color: #333; --accent-color: #FF8A00; }・サイト全体の一貫性やメンテナンス性が大幅向上
・ダークモード・ブランドリニューアル等にも柔軟に対応可能
まとめ
- 色指定は「hex」「rgb」「hsl」「color()」など多様化
- アクセシビリティやダークモードは現代の必須要件
- デザインシステムやカラーパレットを活用し、管理・表現の幅を広げよう
- 誰にとっても見やすく使いやすいサイト作りが、これからのスタンダード
参考リンク（2025年最新版・日本語）
Colorable – コントラスト比チェッカー
MDN Web Docs – CSSの色
W3C – CSS Color Module Level 4