CSS3の色の指定について

色の指定の種類

カラーネームで指定する

html lang="ja"
  head
    meta charset="utf-8"
    title
      | CSS3
    link rel="stylesheet" href="./stylesheets/default.css"
  body
    div id="box1" box1
    div id="box2" box2
    div id="box3" box3
    div id="box4" box4

#box1 {
  background-color: wheat;
}

#box2 {
  background-color: khaki;
}

#box3 {
  background-color: lightpink;
}

#box4 {
  background-color: steelblue;
}

• 指定できるカラーネームは以下を参照
• WEB色見本 原色大辞典 - HTMLカラーコード https://www.colordic.org/
• 変わった色の指定はOSやブラウザなどの環境によって正常に表示されない場合がある

カラーコード(#)で指定する

• 色指定を16進数(0-f)で指定する
• 3桁と6桁で指定する方法がある

#box1 {
  background-color: #f0f;
}

#box2 {
  background-color: #ff00ff;
}

• 重複する値は省略することができる。3桁以外は無理
• 色の指定は頻繁に行うので、省略できた方がコーディングが少し楽になる

rgb, rgba(CSS3)で指定する

• 赤緑青の量で色を指定する方法
• 数値(0-255)、%(0-100%)で指定する方法がある
• 0(0%)が薄く255(100%)が濃い

background-color: rgb(赤、緑、青)

#box1 {
  background-color: rgb(255, 0, 0);
}

#box2 {
  background-color: rgb(0%, 100%, 0%);
}

• 0が透明で1が元の色

#box1 {
  background-color: rgba(255, 0, 0, 0.2);
}

#box2 {
  background-color: rgba(0%, 100%, 0%, 0.8);
}

hsl, hslaで指定する (CSS3)

• 色相 (Hue)
• 鮮やかさ (Saturation)
• 明るさ (Lightness)
• 透明度 (Alpha)

#box1 {
  background-color: hsl(0, 79%, 72%)
}

#box2 {
  background-color: hsl(0, 90%, 80%)
}

#box3 {
  background-color: hsla(210, 100%, 50%, .7);
}

#box4 {
  background-color: hsla(210, 100%, 40%, .7);
}

• 少し色を明るくしたい、鮮やかにしたいといった時に直感的に変更できる
• 古いブラウザでは利用できない時があるので注意
• CSSは1未満の0の部分は省略できるので省略している

便利ツール

• HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converter http://serennu.com/colour/hsltorgb.php

  • HSLの変換に便利

• HSLA Selected (Hue, Saturation, Light, alpha) Color Codes http://www.december.com/html/spec/colorhsla.html

  • 色相の値を確認するのに便利

要素全体を透明にする (opacity)

• 背景色だけではなくて、要素全体を透明にしたい時はCSS3のopacityを使う

#box1 {
  background-color: red;
  opacity: .5;
}