CSSでの色の表現方法とか指定方法

普通は１６進数表記が多いですが、実はそれ以外にもたくさんあります。

ただ意外と忘れがちなものも多いです。

そこでCSSでの色の指定方法を、自分への忘備録も兼ねてまとめてみました。

「よく使うだろうな～」、と思うメジャーな表現方法から順に紹介していきます。

１．16進数表記で指定する

一番オーソドックスなのが16進数で色を指定・表現する方法

先頭に #  をつけて、赤・緑・青の順で２桁の16進数で表していく表現です。

例えばいくつか表現例を挙げるなら次の通り

上みたいに #ff0000 とか #90EE90 とか #a0d8ef  みたいな感じで書けばOK

大文字とか小文字は区別されません。

あとこの指定方法だと透過度は一切指定できないので注意

特殊な環境（例えばアプリ開発）とかだと #ffffff00  みたいに、後ろに透過度指定できることもあるんですが、純粋なCSSだとそういう表現方法はNGになってしまいます。

２．カラーネーム（色名）で指定する

お次はカラーネームで色を表現する指定方法

文字通り red とか orange とか gray  とかの色名で指定するやつですね。

一応その表現例を載せておくと、次コードのような感じ

こういう風に、人間が見ても分かりやすく表現できます。

ちなみにCSSで使えるカラーネーム一覧は次ページが分かりやすいです。

Webクリエイターボックス

 

48 Users

137 Pockets

Webで使えるカラーネームと、そのカラーコード・RGB値一覧

https://www.webcreatorbox.com/webinfo/color-name

Webサイトを作るとき、通常色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。色を自分で一から探すより、リストの中から選ぶ方がイメージにあう色が探しやすいよなぁ…という場面があったり、単純に色

赤系統とか青系統みたいに、色種類ごとにまとまってるので色選びに役立つかも

「こういうカラーネームもあるんだな～」って勉強にもなります。

３．rgb形式で指定する

CSSでの色はrgb形式でも指定可能

これは関数みたいなもので、rgbに対して赤・緑・青の順で色を渡せます。

例えば数値で指定する場合、
次コードみたいに赤・緑・青の値を 0  ～ 255  の範囲で指定可能

たとえば真ん中の rgb(144,238,144)  の場合・・・
赤成分が 144 、緑成分が 238 、 青成分が 144  という意味

カラーネームと違い、細かく色が調整できるのが利点です。

あとちなみに、rgbではパーセント（%）での指定も可能

数値で指定するのではなく、こういうパーセントで指定するのも１つの方法です。

透過度まで指定する場合は rgba を使う

ただし、 rgb では透過度までは指定できません。

もし透過度を指定する場合は rgba  という関数を使います。

例えば次みたいな感じで

透過度は 0  ～ 1.0  までの範囲で指定可能

もし 0  なら完全に透明、 1.0  なら完全に不透明になります。

色成分と違って、 0  ～ 255  の範囲で指定できないってところが注意点ですね。

４．hsl形式で指定する

あまり見ないけどhsl形式での色指定も可能

色を表現するときはRGBが一般的ですが、実はHSL形式っていうのもあります。

HSLは何の略かっていうと、

• Hue（色相）
• Saturation（彩度）
• Lightness（輝度）

この３つの頭文字をとったもの

HSLを使う利点は 「鮮やかさ」 や 「明るさ」 など直感的な表し方ができること ですね。

「色を明るくしたい or 暗くしたい」、「色を濃くしたい or 薄くしたい」などの場合に、RBGよりも感覚的に調整できるのが便利みたいです。（自分はあんまり使わないけど・・・）

そしてこっちもRGB同様、HSLの各成分を 0 ～ 255 の範囲で表現できます

例えばHSL形式の使用例を挙げると次の通り

パッと見だと、どんな色になるか分かりにくいですね・・・

でも色相とか明るさ、鮮やかさで指定したい場合には便利な書き方かも

あとHSLの場合も hsl(100%,100%,100%) みたいにパーセントで書くこともできます。

透過度まで指定するなら hsla を使う

ただし、hsl の場合は透過度までは指定できないことに注意

透過度まで指定したい場合は hsla  関数を使います。

例えば次コードみたいな感じで

先ほど紹介した rgba 同様、透過度は 0  ～ 1.0  の範囲で指定可能

透過度の値が 0  で完全透明、 1.0  で完全不透明になります。

ここまでのまとめ

ということで、CSSでの色の指定方法まとめ

• 16進数表記での指定
  先頭が #  から始まり、赤・緑・青の順で２桁の16進数で区切って書く表現方法。例えば #ff0000 、 #90EE90 、 #a0d8ef など...
• カラーネームでの指定
  定義済みのカラーネーム（色名）を直接書く表現方法。例えばいくつか例を挙げるなら red 、 lightgreen 、 skyblue など...
• rgb形式、rgba形式での指定
  赤・緑・青の成分を 0 ～ 255 の範囲またはパーセントで指定する書き方。rgba を使えば透過度も指定可能。例えば rgb(144,238,144)  、 rgb(63%,85%,94%)  、 rgba(160,216,239,0.5)  など...
• hsl形式、hsla形式での指定
  色相・彩度・輝度の成分を 0 ～ 255 の範囲で指定する書き方。hsla を使えば透過度も指定可能。例えば hsl(120,73,75)  、 hsla(0,100,50,0.5)  など...

以上、CSSでの色の指定方法についてでした。ではでは