Edited at

CSS3の色の指定について

More than 1 year has passed since last update.


色の指定の種類


カラーネームで指定する

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;
}

Kobito.yOoxiU.png


  • 指定できるカラーネームは以下を参照

  • 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);
}

image.png


  • 少し色を明るくしたい、鮮やかにしたいといった時に直感的に変更できる

  • 古いブラウザでは利用できない時があるので注意

  • CSSは1未満の0の部分は省略できるので省略している


便利ツール


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


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

#box1 {

background-color: red;
opacity: .5;
}