【CSS】色を指定する４つの方法

CSSで色を指定する方法は4つあります。

それぞれ詳しくみていきましょう。

１）カラーネーム

redやblueなど、もともと決められているカラーネームを指定する方法です。
カラーネームは約140種類あります。記事の最後にカラーネームの一覧をまとめてあります。

要素{
   color:red;
}

２）16進数

#ff0000のような16進数で指定する方法です。
先頭の#を忘れないようにしてください。

要素{
   color:#ff0000;
}

３）RGB

Red、Green、Buleを順に指定する方法です。
それぞれ0～255の整数で指定します。

要素{
   color:rgb(255, 0, 0);
}

RGBに加えて、Alpha（透明度）も指定することができます。
こちらは、rgba()を使います。

要素{
   color:rgba(255, 0, 0, 0.5);
}

透明度は0～1の数字を指定します。
※0に近いほど透明になります

４）HSL

Hue（色相）、Saturation（彩度）、Lightness（輝度）を順に指定する方法です。
Hueは0～360の整数、SaturationとLightnessは0%～100%（単位が必要）を指定できます。

要素{
   color:hsl(30, 50%, 50%);
}

あまり馴染みがないかもしれませんが、HSLの指定が一番直感的で分かりやすいです。

まずはHue（色相）についてみてみます。
次のような色の円で指定するようなイメージです。
色の円は色相環と呼ばれています。

Hを0～330の30刻みで変化させて表示してみます（Sは100%、Lは50%で固定）。
※360は0と同じなので省きました
⇒hsl(0, 100%, 50%) ～hsl(330, 100%, 50%)　
記載されている数字はHの値です。上の色相環の絵と同じ順番になっていると思います。

次はSaturation（彩度）です。彩度は100%が純色となります。
Sをは0%～100%で変化させてみました（Hは0、Lは50%で固定）。
⇒hsl(0, 0%, 50%) ～hsl(0, 100%, 50%)

最後にLightness（輝度）です。輝度は0%が一番暗く、100%に近づくほど明るくなります。
Lを0%～100%で変化させてみました（Hは0、Sは100%で固定）。
⇒hsl(0, 100%, 0%) ～hsl(0, 100%, 100%)

また、HSLでも透明度を指定することができます。
hsla()を使います。RGBと同様、透明度は0～1の数字、0に近いほど透明になります

要素{
   color:hsla(30, 50%, 50%, 0.3);
}

カラーネーム一覧

カラーネームの一覧です。
ちなみにグレー系はgrayとgreyの2種類がありますが、どちらも同じ色になります。
grayはアメリカ英語、greyはイギリス英語らしいです。