CSS色指定

色空間2種類

 状態:-  閲覧数:825  投稿日: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 (日本語訳)

キーワード3種類 + 色空間2種類 + システムカラー

 閲覧数:171 投稿日:2016-04-29 更新日:2016-07-17 

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>

 閲覧数:156 投稿日:2016-04-29 更新日:2016-05-13 

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> )
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

<percentage> は <number>%
<rgb()> = rgb( <rgb-component>#{3} )
<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> )

<rgb-component> が <number>%
<rgb()> = rgb(  <number>%#{3} )
<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( 実数, 実数%, 実数%, 実数 )

RGB が <number>%
RGB = rgb( 実数%#{3} )
RBGA = rgba( 実数%#{3} ,実数 )
HSL = hsl( 実数, 実数%, 実数% )
HSLA = hsla( 実数, 実数%,実数%, 実数)


要点 / 一覧

 閲覧数:161 投稿日:2016-04-29 更新日:2016-05-15 

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

 閲覧数:161 投稿日:2016-05-03 更新日:2016-07-17 

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

 閲覧数:194 投稿日:2016-05-03 更新日:2016-07-17 

1.#RRGGBB


「16進数6桁」=「16進数2桁」×3
・"#" に続く6個の16進数記法文字 (0-9, A-F)
#0000FF
p { color: #0000FF } /* #rrggbb */



2.#RGB


「16進数3桁」=「16進数1桁」×3
・"#" に続く3個の16進数記法文字 (0-9, A-F)
#00F
p { color: #00F } /* #rgb */



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

B2.RGB / 10進数 / R,G,B / R%,G%,B%

 閲覧数:172 投稿日:2016-05-03 更新日:2016-07-17 

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%

 閲覧数:165 投稿日:2016-05-08 更新日:2016-07-17 

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色モジュール

Twitter検索結果。「CSS色指定」に関する最新ツイート

HTMLの知識を呟くゆずきbot @yuzuki_html

teal / 青緑色の一種 / #008080

ビット / バイト



週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新