このエントリーをはてなブックマークに追加
CSSにおける色の表現
CSSでは背景やフォントなどの「色」を設定することがあります。
色を表現する方法は様々ですが、このページではCSSで使用される色の表現方法を解説します。

色の名前で指定する

あらかじめ定義された色を名前で直接指定する方法です。
最も簡単な方法ですが、色の微調整ができないという欠点があります。
color: red;
使用できる色の名前については下記のページを参照してください。
HTML・CSSで使用するカラーネーム・カラーコード一覧

16進数RGBで指定する

RGBを6桁もしくは3桁の16進数で表記したカラーコードで指定する方法。
color: #FF8822;
color: #F82;
6桁表記の場合は左から順に2桁づつの16進数で赤・緑・青を表しています。
3桁表記は6桁表記の各パラメータを2桁から1桁に省略したもので、#F82は#FF8822と同じ値を表しています。

#FF8822はFFが赤、88が緑、22が青を表しており、それぞれ10進数に変換して
FF(16進数) = 255(10進数)
88(16進数) = 136(10進数)
22(16進数) = 34(10進数)
となり、#FF8822が赤255・緑136・青34のRGBを表している事がわかります。

なお、RGBと16進数カラーコードの相互変換は下記のページで簡単にできます。
RGBと16進数カラーコードの相互変換ツール

RGBで指定する

色をRGBで直接指定する方法です。
color: rgb(255,136,34);
color: rgb(100%,50%,25%);
カッコ内の数字は左から順に赤・緑・青を表しています。
数値は0~255の範囲で表記する方法と、0%~100%のパーセンテージで表記する方法があります。

また、CSS3ではRGBに透明度を加えたRGBAの指定もできるようになりました。
border-top-color: rgba(255,136,34,0.5);
RGBの後ろに付いているのが透明度です。
透明度は0~1.0の範囲で表記します。

HSLで指定する

色を色相・彩度・輝度の3要素で表現する「HSL」という形式で表記する方法です。
HSLの詳細については下記のページにて解説しています。
HSL色空間とは
color: hsl(320,70%,20%);
color: hsla(320,70%,20%,0.4);
HSLは左から色相・彩度・輝度を表しており、色相は0~360、彩度と輝度は0%~100%の値で設定します。
また、RGBAのようにHSLの後ろに透明度を加えたHSLAの指定も可能です。透明度は0~1.0の範囲で表記します。

なお、RGBとHSLの相互変換は下記のページにておこなえます。
RGBとHSLの相互変換ツール
アクセスランキング