HSLで色指定

CSSで色を扱うプロパティはいくつかあります

• color：文字色（前景色）

• background-color：背景色

  css

  {
    color: ***
    background-color: ***
  }
  

Hex Color

• ***の部分の指定の仕方で最もよく見られるのが、Hex ColorといういわゆるRGBを16進数表記されたものになります

  css

  .sample {
    color: #ffc0cb   // pink
    background-color: #87ceeb   // skyblue
  }
  

RGB

• 10進数で指定するもの、これもよく見ます。色のみを指定するやり方と一緒に明度も指定するやり方があります。

  css

  .sample {
    color: rgb(255,255, 0)   // yellow
    background-color: rgba(0, 0, 255, 0.5)   // pale blue
  }
  

HSL Color

• Hex ColorもRGBも明度、特に彩度を自分で変化させながら色を指定しやすいのはHSLです。

• HSLとは

  • Hue（色味）
  • Saturation（彩度）
  • Lightness（明度）
  css

  .sample {
    color: hsl(0, 100%, 50%)    // 薄い赤
    background-color: hsl(180, 50%, 100%)   // 彩度の落ちた青緑 
  

• 色味は360の度の角度で指定します。赤が0度地点

  • 

• HSLの便利ポイント

  • 色に対する彩度や明度を自分で決めることがコード書きながらできるところ