Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】色指定 様々な方法(色名・RGB・HSLなど)

 どうも!LSSです!!

 

 今回は、CSSの様々な場面で出てくる「色の指定」について、書き方が何通りかあるものをまとめてみます。

 

 

1.色名(直感的にもっとも分かりやすい)

この文は赤色で表示されます。

<span style="color:red;">この文は赤色で表示されます。</span>

 

色の名前(英語)を直接書く指定です。

 

メリット

色の名前(英語)そのままなので、「ここどの色を指定してたんだっけ?」って時にもっとも分かりやすい指定ですね^^

 

デメリット

かなりの数の色名がありますが、微調整が効かない。

透過指定を付与する事もできず、そのまま表示するだけ。

 

 

2.RGB形式 #で指定(HSLより短く書ける)

この文は赤色で表示されます。

<span style="color:#ff0000;">この文は赤色で表示されます。</span>

 

この文は赤色で表示されます。

<span style="color:#f00;">この文は赤色で表示されます。</span>

 

#記号に続けて、6桁、または3桁の16進数を書いて指定します。

6桁の場合、赤2桁・緑2桁・青2桁という意味になり、#ff0000だと
「赤255(16進数ff)、緑0、青0」
の強さで混ぜ合わせた色、という事になります。

3桁の場合、赤1桁・緑1桁・青1桁という意味ですが、それぞれゾロ目で2桁指定したのと同じ事になります。
つまり、#f00 = #ff0000ですね^^

ちなみに、大文字小文字は問わないので、#FF0000でも同じ意味になります。

 

メリット

赤・緑・青の混合具合である事と、16進数の特徴が分かっていれば、
#ff0000のような極端な設定であれば「赤だけ最強=真っ赤って事だな」って察せますし、
#ff8888だと「緑・青が同じ割合で強められている…全色最強(#ffffff)は白なので、白に寄せた赤…ピンクだな!
と察せるようになる…かも知れませんw

何より、少ない文字数で16,777,216色(約1677万色、256の3乗)を表現できるのが強みですね^^

 

デメリット

極端な場合を除いては、例えば#8a1f6bなど、どんな色になるのか想像がつかない、って事になります。

 

 

3.RGB形式 10進数で指定(16進数より分かりやすい?)

この文は赤色で表示されます。

<span style="color:rgb(255,0,0);">この文は赤色で表示されます。</span>

 

この文は赤色で表示されます。

<span style="color:rgb(100%,0%,0%);">この文は赤色で表示されます。</span>

 

#で指定と理屈は同じですが、扱い慣れない16進数ではなく、10進数で0~255の256段階の強さ、または0~100%を指定します。

※ちなみに、はてなブログのHTML編集画面に この形で書いた場合、勝手に#指定形式に修正されます^^;

 

メリット

 

#指定の場合に比べて、慣れない16進数より馴染みある10進数で指定できる点でハードルが下がりますね^^

 

デメリット

#指定のメリットだった「短く書ける」のが損なわれています。

 

 

4.RGBA形式 #指定 透過つき

この文は半透明の赤色で表示されます。

<span style="color:#ff000080;">この文は半透明の赤色で表示されます。</span>

 

#指定の6桁に加え、末尾にもう2桁「不透過度」を付与し、#FF000080のように書きます。

この末尾の2桁は「不透過度」を16進数で示したもので、
ffだと完全不透過(色がそのまま出ます)、
00だと完全透明(何も見えないw)
となります。

 

メリット

#での指定に慣れていれば、末尾に 00~ff を指定するだけで調節できます^^

 

デメリット

16進数なのであまり馴染みがないですよね^^;
ちなみにサンプルの「80」は中間(まんなかあたり)となります。

 

 

5.RGBA形式 10進数で指定 透過つき

この文は半透明の赤色で表示されます。

<span style="color:rgba(255,0,0,0.5);">この文は半透明の赤色で表示されます。</span>

 

この文は半透明の赤色で表示されます。

<span style="color:rgba(100%,0%,0%,0.5);">この文は半透明の赤色で表示されます。</span>

 

RGB形式10進数指定の冒頭の rgb を rgba に変えた上で、最後に , (カンマ)で区切って 0~1 の間で「不透過度」を指定します(小数が使用できます)。

 

メリット

10進数なので、16進数より分かりやすいですね^^

 

デメリット

透過指定をつけないrgb( )の時と同様、文字数はちょっと長くなります。

 

 

6.HSL形式(Hはともかくとして、SとLは分かりやすいw)

この文は赤色で表示されます。

<span style="color:hsl(0,100%,50%);">この文は赤色で表示されます。</span>

 

H(色相) S(彩度) L(明度)を指定します。

  • ひとつめの数値は 0~360 の間で指定し、色の種類(赤とか青とか黄とか)はここで指定します。
  • ふたつめの数値は 0~100%で指定し、彩度(鮮やかさ)を指定する事になります。
    この数値を下げると色がくすんでいき、0%ではモノクロになります。
  • みっつめの数値も 0~100%で指定し、明度(明るさ)を指定する事になります。ここを 0% にすると、色相・彩度がどんな値であっても黒に、100%にすると白になります。

 

メリット

彩度・明度が分かりやすく「くすんだ色にしたい・鮮やかにしたい」「このまま色を明るくしたい・暗くしたい」時の調整はしやすいです^^

 

デメリット

色相が分かりづらい^^;
0~360とみていくと、徐々に変化していく様子が分かりますが、
「青ってどのへんだっけ?」
みたいな時に探す事になります。

 

 

7.HSLA形式 透過つき

この文は半透明の赤色で表示されます。

<span style="color:hsla(0,100%,50%,0.5);">この文は半透明の赤色で表示されます。</span>

 

RGB→RGBAになったのと同様に、
HSL形式の冒頭の hsl をhsla に変えた上で、最後に , (カンマ)で区切って 0~1 の間で「不透過度」を指定します(小数が使用できます)。

 

メリット・デメリットはHSL形式と同様、ですね。 

 

 

まとめ

ざっくり分けると、4種(色名・RGB形式2種類・HSL形式)+透過3種(RGBA形式2種類・HSLA形式)の合計7種類の指定方法について書きました。

 

個人的にはRGB形式が好きですw

 

最後にまとめとして、それぞれの形式のコードを一気に書いておきます。

 

コード

<span style="color:red;">色名</span>
<span style="color:#ff0000;">RGB 16進数6桁</span>
<span style="color:#f00;">RGB 16進数3桁</span>
<span style="color:rgb(255,0,0);">RGB 10進数</span>
<span style="color:rgb(100%,0%,0%);">RGB 10進数%指定</span>
<span style="color:#ff000080;">RGB 16進数 透過つき</span>
<span style="color:rgba(255,0,0,0.5);">RGB 10進数 透過つき</span>
<span style="color:rgba(100%,0%,0%,0.5);">RGB 10進数%指定 透過つき</span>
<span style="color:hsl(0,100%,50%);">HSL</span>
<span style="color:hsla(0,100%,50%,0.5);">HSL 透過つき</span>

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^