CSS カラー値

JPKODA 編集部 May 6, 2026

カラー（色）はWebデザインの根幹を成す要素であり、ユーザーエクスペリエンス（UX）に影響を与え、ブランドアイデンティティを伝える重要な役割を担っています。

本章では、CSSで使用可能なさまざまなカラー値のフォーマットについて詳しく解説します。Hexコード、RGB、RGBA、HSL、HSLAといった各フォーマットの構文、使用方法、メリットを網羅し、あなたのスタイリング要件に最適な手法を選択できるようガイドします。

1. カラー値を理解する

CSSにおいてカラー値は、テキスト、背景、ボーダーなど、さまざまな要素の色を指定するために使用されます。CSSはカラーを表現するための複数のメソッドを提供しており、それぞれに独自の利点とユースケースがあります。これらの手法を使い分けることで、デベロッパーは色彩を精密にコントロールすることが可能になります。

1.1 Hexコード（16進数コード）

Hexコードは、カラーの16進数（Hexadecimal）表現です。ハッシュ（#）の後に6つの16進数（0-9 および A-F）を続けて記述します。最初の2桁がレッド（R）、次の2桁がグリーン（G）、最後の2桁がブルー（B）を表します。

構文: #RRGGBB
例: #FF0000 (赤), #00FF00 (緑), #0000FF (青), #FFFFFF (白), #000000 (黒)

解析:

#FF0000: レッドの位置にある「FF」は赤の最大強度を意味し、グリーンとブルーが「00」に設定されているため、純粋な赤になります。
#336699: これは一種のブルーです。各ペア（33, 66, 99）がそれぞれ赤・緑・青の強度を表します。値が低いほど暗いシェード（陰影）になり、高いほど明るいシェードになります。

短縮Hexコード:
各ペアの数字が同じ場合（例：#FF00AA）、3桁の短縮バージョン（例：#F0A）を使用できます。これは #FF00AA と等価です。

構文: #RGB
例: #F00 (赤 - #FF0000と同等), #0F0 (緑 - #00FF00と同等), #00F (青 - #0000FFと同等)

メリット:

すべてのブラウザで広くサポートされている。
記述が比較的コンパクト。

デメリット:

カラーピッカーなどのツールがないと、直感的に色を理解・修正するのが難しい。
透明度を直接サポートしていない（8桁のHexコードもあるが、RGBAに比べると互換性がわずかに劣る場合がある）。

1.2 RGB

RGB（Red, Green, Blue）は、赤・緑・青の光の組み合わせとしてカラーを表現するカラーモデルです。CSSでは rgb() 関数を使用して指定します。この関数は、各カラー成分の強度を表す3つの整数値（0-255）またはパーセンテージ値（0%-100%）を引数として受け取ります。

構文: rgb(red, green, blue)
例: rgb(255, 0, 0) (赤), rgb(0, 255, 0) (緑), rgb(0, 0, 255) (青)

解析:

rgb(255, 100, 0): これはオレンジ色を指定しています。赤が最大強度の255、緑が100、青が0です。赤と緑を混ぜることで、オレンジのトーンが生成されます。
rgb(128, 128, 128): 3つの値がすべて等しく、最大値の約半分であるため、結果はグレーになります。

メリット:

数値を混ぜることに慣れているデベロッパーにとっては、Hexコードよりも直感的。
すべてのブラウザで広くサポートされている。

デメリット:

透明度を直接サポートしていない（RGBAを使用する必要がある）。

1.3 RGBA

RGBA（Red, Green, Blue, Alpha）はRGBカラーモデルの拡張版で、カラーの透明度を指定するためのアルファチャンネル（Alpha channel）が含まれています。アルファ値の範囲は 0.0（完全な透明）から 1.0（完全な不透明）までです。

構文: rgba(red, green, blue, alpha)
例: rgba(255, 0, 0, 0.5) (50%の透明度の赤), rgba(0, 255, 0, 0.2) (20%の透明度の緑)

解析:

rgba(0, 0, 0, 0.7): 70%の不透明度の黒。要素は暗く見えますが、その背後にあるものが透けて見えます。
rgba(255, 255, 255, 0.3): 30%の不透明度の白。半透明の白いオーバーレイを作成します。

メリット:

透明度をサポートしており、レイヤー効果や繊細なビジュアルデザインが可能。
依然として比較的直感的。

デメリット:

RGBに比べるとサポートがわずかに少ない（非常に古いブラウザでは動作しない可能性があるが、モダンな開発では通常無視できるレベル）。

1.4 HSL

HSL（Hue, Saturation, Lightness）は、色相、彩度、明度に基づいてカラーを表現するモデルです。

Hue（色相）: カラーホイール上の位置（0-360度）。0は赤、120は緑、240は青です。
Saturation（彩度）: カラーの強度（0%-100%）。0%はグレースケール（無彩色）、100%は完全な彩和です。
Lightness（明度）: カラーの明るさ（0%-100%）。0%は黒、100%は白、50%が標準的な明るさです。
構文: hsl(hue, saturation, lightness)
例: hsl(0, 100%, 50%) (赤), hsl(120, 100%, 50%) (緑), hsl(240, 100%, 50%) (青)

解析:

hsl(39, 100%, 50%): 明るいオレンジ色。色相を39度（オレンジ）、彩度100%、明度50%に設定しています。
hsl(120, 30%, 70%): 柔らかな薄緑色。色相120（緑）、彩度30%（低強度）、明度70%（やや明るめ）。

メリット:

色彩理論に慣れているデザイナーやアーティストにとって非常に直感的。
色相、彩度、または明度を調整するだけで、カラーのバリエーション（例：ホバー時のトーンを少し暗くするなど）を簡単に作成できる。

デメリット:

RGBやHexに慣れているデベロッパーにとっては、最初は馴染みが薄い可能性がある。
透明度を直接サポートしていない（HSLAを使用する必要がある）。

1.5 HSLA

HSLA（Hue, Saturation, Lightness, Alpha）はHSLカラーモデルの拡張版で、透明度を指定するためのアルファチャンネルが含まれています。

構文: hsla(hue, saturation, lightness, alpha)
例: hsla(0, 100%, 50%, 0.5) (50%の透明度の赤)

解析:

hsla(270, 50%, 50%, 0.6): 60%の不透明度の紫。
hsla(60, 100%, 50%, 0.4): 40%の不透明度の明るい黄色。

メリット:

HSLの直感性と、透明度をコントロールする能力を兼ね備えている。
視覚的に魅力的なエフェクトの作成に適している。

2. 実戦例とデモンストレーション

さまざまなカラー値を使用して、div要素にスタイルを適用してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カラー値の例</title>
<style>
  .color-box {
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 1px solid black;
    display: inline-block; /* ボックスを水平に並べる */
    color: white; /* テキストの可読性を確保 */
    padding: 10px;
    font-family: sans-serif;
  }
  
  .hex-example {
    background-color: #ADD8E6; /* ライトブルー (Hex) */
    color: black;
  }
  
  .rgb-example {
    background-color: rgb(255, 165, 0); /* オレンジ (RGB) */
  }
  
  .rgba-example {
    background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 (RGBA) */
  }
  
  .hsl-example {
    background-color: hsl(120, 100%, 50%); /* 緑 (HSL) */
  }
  
  .hsla-example {
    background-color: hsla(240, 100%, 50%, 0.7); /* 半透明の青 (HSLA) */
  }
</style>
</head>
<body>
  <div class="color-box hex-example">Hex: #ADD8E6</div>
  <div class="color-box rgb-example">RGB: rgb(255, 165, 0)</div>
  <div class="color-box rgba-example">RGBA: rgba(255, 0, 0, 0.5)</div>
  <div class="color-box hsl-example">HSL: hsl(120, 100%, 50%)</div>
  <div class="color-box hsla-example">HSLA: hsla(240, 100%, 50%, 0.7)</div>
</body>
</html>

このコードは5つのdiv要素を作成し、それぞれ異なるカラー値フォーマットでスタイリングを行っています。実際の結果を確認することで、各フォーマットの効果を直感的に理解できるはずです。