CSSでは色の指定方法がいくつかあります。その方法について書きます。
キーワード
キーワードで定義された色を指定する方法です。キーワードは、色名やカラーネームと言われます。例えば、プロパティの値に「red」、「green」、「blue」などを指定します。
例として、id名がboxの要素に色を指定します。
<h1 id="box">Hello</h1>
#box{ color: red; /* 文字色を赤 */ background-color: green; /* 背景色を緑 */ border:solid 4px blue; /* ボーダーの色を青 */ }
カラーコード(16進数)
カラーコード(16進数)で色を指定する方法です。16進数とは、数字を「0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F」の16個の英数字で表現する方法です。
#box{ color: #ff0000; /* 赤 */ background-color: #00ff00; /* 緑 */ border:solid 4px #0000ff; /* 青 */ }
解説
16進数で色を指定するときは、プロパティ名: #RRGGBB;のように記述します。「#」は必ず付けます。
6桁の数字を左から2桁ずつに分けて考えます。2桁の数字は、左から「赤=Red」、「緑=Green」、「青=Blue」に対応します。それぞれ「00」～「FF」までの256(=16×16)段階で色を指定します。つまり、赤の256色、緑の256色、青の256色の組み合わせで色を表現します。表現できる色の数は、16,777,216(=256×256×256)色です。
RGBカラーモデル
RGBカラーモデルで指定する方法です。rgb(0, 0, 0)または、rgb(0%, 0%, 0%)で指定します。R(r)=Red、G(g)=Green、B(b)=Blueです。括弧内の数字は、左からr、g、bに対応します。指定できる値の範囲は、「0～255」または、「0%～100%」です。
#box{ color: rgb(255, 0, 0); /* 0～255で指定 */ background-color: rgb(0%, 100%, 0%); /* 0%～100%で指定 */ }
RGBAカラーモデル
RGBAカラーモデルで指定する方法です。RGBカラーモデルにA(Alpha)が加わります。Alphaとは、不透明度のことです。alphaの指定できる値の範囲は、「0～1」または、「0%～100%」です。
#box{ background-color: rgba(0, 255, 0, 0.5); /* または、rgba(0, 255, 0, 50%)*/ }
HSL
HSLで指定する方法です。H=Hue(色相)、S=Saturation(彩度)、L=Lightness(輝度)の3要素で色を指定します。hsl(色相, 彩度, 輝度)のように記述します。
Hue(色相)
色相とは、赤や緑といった色合いのことです。
hの指定できる値の範囲は、「0～360°」です。色相環の角度を指定します。色相環とは、色を環状に配置したものです。120°が緑、240°が青になります。0°と360°は赤です。360より大きい数字の場合は、その値から-360した値になります。マイナスの数字の場合は、その値に+360した値になります。
Saturation(彩度)
彩度とは、色の鮮やかさの度合いことです。
sの指定できる値の範囲は、「0%～100%」です。0%で灰色、100%で純色です。
Lightness(輝度)
輝度は、明るさのことです。
lの指定できる値の範囲は、「0%～100%」です。0%で黒、50%で純色、100%で白です。
#box{ background-color: hsl(180, 100%, 50%); }
HSLA
HSLにA(Alpha)が加わります。alphaの指定できる値の範囲は、「0～1」または、「0%～100%」です。
#box{ background-color: hsla(180, 100%, 50%, 0.5); }
