CSSの色を指定する方法には何がある？HEX値、RGBA値、HSLA値について

あらすじ

みなさんはCSSで色の値を指定する際はどのように指定していますか？
 
色の名前で指定する人もいれば、HEX値で指定する人もいると思います。

実はそれ以外にも指定方法はいくつかあリます。

今回はそんな色の指定方法について詳しくご紹介していきたいと思います。

そもそもCSSが分からない！といった方はこちらの記事をご覧くださいfa-arrow-circle-down

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。 今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。 具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例 といった項目に分けてご紹介していきます。...

color要素とは

CSSのcolorプロパティには、

といったものがあります。

それぞれの値には色を指定する必要があり、その指定方法にはいくつかの種類があります。

具体的には

といった6種類の方法があります。

それぞれについて詳しく見ていきましょう。

colorプロパティの値に色の名前で指定する方法

この方法が一番簡単な方法ではないでしょうか。

といった一番王道な色を合わせて、合計140種類の色の名前での指定ができます。

色の名前での指定方法

色の名前で指定する際の記載方法は以下になります。

セレクタ {
  background-color: orange;
  color: snow;
}

値の部分に140種類の色から選んで記載します。

色の名前の代表例

140種類もある色の名前の中から代表的な名前をご紹介したいと思います。

さらに詳しい色の名前は下記のサイトに記載してありますので、ご参照ください。

原色大辞典

HEX値で色を指定する方法

HEX値とはhexadecimalの略で、日本語では16進数の意味になります。

16進数を使用して色を指定する方法です。

HEX値の公式は以下のようになります。

#rrggbb

rr, gg, bb にはそれぞれ00からffまでの値を記載することで、色を表現することができます。

例えば赤を指定したい場合は

#ff0000となり、

#0000ffとなります。

RGB値で色を指定する方法

RGB値とは

の頭文字をとったもので、それぞれの色の濃さを数値で表すことで、様々な種類の色を表現することができます。

数値は0〜255までの間で表され、公式は

となります。

例えば、

rgb (255, 0, 0)であれば、赤(red)の数値が最大値である255になっていることから、赤色を表し、rgb (0, 255, 0)であれば緑(green)、rgb (0, 0, 255)であれば青(blue)と判断することができます。

RGBA値で色を指定する方法

RGBA値とは、RGB値にalpha(アルファ)という要素が加わったものです。

alpha(アルファ)とは色の透明度を表す数値です。

公式は

となります。

alpha値とは0.0〜1.0の間の値で表すことができ、0.0は完全な透明、1.0は完全に原型と同じ色になります。0.0に近づくにつれて透明度が高くなるといったイメージです。

例えば、

rgba (255, 0, 0, 0.5)

だったら、半透明な赤になります。

HSL値で色を指定する方法

HSL値とは

の頭文字をとった名前です。

それぞれの値について詳しく見ていきましょう。

hue(色相)

hueとは色相を表す値です。

0から360までの数値で表すことができます。

0が赤、120が緑、240が青となります。

saturation(彩度)

saturationは彩度を表す値で、0から100%の間で表現します。

100%に近ければ原色に近い色になり、0%に近ければ灰色がかった色になります。

lightness(輝度)

lightnessは輝度を表します。

こちらもsaturation(彩度)同様に%(パーセンテージ)で表すことができます。

0%に近ければ黒色に近い色になり、100%に近ければ白色に近い色となります。

HSL値の公式

HSL値の公式は

となります。

例えば、赤を指定したい場合は

hsl (0, 100%, 50%)

となり、

青を指定したい場合は

hsl (240, 100%, 50%)となります。

HSLA値で色を指定する方法

HSLA値とは、HSL値にalpha(アルファ)要素が加わったものです。

このalpha(アルファ)要素はすでに上記で説明したRGBA値のalpha(アルファ)要素同様に透明度を表す値となります。

公式は

となります。

まとめ

いかがだったでしょうか。

色の指定方法にはこのようにいろんな方法があります。

どれが良くてどれが悪いといったことはないので、自分に合った方法を見つけて利用することが一番です。