最終更新日 2021年4月7日

colorプロパティ

colorプロパティは、文字の色を指定します。

CSS3での変更点

・値に、RGBA値、HSL値、HSLA値、transparent、currentColorが追加されました。

初期値	適用先	継承
ブラウザに依存	すべての要素	あり

値	説明
RGB値（16進数）	R、G、Bそれぞれの割合を16進数の2桁で示します。WEBセーフカラーは1桁に省略する事も可能です。
RGB値（10進数）	R、G、Bそれぞれの割合を「0～255」までの10進数の数値で示します。
RGB値（%）	R、G、Bそれぞれの割合をパーセント値で示します。
RGBA値（10進数）	RGB値の10進数表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。
RGBA値（%）	RGB値のパーセント表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。
HSL値	H（色相）S（彩度）L（明度）という3つの属性を使って色を表す方法です。H（Hue:色相）は、色を環状で表す色相環の角度を示す数値で指定します。0は赤、120は緑、240は青になります。S（Saturation:彩度）は、色の鮮やかさをパーセント値で指定します。100%は彩度がもっとも高い純色で、0%は彩度のない無彩色です。L（Lightness:明度）は、色の明るさを0%～100%までのパーセント値で指定します。50%は純色を示します。
HSLA値	HSLの表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。
基本色	CSS3で定義されている、black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aquaの16色です。アルファベットの大文字と小文字は区別されません。
拡張色	一般的なブラウザが対応している「X11カラー」の色名です。CSS3カラーモジュールでは、X11カラー140色に加え、darkgray、darkslategray、dimgray、gray、lightgrey、lightslategray、slategrayの7色については、「gray」と「grey」のどちらのスペルでも利用できるようになり、合計147色のカラーネームが正式に定義されています。
transparent	完全な透過色を示します。rgba(0,0,0,0)と指定した場合と同じです。
currentColor	要素のcolorプロパティの値を示します。色の値を受け取る全てのプロパティで使用できます。colorプロパティ自身にcurrentColorを指定した場合は「color:inherit」として扱われ、親要素のカラー値を受け継ぎます。

サンプルコード

color: #f00;
color: #ff0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: rgba(255,0,0,0.5);
color: rgba(100%,0%,0%,0.5);
color: hsl(0,255%,128%);
color: hsla(0,255%,128%,0.5);
color: red;
color: darkred;
color: transparent;
color: currentColor;

参考文献：CSS Color Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。