CSSカラー：色の指定方法と仕組み

1. 16進数（Hexコード）

基本は #RRGGBB ですが、末尾に2桁足すことで透明度（Alpha）も指定できます。

color: #FF0000; /* 不透明の赤 */
color: #FF000080; /* 半透明の赤（80は16進数で約50%） */

16進数での透過デモ

#....FF(100%)
#....99(60%)
#....33(20%)

2. RGBA 指定

赤・緑・青を 0?255、透明度を 0～1 で指定します。直感的に数値をいじりやすい方法です。

background: rgba(44, 94, 107, 0.5); /* 透明度50% */

3. HSLA 指定（直感的な色調整）

H（色相：0～360）、S（彩度：%）、L（輝度：%）、A（透明度：0～1）で指定します。

background: hsla(190, 50%, 30%, 0.8);

メリット：「同じ色味で少し明るくしたい（Lを変更）」「少し鮮やかにしたい（Sを変更）」といった調整が、他の数値を動かさずにできるため、デザイナーにとって非常に便利な形式です。

基本色
明るく(L↑)
くすませる(S↓)

まとめ：どの形式を使うべき？

形式主な特徴
16進数 (#)コードが短く、色見本サイトからコピーしやすい。透過も8桁で対応可能。
RGBA光の三原色の感覚で調整しやすい。透過指定の定番。
HSLA色相・鮮やかさ・明るさを個別に制御できる。色のバリエーション作成に最適。

補足：opacity プロパティとの違い

CSSには opacity プロパティもありますが、これは「中身の文字までまるごと透明にする」という特徴があります。