CSS 色指定の定義方法

RGB(#XXXXXX)の書き方

1. 16進数（Hex）との相互変換のコツ

RGBの各値（0〜255）は、16進数（00〜FF）と対応しています。
特に**「同じ数字の並び」**を覚えると、コードを書くスピードが上がります。
無彩色（グレー系）の法則: R=G=B が同じ数値なら必ずグレーになります。
rgb(50, 50, 50)：濃いグレー
rgb(200, 200, 200)：薄いグレー
Web安全色のショートカット: #336699 のような16進数は、RGBだと rgb(51, 102, 153) になります（51の倍数）。

2. 色を「明るく」または「暗く」する計算術

HSLを使わずにRGBだけで明度を調整する場合、比率を意識します。
明るくする: 各値を同じ比率で255に近づける。
例：rgb(100, 0, 0)（暗い赤） → rgb(200, 100, 100)（明るい赤）
コツ：元の色に「白 rgb(255, 255, 255)」を混ぜるイメージです。
暗くする: 各値を同じ比率で0に近づける。
例：rgb(0, 255, 255)（シアン） → rgb(0, 128, 128)（深緑に近いシアン）
コツ：各値を半分（0.5倍）にすると、色味を保ったまま暗くできます。

3. 加法混色の仕組みを利用する

RGBは「光の三原色」なので、混ぜると明るくなります。この関係を知っておくと、微調整がスムーズです。
補色（反対の色）の見つけ方: 255から今の値を引くと、その色の反対色（補色）が作れます。
元の色：rgb(255, 0, 0)（赤）
補色：rgb(0, 255, 255)（シアン） ※ 255 – 255 = 0, 255 – 0 = 255
黄色を作りたいとき: 「赤」と「緑」を最大にします。 rgb(255, 255, 0)

4. モダンな「カンマなし」記法と透明度

最新のCSSでは、rgba() を使わなくても rgb() だけで透明度が扱えます。
CSS /* 従来の書き方 */ background-color: rgba(255, 0, 0, 0.5);
/* モダンな書き方（スペース区切り） */
background-color: rgb(255 0 0 / 0.5);
この「スラッシュ区切り」の記法は、後述する CSS変数（カスタムプロパティ） と非常に相性が良いです。

HSLA(Hue,Saturation,Lightness,Alpha)の書き方

HSLAは、直感的に色を調整できる非常に便利な指定方法です。
RGB（赤・緑・青）が「光の混ざり具合」で考えるのに対し、HSLAは**「色味、鮮やかさ、明るさ」**という人間が色を感じる要素で指定します。

HSLAの基本書式CSSでは次のように記述します。
hsla(H, S, L, A)各パラメータの意味と範囲は以下の通りです。
1. H: Hue（色相）
色の種類を0〜360の角度で指定します。カラーホイール（色相環）をイメージしてください。
0 or 360: 赤120: 緑240: 青（単位の deg は省略可能です）
2. S: Saturation（彩度）
色の鮮やかさを**0%〜100%**で指定します。100%: 最も鮮やか（純色）0%: 完全にくすんだ色（灰色）
3. L: Lightness（輝度/明度）
色の明るさを**0%〜100%**で指定します。100%: 真っ白50%: 最もきれいに発色する状態0%: 真っ黒
4. A: Alpha（不透明度）
色の透け具合を0〜1、または**0%〜100%**で指定します。1 (100%): 完全に不透明0.5 (50%): 半透明0 (0%): 完全に透明

色の直接指定