HTML: HTMLの色
HTMLでの色は複数の方法で表現できます。さまざまな色表現方法をマスターすることで、ウェブデザインのすべてのピクセルを柔軟かつ正確にコントロールできるようになります。
1. 色表現の概要
HTMLとCSSには主に3つの色表現方法があります：色名、16進数、RGB。いずれも色を定義できますが、それぞれに適した使用シーンがあります。
▶ サンプル
HTML
<!-- 3つとも赤い背景を表す -->
<div style="background-color: red;">色名: red</div>
<div style="background-color: #FF0000;">16進数: #FF0000</div>
<div style="background-color: rgb(255,0,0);">RGB: rgb(255,0,0)</div>
2. 色名
HTMLは140以上の標準色名をサポートしています。最もよく使われるものには、red、blue、green、black、white、gray、orange、purple、yellowなどがあります。色名を使うのが最も直感的な方法です ― エンコードルールを覚える必要はありません。
(1) よく使われる色名一覧
| 色名 | 16進数 | RGB | 説明 |
|---|---|---|---|
red |
#FF0000 | rgb(255,0,0) | 赤 |
green |
#008000 | rgb(0,128,0) | 緑（標準） |
lime |
#00FF00 | rgb(0,255,0) | ライムグリーン（明るい緑） |
blue |
#0000FF | rgb(0,0,255) | 青 |
black |
#000000 | rgb(0,0,0) | 黒 |
white |
#FFFFFF | rgb(255,255,255) | 白 |
gray |
#808080 | rgb(128,128,128) | グレー |
silver |
#C0C0C0 | rgb(192,192,192) | シルバー |
orange |
#FFA500 | rgb(255,165,0) | オレンジ |
yellow |
#FFFF00 | rgb(255,255,0) | 黄色 |
purple |
#800080 | rgb(128,0,128) | 紫 |
cyan |
#00FFFF | rgb(0,255,255) | シアン |
magenta |
#FF00FF | rgb(255,0,255) | マゼンタ |
pink |
#FFC0CB | rgb(255,192,203) | ピンク |
brown |
#A52A2A | rgb(165,42,42) | 茶色 |
gold |
#FFD700 | rgb(255,215,0) | 金色 |
navy |
#000080 | rgb(0,0,128) | ネイビーブルー |
teal |
#008080 | rgb(0,128,128) | ティール |
olive |
#808000 | rgb(128,128,0) | オリーブ |
coral |
#FF7F50 | rgb(255,127,80) | コーラル |
tomato |
#FF6347 | rgb(255,99,71) | トマト |
skyblue |
#87CEEB | rgb(135,206,235) | スカイブルー |
violet |
#EE82EE | rgb(238,130,238) | バイオレット |
📌 ヒント：色名はシンプルで直感的なため、簡単なプロトタイピングや学習に最適です。ただし、実運用環境では色名の選択肢が限られており、精度に欠けるため ― 16進数かRGB表記が推奨されます。
3. 16進数（Hex）
16進数の色は # で始まり、#RRGGBB の形式で記述します。RRは赤の値、GGは緑の値、BBは青の値を表し、範囲は 00 から FF（16進数）です。各ペアの数字が同じ場合は、3文字に省略して #RGB と書くこともできます。
(1) よく使われる16進数カラー
| 色 | 16進数 | RGB値 | 説明 |
|---|---|---|---|
| 純粋な赤 | #FF0000 | 255,0,0 | 赤チャンネル最大、他は0 |
| 純粋な緑 | #00FF00 | 0,255,0 | 緑チャンネル最大、他は0 |
| 純粋な青 | #0000FF | 0,0,255 | 青チャンネル最大、他は0 |
| 純粋な黒 | #000000 | 0,0,0 | すべてのチャンネル0 |
| 純粋な白 | #FFFFFF | 255,255,255 | すべてのチャンネル最大 |
| スカイブルー | #87CEEB | 135,206,235 | 薄い青 |
| ダークブルー | #00008B | 0,0,139 | 深い青 |
| コーラル | #FF7F50 | 255,127,80 | オレンジピンク |
| トマト | #FF6347 | 255,99,71 | 赤オレンジ |
| ゴールド | #FFD700 | 255,215,0 | 黄金色 |
| オリーブ | #808000 | 128,128,0 | 暗い黄色 |
| マルーン | #800000 | 128,0,0 | 暗い赤 |
| ネイビー | #000080 | 0,0,128 | 深い青 |
| バイオレット | #EE82EE | 238,130,238 | 紫ピンク |
| ティール | #00CED1 | 0,206,209 | 暗いシアン |
▶ サンプル
HTML
<!-- 6桁の16進数 -->
<div style="background-color: #FF5733;">#FF5733（オレンジ）</div>
<div style="background-color: #33A1FF;">#33A1FF（青）</div>
<div style="background-color: #2ECC71;">#2ECC71（緑）</div>
<!-- 3文字の省略形（各ペアが同じ場合） -->
<div style="background-color: #F00;">#F00 は #FF0000 と同じ（赤）</div>
<div style="background-color: #0F0;">#0F0 は #00FF00 と同じ（緑）</div>
<div style="background-color: #00F;">#00F は #0000FF と同じ（青）</div>
4. RGB と RGBA
rgb(red, green, blue) 関数は0〜255の10進数で赤、緑、青の各チャンネルを表します。16進数と比較して、RGBは人間の直感的な数値理解に近いです。rgba() はRGBにアルファ透明度チャンネルを追加したものです。
(1) RGB値と色の対応
| RGB値 | 色 | 説明 |
|---|---|---|
| rgb(255, 0, 0) | 赤 | 赤チャンネル最大、他は0 |
| rgb(0, 255, 0) | 緑 | 緑チャンネル最大、他は0 |
| rgb(0, 0, 255) | 青 | 青チャンネル最大、他は0 |
| rgb(255, 255, 0) | 黄色 | 赤+緑 |
| rgb(0, 255, 255) | シアン | 緑+青 |
| rgb(255, 0, 255) | マゼンタ | 赤+青 |
| rgb(255, 255, 255) | 白 | すべてのチャンネル最大 |
| rgb(0, 0, 0) | 黒 | すべてのチャンネル0 |
| rgb(128, 128, 128) | グレー | すべてのチャンネル中間 |
| rgb(255, 165, 0) | オレンジ | 赤+部分的な緑 |
| rgb(255, 192, 203) | ピンク | 赤+少量の緑と青 |
| rgb(165, 42, 42) | 茶色 | 暗い赤+少量の緑 |
| rgb(0, 128, 128) | ティール | 緑+青 equally |
| rgb(128, 0, 128) | 紫 | 赤+青 equally |
| rgb(0, 0, 128) | ネイビー | 深い青 |
▶ サンプル
HTML
<div style="background-color: rgb(255, 99, 71);">
rgb(255, 99, 71) ― トマト色
</div>
<div style="background-color: rgb(60, 179, 113);">
rgb(60, 179, 113) ― ミディアムシーグリーン
</div>
<!-- rgbaは透明度を追加。最後のパラメータは0〜1 -->
<div style="background-color: rgba(255, 0, 0, 0.3);">
半透明の赤（不透明度30%）
</div>
<div style="background-color: rgba(0, 0, 255, 0.6);">
半透明の青（不透明度60%）
</div>
5. HSL
hsl(hue, saturation, lightness) は人間の直感により合致したカラーモデルです。Hue（色相）は色の角度（0〜360度）、Saturation（彩度）は強さ（パーセント）、Lightness（明度）は明るさ（パーセント）を表します。同様に、hsla() は透明度をサポートします。
(1) HSL色相環
| 角度 | 色 | HSL値 | 説明 |
|---|---|---|---|
| 0° | 赤 | hsl(0, 100%, 50%) | 色相の起点 |
| 30° | オレンジ | hsl(30, 100%, 50%) | 赤→黄の遷移 |
| 60° | 黄色 | hsl(60, 100%, 50%) | 赤+緑 |
| 90° | 黄緑 | hsl(90, 100%, 50%) | 黄→緑の遷移 |
| 120° | 緑 | hsl(120, 100%, 50%) | 艤相の中点 |
| 150° | 青緑 | hsl(150, 100%, 50%) | 緑→シアンの遷移 |
| 180° | シアン | hsl(180, 100%, 50%) | 緑+青 |
| 210° | スカイブルー | hsl(210, 100%, 50%) | シアン→青の遷移 |
| 240° | 青 | hsl(240, 100%, 50%) | 艤相の終点 |
| 270° | 紫 | hsl(270, 100%, 50%) | 青→赤の遷移 |
| 300° | マゼンタ | hsl(300, 100%, 50%) | 青+赤 |
| 330° | ローズ | hsl(330, 100%, 50%) | マゼンタ→赤の遷移 |
| 360° | 赤 | hsl(360, 100%, 50%) | 起点に戻る |
(2) 彩度と明度の調整
| 調整 | 効果 | 例 |
|---|---|---|
| 彩度100% | 最も鮮やか | hsl(0, 100%, 50%) = 純粋な赤 |
| 彩度50% | より柔らかい | hsl(0, 50%, 50%) = 暗い赤 |
| 彩度0% | グレー | hsl(0, 0%, 50%) = グレー |
| 明度50% | 通常 | hsl(0, 100%, 50%) = 純粋な赤 |
| 明度100% | 完全な白 | hsl(0, 100%, 100%) = 白 |
| 明度0% | 完全な黒 | hsl(0, 100%, 0%) = 黒 |
▶ サンプル
HTML
<!-- HSLの色混合の例 -->
<div style="background-color: hsl(0, 100%, 50%);">
hsl(0, 100%, 50%) ― 純粋な赤
</div>
<div style="background-color: hsl(120, 100%, 50%);">
hsl(120, 100%, 50%) ― 純粋な緑
</div>
<div style="background-color: hsl(240, 100%, 50%);">
hsl(240, 100%, 50%) ― 純粋な青
</div>
<div style="background-color: hsl(200, 80%, 60%);">
hsl(200, 80%, 60%) ― 柔らかな青
</div>
<!-- hslaは透明度を追加 -->
<div style="background-color: hsla(0, 100%, 50%, 0.4);">
hsla(0, 100%, 50%, 0.4) ― 半透明の赤
</div>
💡 デザイナーの選択：HSLはデザイナーにとってより親しみやすいものです。色相を調整するだけでさまざまな色を巡回でき、彩度で鮮やかさを、明度で明るさを調整できます ― 3つの次元で簡単に完全なカラースキームを生成できます。
❓ よくある質問
Q 16進数（
#FF5733）とRGB（rgb(255, 87, 51)）の違いは何ですか？A どちらも同じ色を表していますが、書き方が異なります。16進数は6桁の16進数で、各ペアが赤、緑、青のチャンネル（00-FF）を表します。RGBは3つの0-255の10進数を使用します。16進数はより簡潔（6文字）、RGBはより直感的（値が直接見える）。実際の開発では、16進数がより一般的です。透明度が必要な場合はRGBAを使用します。
Q RGBAはいつ使うのですか？透明度はどのように計算しますか？
A RGBAはRGBにアルファチャンネル（透明度）を追加したもので、値は0（完全に透明）から1（完全に不透明）の範囲です。使用シーン：1）半透明の背景（オーバーレイ、ぼかし効果）；2）画像上のテキストの可読性を高める；3）ホバーツールチップの背景。透明度の計算：
rgba(0, 0, 0, 0.5)は50%透明の黒を意味します。Q HSLはRGBより優れているのですか？
A HSL（色相、彩度、明度）は人間にとってより直感的です。RGBでは望ましい色を得るために3つの値を同時に調整する必要がありますが、HSLでは：1）色相（0-360度）を調整するだけで spectrum全体を巡回できます；2）彩度を調整するだけで鮮やかさを制御できます；3）明度を調整するだけで明るさを制御できます。デザイナーは通常HSLでカラースキームを生成し、開発者は通常RGB/16進数を使用します。
Q 色名に中国語を使うことはできますか？
红色など？A いいえ。HTML/CSSは英語の色名（
red、blue、greenなど）のみをサポートしており、標準的な色名は147個だけです。中国語の色名（红色など）は認識されません。推奨事項：1）シンプルなシナリオでは英語の色名を使用；2）精密さが必要なシナリオでは16進数またはRGBを使用；3）多くの色を管理する場合はCSS変数を使用。色名の限界：異なるブラウザが同じ色名をわずかに異なる場合があります。📖 まとめ
- 色名（例：red、blue）：シンプルで直感的だが、精度に限界がある
- 16進数（例：#FF5733）：ウェブ開発で最も一般的な精密表記
- RGB / RGBA：rgb() は3チャンネルに0〜255を使用、rgba() は透明度を追加
- HSL / HSLA：hsl() は色相/彩度/明度で色を混合、hsla() は透明度を追加
- アルファチャンネル（RGBA/HSLA）は半透明を可能にし、値は0（透明）〜1（不透明）
📝 練習問題
- カラーパレット： 3つの異なる色表現（色名、16進数、RGB）を使って3つの色ブロックを作成してください。各ブロックは100×100pxで、横に並べて表示します。
- 透明度グラデーション： rgba() を使って、背景が完全不透明から完全透明に遷移する水平グラデーション効果を作成してください（ヒント：
background: linear-gradient()を使用）。
