はじめに
CSSの色関連の備忘録。
色の指定方法
CSSの色の指定は下記の指定の方法がある。
・16進数
・キーワード
・rgb()、rgba()
・hsl()、hsla()
16進数での色指定。
RGBの各値を16進数で指定する方法。
RGBとは?
光の三原色である赤、緑、青の組み合わせ。
例)
/* 赤色 */
#ff0000
/* 黄緑 */
#00FF00
/* 青 */
#0000FF
RGBの各値を示す2桁ずつが同じ数字の繰り返しの場合、重複する1桁を省略して、3桁で表現できる。
例)
/* 赤色 */
#f00
/* 黄緑 */
#0F0
/* 青 */
#00F
キーワード
英語の色の名前で指定することも可能。
基本色＋拡張カラーキーワードがあり、150色以上の色が指定可能。
16進数の対応表が調べればでるので使う場合は、参照すること。
例)
/* 白 */
white
/* 黒 */
black
rgb(), rgba()
rgb()という関数形式の指定方法を使用するとRGBの値を10進数で指定可能。
引数には左から赤のR、緑のG、青のBの値が指定可能。
rgb(R,G,B)
255を100%とする％値で指定も可能。
指定できる値の範囲
10進数で0～255、
％値で0%～100%
例)
/* 赤 */
rgb(255,0,0)
rgb(100%,0,0)
/* 黄緑 */
rgb(0,255,0)
rgb(0,100%,0)
/* 青 */
rgb(0,0,255)
rgb(0,0,100%)
rgba()はRGBの値に加えてAlpha(不透明度のこと)の値を指定できる。
不透明度は0.0～1.0の範囲の数値で指定できる。(整数でも少数でも可能)
0.0で完全透明
1.0で完全不透明
例)
/* 赤の半透明 */
rgba(255,0,0,0.5)
hsl(),hsla()
hslは以下の略。
hue(色相)
saturation(彩度)
lightness(明度)
色相、彩度、明度の順で指定する。
彩度と明度は0%から100%のパーセント値で指定する。
色相は色相環(カラーサークル)の角度を示す数値(単位なし)で指定する。
例)
/* 赤 */
hsl(0,100%,50%)
hsla()は、rgba()と同じくAlpha(不透明度)の値を指定できる。
0.0～1.0の範囲で不透明度の指定が可能。
例)
/* 半透明の赤 */
hsla(0,100%,50%,0.5)