CSS色指定

A.キーワード

named-color
・色キーワード

transparent
・transparent キーワード

currentColor
・currentColor キーワード

---

B.RGB

・1.「16進数6桁」=「16進数2桁」×3
・2.「16進数3桁」=「16進数1桁」×3
・3.「10進数 integer 0～255」×3
・4.「10進数 number 0.0%～100.0%」×3

/* すべて同じ RGB color を指定: */

#00f /* 3桁小文字 */ 

#00F /* 3桁大文字 */ 

#0000ff /* 6桁小文字 */ 

#0000FF /* 6桁大文字 */ 

rgb(0,0,255)

rgb(0, 0, 255) /* 半角スペースあり */ 

rgb(0, 0.5, 255) /* ERROR! 小数ではなく整数使用が必須 */ 

rgb(0%,0%,100%)

rgb(0%, 0%, 100%) /* 半角スペースあり */ 

rgb(100%, 0, 100%) /* ERROR! 整数と(割合%)の混在不可 */

・CSSではsRGB (standard RGB)
※AdobeRGBは指定不可
・OK例

body{background-color:rgb(33, 150, 243)}

・NG例

body{background-color:rgb(21,96,F3)}

※16進数は#指定のみ可

---

C.HSL

「10進数 number 0.0～360.0」,「10進数 number 0.0%～100.0%」,「10進数 number 0.0%～100.0%」

---

D.deprecated-system-color

システムカラー

colorデータ型

<percentage> は <number>%

<rgb-component> が <integer>

<rgb-component> が <number>%

---

整数 ／ 実数

RGB が <integer>

RGB が <number>%

RGB

<integer>型か、あるいは、<percentage>型
・言い換えると、<integer>型か、あるいは、%がすぐ後に続く<number>型
・つまり、整数か、あるいは、実数%

アルファ値
・透明度
・実数

---

小数点

RGB
・%指定する時のみ可

HSL
・可

アルファ値
・可

---

一覧

全て同じ色を表示

A.named-color

色キーワード
・色名称指定

大文字と小文字の区別をしない識別子
・特定の色を表す

p { color: blue }

X11の色名称が基盤
・厳密には異なる
・完全一致しているわけではない

同じ色を表すキーワードがある
・darkgray / darkgrey
・darkslategray / darkslategrey
・dimgray / dimgrey
・lightgray / lightgrey
・lightslategray / lightslategrey
・gray / grey
・slategray / slategray


・HTML・CSSで使用するカラーネーム・カラーコード一覧

1.#RRGGBB

「16進数6桁」=「16進数2桁」×3
・"#" に続く6個の16進数記法文字 (0-9, A-F)

p { color: #0000FF } /* #rrggbb */

---

2.#RGB

「16進数3桁」=「16進数1桁」×3
・"#" に続く3個の16進数記法文字 (0-9, A-F)

p { color: #00F } /* #rgb */

3桁フォーマットはCSS仕様
・HTMLの色指定では規格外

3.R,G,B

「10進数 integer 0～255」×3

p { color: rgb(0, 0, 255) } /* integer range 0 - 255 */

RGBそれぞれのinteger範囲
・0～255

/* RGB with alpha channel, added to CSS3 */

p { color: rgba(0, 0, 255, 0.5) } /* 0.5 opacity, semi-transparent */

---

4.R%,G%,B%

「10進数 number 0.0%～100.0%」×3

p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

H,S%,L%

「10進数 number 0.0～360.0」,「10進数 number 0.0%～100.0%」,「10進数 number 0.0%～100.0%」

/* HSL model, added to CSS3 */

p { color: hsl(0, 100%, 50%) } /* red */

p { color: hsl(120, 100%, 50%) } /* green */ 

p { color: hsl(120, 100%, 25%) } /* dark green */ 

p { color: hsl(120, 100%, 75%) } /* light green */ 

p { color: hsl(120, 50%, 50%) } /* pastel green */



/* HSL model with alpha channel */

p { color: hsla(120, 100%, 50%, 1) } /* green */

p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */

p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

・<color>
・10進数は整数？ 結果的に整数？ 小数点は何進数？ 2進数は0と1だから整数？
・CSS Color Module Level 3
・CSS3色モジュール