CSSで色を表現できる”いろいろ”な指定方法まとめ

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

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

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

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

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

1.16進数表記で指定する

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

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

 

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

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

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

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

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

2.カラーネーム(色名)で指定する

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

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

 

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

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

 

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

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

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

3.rgb形式で指定する

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

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

 

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

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

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

 

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

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

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

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

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

例えば次みたいな感じで

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

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

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

4.hsl形式で指定する

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

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

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

  • Hue(色相)
  • Saturation(彩度)
  • Lightness(輝度)

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

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進数表記での指定
    先頭が #  から始まり、赤・緑・青の順で2桁の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での色の指定方法についてでした。ではでは

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください