CSSで色を指定するにはどうしますか？

Question

CSSで色を指定するにはどうしますか？

Accepted Answer

CSSはいくつかの色形式を提供しています。これらはすべて同じ色を生成しますが、選択は可読性と透明度が必要かどうかに関わります。

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## HSLがしばしば最も有用な理由

HSLは色を**H**ue（色相、色輪上の0～360°）、**S**aturation（彩度）、**L**ightness（明度）で表現します。これは人間が色をどう考えるかにマッピングされるため、バリエーションが直感的です：

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

より明るい/暗い色合いを生成するのは簡単です。1つの数値を変更するだけです。16進数やrgbでそうするには、すべてのチャネルを再計算する必要があります。

## アルファ/透明度

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

`/ alpha`構文（0 = 透明、1 = 不透明）は、半透明の色を作る方法で、オーバーレイとシャドウに便利です。（注：要素の`opacity`は*全体*の要素を薄くします。子も含めてです。一方、アルファ色はその色だけを薄くします。）

## モダンな形式

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## なぜ重要なのか

形式を知ることで、適切なツールを選べます。16進数/rgbは単発の色に、**HSL/OKLCHはデザインシステムに**（簡単で直感的な色合いの変動）、`/ alpha`構文は透明度に向いています。

HSLは特に、一貫性のあるテーマ対応カラーパレットの構築をはるかに簡単にします。