33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

色の指定方法について

本日の教材動画はこちら 

 今回も前回の「数値の指定方法」に続き、当たり前に使っていた「色の指定方法」について深く勉強していきたいと思います。

色の指定方法にはいくつかある

1. 色名で指定をする方法

redとかgreenとか、色名を記載して指定する方法です。単純な色味ならこれで十分ですが、「特定の色しか指定できない」というデメリットを併せ持ちます。この特定の色はW3Cという団体が決めており、定められた色以外は使用することができません。

2. RGBで指定する方法

恐らくこれが一番一般的な指定方法ですね!RGBでの指定は2通りあります。

 【10進数で記載する場合】

rgb(赤の値,緑の値,青の値)という書き方で指定をする方法。値は0~255の間となります。赤色の場合はrgb(255,0,0)となります。

 【16進数で記載する場合】

#赤緑青の順に値を書きます。赤色であれば#ff0000となります。基本6桁の数字となりますが、同じ数字が続く場合は一桁省略することができます(赤色であれば#F00の記載でもOKとなります)

3. HSLを利用する

私はまったく馴染みがない(見たこともないかも)のですが、デザイナーさんなどは直感的に色が決めれるため好きな指定方法らしいです。色相・彩度・明るさの値をいれて指定をします。例えば赤色ならhsl(0,100%,51%)という記載方法になります。

RGBとHSLはアルファチャンネルの利用ができる

アルファチャンネルってなんやねん?ってなりますが、どうやら「透明度」のことを指しているようです。書き方は後ろに「a」を付けたし、( )の中に透明度を書きます。例えばRGB 10進数で色指定する場合、rgb(255,0,0,0.5)にすれば文字が半分透過されます。

 

アルファチャンネルと使うとどうなるのか、各色の色はどんな数値なのかなどは参照サイトを確認したほうがわかりやすいかもです。私はRGBが好きなのですが、色を自由自在に指定したいならHSLになれた方が便利そうですね。

 

【参照サイト】

WEBカラー見本一覧(基本色、セーフカラー)

カラーネーム

【CSS】HSLはこんなに便利! – RGBからHSLへ

RGBとHSLの相互変換ツールと変換計算式

色と透過色