
目次
あらすじ
みなさんはCSSで色の値を指定する際はどのように指定していますか?
色の名前で指定する人もいれば、HEX値で指定する人もいると思います。
実はそれ以外にも指定方法はいくつかあリます。
今回はそんな色の指定方法について詳しくご紹介していきたいと思います。
そもそもCSSが分からない!といった方はこちらの記事をご覧くださいfa-arrow-circle-down
color要素とは
CSSのcolorプロパティには、
- color
- background-color
- border-color
といったものがあります。
それぞれの値には色を指定する必要があり、その指定方法にはいくつかの種類があります。
具体的には
- 色の名前で指定する
- RGB値で指定
- RGBA値で指定
- HEX値で指定
- HSL値で指定
- HSLA値で指定
といった6種類の方法があります。
それぞれについて詳しく見ていきましょう。
colorプロパティの値に色の名前で指定する方法
この方法が一番簡単な方法ではないでしょうか。
- 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値とはhexadecimalの略で、日本語では16進数の意味になります。
16進数を使用して色を指定する方法です。
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 となります。
HEX値の公式は以下のようになります。
#rrggbb
rr= red, gg= green, bb= blue
rr, gg, bb にはそれぞれ00からffまでの値を記載することで、色を表現することができます。
例えば赤を指定したい場合は
#ff0000となり、
青であれば
#0000ffとなります。
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値とは、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値とは
- 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)となります。
まとめ
いかがだったでしょうか。
色の指定方法にはこのようにいろんな方法があります。
どれが良くてどれが悪いといったことはないので、自分に合った方法を見つけて利用することが一番です。