カラーコードには複数の表し方がある

Webで色を指定する方法は1つではありません。同じ「赤」でも #FF0000、rgb(255,0,0)、hsl(0,100%,50%) と複数の書き方があります。それぞれ得意な場面が違うので、使い分けを知っておくとデザイン作業がぐっと楽になります。

3つの形式の違い

形式	例（赤）	仕組み	得意なこと
HEX	`#FF0000`	RGBを16進数で表記	簡潔。コピペしやすい
RGB	`rgb(255,0,0)`	光の三原色の混合	値の意味が分かりやすい
HSL	`hsl(0,100%,50%)`	色相・彩度・明度	色の調整がしやすい

# に続く6桁で、赤・緑・青を各2桁（00〜FF）で表します。最も普及していて、デザインツールからコピーする値もたいていHEXです。#FFF のような3桁の短縮形もあります。

rgb(赤, 緑, 青) で、各色を0〜255で指定します。「光を混ぜると明るくなる」加法混色です。値が直感的なので、プログラムで色を生成するときに扱いやすいのが特徴です。

hsl(色相, 彩度, 明度) で表します。色を調整したいときに最も便利な形式です。

「同じ色のまま少し暗くしたい」というとき、HSLなら明度の数値を下げるだけで済みます。HEXやRGBでは計算が必要なので、テーマカラーの濃淡バリエーション作りに向いています。

色に透明度を加えるには、末尾にアルファ値（0〜1、0が完全透明）を足します。

rgba(255, 0, 0, 0.5)   /* 半透明の赤 */
hsla(0, 100%, 50%, 0.5)
#FF000080              /* HEXは末尾2桁で透明度（80=約50%） */

影や重なり表現で透明度を使うと、自然な仕上がりになります。

3形式は同じ色を別の表記で表しているだけなので、相互に変換できます。手計算は面倒なので、カラーコード変換ツールを使えばHEX・RGB・HSLを一括で変換できます。画面から色を選びたいときはカラーピッカーが便利です。

文字色と背景色の組み合わせを決めたら、読みやすさ（アクセシビリティ）をコントラストチェッカーで確認しておくと安心です。