CSS色指定

色空間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 (日本語訳)

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

 閲覧数:502 投稿日: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>

 閲覧数:489 投稿日: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( 実数, 実数%,実数%, 実数)


要点 / 一覧

 閲覧数:469 投稿日: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

 閲覧数:469 投稿日: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

 閲覧数:533 投稿日: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%

 閲覧数:482 投稿日: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%

 閲覧数:480 投稿日: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色モジュール


teal / 青緑色の一種 / #008080

ビット / バイト



週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新