CSSでは同じ色を少なくとも3通りの異なる方法で書くことができ、それぞれがデザインから透明度のアニメーションまで、異なる用途に便利だ。
HEX：コピー&ペーストに便利なコンパクトな表記
#FF5733のような16進表記は、赤・緑・青の3チャンネルをそれぞれ2文字でコード化する。デザインのモックアップからコピーするのに便利な最もコンパクトな形式だが、人間にとってはほぼ判読不能だ——数字の並びからどんな色合いなのか一目で理解するのは難しい。
RGB：各チャンネルへの直接アクセス
rgb(255, 87, 51)は同じ3チャンネルを0から255までの10進数で表す。JavaScriptのアニメーションで赤を段階的に増やすなど、特定のチャンネルをプログラムで操作する必要があるときに便利だ。
HSL：直感的な色合いの選択
HSLは色相（hue、0〜360°）、彩度、明度で色を表現する。手動で色を選ぶには最も便利な形式だ：同じ色相のより暗いバージョンを得るには、RGBの3チャンネルをすべてゼロから計算し直すことなく、明度だけを下げればよい。
透明度のためのアルファチャンネル
rgba()とhsla()形式は4番目のパラメータ——0から1までの不透明度——を追加する。モダンなCSSでは、末尾に2文字を追加することでHEXでも透明度を指定できる。例えば#FF573380のように。
なぜ必要なのか
- デザインのモックアップから色を素早く必要なCSS形式に変換する。
- HSLを使って同じ色のより暗い、あるいはより明るい色合いを選ぶ。
- ベースとなる色相を変えずに、色に透明度を追加する。
「青信号」はなぜ緑色なのか
このツールのHSLスライダーで色相環を回すと、青（およそ240°付近）と緑（およそ120°付近）は色相環上でまったく別の位置にある。ところが日本語では、信号機の green light を今でも「青信号」と呼ぶ。これは単なる言い間違いではなく、古語の「青（あお）」がもともと現在の青と緑の両方を指す広い言葉だったことの名残だ。「青葉」「青りんご」「青虫」のように、視覚的には緑色のものを「青」と呼ぶ表現は今も日常語に残っている。1930年代に日本で信号機が導入された当初、法令上は「緑信号」と表記されていたが、口語ではすでに「青信号」と呼ばれており、最終的に呼称のほうが定着して公式文書にも採用された。HEXやRGBのように色を数値で厳密に分離する現代の配色ツールと、色を大きなカテゴリでまとめて捉える伝統的な言葉の感覚は、必ずしも一致しない。