CSSでの色の指定方法

HTMLでは、CSSのプロパティを使って色を指定します。

本ページでは、CSSにおける色の指定方法について説明します。

カラーネーム

CSSでは、redなどのカラーネームで色を指定できます。

以下は、利用例です。

【カラーネームの利用例】

body {
  color: red;
}

上記で、テキストの色が赤になります。

指定できるカラーネームは、「カラーコード一覧」をご参照ください。

RGBは、三原色の赤(R:red)、緑(G:green)、青(B:blue)を組み合わせて指定します。以下の指定方法があります。

指定例は、以下のとおりです。

【RGBの利用例】

color: #0f0;
color: #00ff00;
color: rgb(0,255,0);
color: rgb(0%,100%,0%);

上記は、すべて同じ色になります。16進数の1桁での表し方を、2桁で表す方法に変換する時は、同じ数字を並べます。つまり、0であれば00、fであればffになります。

16進数の0は、10進数でも0です。16進数のffは、10進数では255になります。パーセントで示すと、255(ff)が100%を示します。

RGBに加えて、アルファ(A:alpha)が使えます。アルファによって、不透明度を示します。

指定例は、以下のとおりです。

【RGBAの利用例】

color: #0f07;
color: #00ff0077;
color: rgba(0,255,0,0.5);
color: rgba(0%,100%,0%,0.5);

最後の7、77、0.5がアルファです。上記は、すべて半透明で表示されます。

不透明にするためには、16進数でfやff、10進数で1と記述します。完全に透明にするためには、16進数で0や00、10進数で0と記述します。

transparentキーワードを使うと、透明にできます。例えば、background-colorのデフォルトはtransparentで、親要素の背景などを表示できます。このため、親要素で背景画像を使っていたとしても、その画像を表示できます。

利用例は、以下のとおりです。

【transparentの利用例】

background-color: transparent;

上記により、もしbackground-colorに色が指定されていた場合でも、透明になります。

transparentキーワードは、rgba(0,0,0,0)の省略形とされています。rgba(0,0,0,0)は、黒色の透明を示します。

HSLは、色の三属性の色相(H:hue)、彩度(S:saturation)、明度(L:lightness)を組み合わせて指定します。

利用例は、以下のとおりです。

【HSLの利用例】

color: hsl(30,100%,50%);

上記により、色がオレンジ、彩度100%、明度50%で表示されます。RGBでの指定と違って、少し明るくしたいと言った場合は、明度を上げる(60%など)だけで済みます。

hslaで、アルファも指定できます。例えば、color: hsla(0,100%,50%,0.5);と指定すると、半透明になります。

HSLの詳細は、「CSSでHSL(三属性)による色の指定」をご参照ください。

currentcolorは、要素のcolorプロパティの値です。利用例は、以下のとおりです。

border-color: currentcolor;

上記により、もし境界線(枠線)に他の色が指定されていた場合でも、テキストと同じ色になります。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

※スマートフォンのFirefoxとChromeは、Android版です。