色空間2種類
状態:-
閲覧数:2,132
投稿日:2016-04-29
更新日:2016-07-17
現状のCSSで指定可能な色空間
・RGB
・HSL
RGB
・#2196F3
・rgb(33, 150, 243)
HSL
・hsl(206.6, 89.7%, 54.1%)
・CSS4では、 Lab 色・LCH 色・ CMYK 色が指定可能になるのでしょうか?
・CSS Color Module Level 4 (日本語訳)
・RGB
・HSL
RGB
・#2196F3
・rgb(33, 150, 243)
HSL
・hsl(206.6, 89.7%, 54.1%)
・CSS4では、 Lab 色・LCH 色・ CMYK 色が指定可能になるのでしょうか?
・CSS Color Module Level 4 (日本語訳)
キーワード3種類 + 色空間2種類 + システムカラー
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データ型 / RGB = <integer> | <number>% / HSL = hsl( <number>, <number>%, <number>% ) / 透明度 = <number>
colorデータ型
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<percentage> は <number>%
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <number> )
<hsl()> = hsl( <number>, <number>%, <number>% )
<hsla()> = hsla( <number>, <number>%, <number>%, <number> )
<rgba()> = rgba( <rgb-component>#{3} , <number> )
<hsl()> = hsl( <number>, <number>%, <number>% )
<hsla()> = hsla( <number>, <number>%, <number>%, <number> )
<rgb-component> が <integer>
<rgb()> = rgb( <integer>#{3} )
<rgba()> = rgba(<integer>#{3} , <number> )
<hsl()> = hsl( <number>, <number>%,<number>% )
<hsla()> = hsla( <number>, <number>%, <number>%, <number> )
<rgba()> = rgba(<integer>#{3} , <number> )
<hsl()> = hsl( <number>, <number>%,<number>% )
<hsla()> = hsla( <number>, <number>%, <number>%, <number> )
<rgb-component> が <number>%
<rgb()> = rgb( <number>%#{3} )
<rgba()> = rgba( <number>%#{3} ,<number> )
<hsl()> = hsl( <number>, <number>%, <number>% )
<hsla()> = hsla( <number>, <number>%,<number>%, <number>)
<rgba()> = rgba( <number>%#{3} ,<number> )
<hsl()> = hsl( <number>, <number>%, <number>% )
<hsla()> = hsla( <number>, <number>%,<number>%, <number>)
整数 / 実数
RGB が <integer>
RGB = rgb( 整数#{3} )
RGBA = rgba(整数#{3} , 実数 )
HSL = hsl( 実数, 実数%,実数% )
HSLA = hsla( 実数, 実数%, 実数%, 実数 )
RGBA = rgba(整数#{3} , 実数 )
HSL = hsl( 実数, 実数%,実数% )
HSLA = hsla( 実数, 実数%, 実数%, 実数 )
RGB が <number>%
RGB = rgb( 実数%#{3} )
RBGA = rgba( 実数%#{3} ,実数 )
HSL = hsl( 実数, 実数%, 実数% )
HSLA = hsla( 実数, 実数%,実数%, 実数)
RBGA = rgba( 実数%#{3} ,実数 )
HSL = hsl( 実数, 実数%, 実数% )
HSLA = hsla( 実数, 実数%,実数%, 実数)
要点 / 一覧
RGB
<integer>型か、あるいは、<percentage>型
・言い換えると、<integer>型か、あるいは、%がすぐ後に続く<number>型
・つまり、整数か、あるいは、実数%
アルファ値
・透明度
・実数
小数点
RGB
・%指定する時のみ可
HSL
・可
アルファ値
・可
一覧
全て同じ色を表示
blue
#0000FF
#00F
rgb(0, 0, 255)
rgb(0%, 0%, 100%)
rgb(0.0%, 0.0%, 100.0%)
hsl(240, 100%, 50%);
hsl(240.0, 100.0%, 50.0%);
rgb(0, 0, 255,1)
rgb(0%, 0%, 100%,1)
rgb(0.0%, 0.0%, 100.0%,1)
hsl(240, 100%, 50%,1);
hsl(240.0, 100.0%, 50.0%,1);
rgb(0, 0, 255,1.0)
rgb(0%, 0%, 100%,1.0)
rgb(0.0%, 0.0%, 100.0%,1.0)
hsl(240, 100%, 50%,1.0);
hsl(240.0, 100.0%, 50.0%,1.0);
A.キーワード3種類 / named-color / transparent / currentColor
A.named-color
色キーワード
・色名称指定
大文字と小文字の区別をしない識別子
・特定の色を表す
blue
p { color: blue }
X11の色名称が基盤
・厳密には異なる
・完全一致しているわけではない
同じ色を表すキーワードがある
・darkgray / darkgrey
・darkslategray / darkslategrey
・dimgray / dimgrey
・lightgray / lightgrey
・lightslategray / lightslategrey
・gray / grey
・slategray / slategray
・HTML・CSSで使用するカラーネーム・カラーコード一覧
B1.RGB / 16進数 / #RRGGBB / #RGB
B2.RGB / 10進数 / R,G,B / R%,G%,B%
3.R,G,B
「10進数 integer 0~255」×3
rgb(0,0,255);
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
rgb(0%,0%,100%)
rgb(0%, 0%, 100%)
rgb(0.0%,0.0%,100.0%)
rgb(0.0%, 0.0%, 100.0%)
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
C.HSL / 10進数 / H,S%,L%
H,S%,L%
「10進数 number 0.0~360.0」,「10進数 number 0.0%~100.0%」,「10進数 number 0.0%~100.0%」
hsl(240, 100%, 50%);
/* 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色モジュール