CSSにおける色の表現
CSSでは背景やフォントなどの「色」を設定することがあります。
色を表現する方法は様々ですが、このページではCSSで使用される色の表現方法を解説します。
色を表現する方法は様々ですが、このページではCSSで使用される色の表現方法を解説します。
色の名前で指定する
最も簡単な方法ですが、色の微調整ができないという欠点があります。
color: red;
使用できる色の名前については下記のページを参照してください。■ HTML・CSSで使用するカラーネーム・カラーコード一覧
16進数RGBで指定する
color: #FF8822;
color: #F82;
6桁表記の場合は左から順に2桁づつの16進数で赤・緑・青を表しています。color: #F82;
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を表している事がわかります。88(16進数) = 136(10進数)
22(16進数) = 34(10進数)
なお、RGBと16進数カラーコードの相互変換は下記のページで簡単にできます。
■ RGBと16進数カラーコードの相互変換ツール
RGBで指定する
color: rgb(255,136,34);
color: rgb(100%,50%,25%);
カッコ内の数字は左から順に赤・緑・青を表しています。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で指定する
HSLの詳細については下記のページにて解説しています。
■ HSL色空間とは
color: hsl(320,70%,20%);
color: hsla(320,70%,20%,0.4);
HSLは左から色相・彩度・輝度を表しており、色相は0～360、彩度と輝度は0%～100%の値で設定します。color: hsla(320,70%,20%,0.4);
また、RGBAのようにHSLの後ろに透明度を加えたHSLAの指定も可能です。透明度は0～1.0の範囲で表記します。
なお、RGBとHSLの相互変換は下記のページにておこなえます。
■ RGBとHSLの相互変換ツール
関連コンテンツ
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。