【CSS】colorの指定方法

キーワード

「red」や「black」等のキーワードを指定する方法。

一目で指定した色がイメージできるのが特徴。

/* 例　*/
p{
  color:white; /* 白 */
  color:black; /* 黒 */
  color:red; /* 赤 */
}

カラーコード

「# + 16進数のカラーコード(6桁又は3桁)」で指定する方法。

カラーコードは2桁毎にそれぞれ「赤(R)、緑(G)、青(B)」の数値を表している。

3桁の場合は連続する数値の指定となる。（「#ff0」は「#ffff00」となる）

/* 例　*/
p{
  color:#ffffff; /* 白 */
  color:#000000; /* 黒 */
  color:#ff0000; /* 赤 */
  color:#f00; /* 赤 */
}

RGB()、RGBA()

三原色である「赤(R)、緑(G)、青(B)」の数値で指定する方法。

「rgb(0,255,122)」の様に0〜255の数値で指定する。

透過度を指定することもでき、その場合はRGBにA(Alpha)を加えた「rgba( 255, 0, 0, 0.5)」のように指定する。(0〜1の数値)

/* 例　*/
p{
  color:rgb(255,255,255); /* 白 */
  color:rgb(0,0,0); /* 黒 */
  color:rgb(255,0,0); /* 赤 */
  color:rgba(255,0,0,0.9); /* ほぼ透明な赤 */
  color:rgba(255,0,0,0.5); /* 半透明な赤 */
  color:rgba(255,0,0,0); /* 赤 */
}

HSL()、HSLA()

色相(Hue)、彩度(Saturation)、輝度(Lightness)を指定する方法。

「hsl(328,100%,50%)」の様に、色相は0〜360度、彩度、輝度は0〜100%で指定する。

RGBと同様に透過度を指定することができ、その場合は「hsla()」となる。

/* 例　*/
p{
  color:hsl(360,100%,100%); /* 白 */
  color:hsl(360,100%,0%); /* 黒 */
  color:hsl(360,100%,50%); /* 赤 */
  color:hsla(360,100%,50%,0.9); /* ほぼ透明な赤 */
  color:hsla(360,100%,50%,0.5); /* 半透明な赤 */
  color:hsla(360,100%,50%,0); /* 赤 */
}