おすすめ記事
color
スポンサーリンク

あらすじ

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

 

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

 

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

 

そもそもCSSが分からない!といった方はこちらの記事をご覧ください

 

スポンサーリンク

color要素とは

 

color

 

CSSのcolorプロパティには、

  • color
  • background-color
  • border-color

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

 

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

 

具体的には

  • 色の名前で指定する
  • RGB値で指定
  • RGBA値で指定
  • HEX値で指定
  • HSL値で指定
  • HSLA値で指定

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

 

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

スポンサーリンク

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

 

color name

 

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

 

  • red
  • blue
  • green
  • yellow

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

 

色の名前での指定方法

 

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

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

 

 

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

 

色の名前の代表例

 

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

 

洋名 和名 HEX値
black #000000
white #ffffff
gray 灰色 #808080
red #ff0000
green #008000
blue #0000ff
yellow 黄色 #ffff00
purple #800080

 

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

原色大辞典

 

HEX値で色を指定する方法

 

hex

 

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

 

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

 

16進数とは
16進数とは0から9までを数字で表し、10から16まではAからFのアルファベットで表す方法です。

 
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

といった並びが基本形です。
 

Fの次は10, 11, 12 … 19と続き、19の次は1A, 1B, 1C … 1F となります。

 

memo
0から9までが一桁の数字で、その次からは繰り上がり10, 11, 12 といった2桁の数字になる方法は10進数(我々が普段から使っている方法です)と呼ばれ、0と1しか使用せず、1の次は10,11,100,110,111といった法則で繰り上がっていく方法が2進数と呼ばれます。

 

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

#rrggbb

 

 ここでのrr, gg, bbは実際の16進数では使えませんのでご注意してください。あくまでもわかりやすくするために利用しています。
rr= red, gg= green, bb= blue

 

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

 

memo
00からffまでの値は、0から255までの数字と同じです。

 

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

#ff0000となり、

 

であれば

#0000ffとなります。

 

RGB値で色を指定する方法

 

rgb

 

RGB値とは

  • red
  • green
  • blue

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

 

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

rgb (red, green, blue)

 

となります。

 

例えば、

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

 

RGBA値で色を指定する方法

 

rgba

 

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

 

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

 

公式は

rgba (red, green, blue, alpha)

となります。

 

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

 

例えば、

rgba (255, 0, 0, 0.5)

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

 

HSL値で色を指定する方法

 

hsl

 

HSL値とは

  • hue
  • saturation
  • lightness

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

 

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

hue(色相)

 

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

 

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

 

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

 

saturation(彩度)

 

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

 

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

 

lightness(輝度)

 

lightness輝度を表します。

 

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

 

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

 

HSL値の公式

 

HSL値の公式は

hsl (hue, saturation, lightness)

となります。

 

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

hsl (0, 100%, 50%)

となり、

 

を指定したい場合は

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

 

HSLA値で色を指定する方法

 

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

 

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

 

公式は

hsla (hue, saturation, lightness, alpha)

となります。

 

まとめ

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

 

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

 

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

 

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事