血統の森: Homeweb実験小屋CSS3ウェブブラウザ実装メモCSS3 color

CSS3 color

作成:
更新:

CSS2.1では、17色の色キーワード、4通りのRGBによる色指定が可能である。ここでは、RGBについては既知のものとして特に触れないことにし、CSS3で拡張・定義された色キーワード、HSL、透明度(opacityとアルファチャンネル)についての解説をメモする。なお、CSS Color Module Level 4日本語訳)仕様の策定が行われているが、更新時点(2015年10月)ではまだFPWDが発行されていないため、ここでは取り上げない。

もくじ

カラーキーワード

以下にCSS3で定義されている色キーワードとRGB値、HSL値を示す。HSL値については、後述のHSLについてを参照されたい。

CSS3カラーキーワード・チャート
CSS3での名称 RGB値 HSL値
snow rgb(255,250,250) hsl(0, 100% ,99%)
floralwhite rgb(255,250,240) hsl(40, 100% ,97.1%)
ivory rgb(255,255,240) hsl(60, 100% ,97.1%)
honeydew rgb(240,255,240) hsl(120, 100% ,97.1%)
azure rgb(240,255,255) hsl(180, 100% ,97.1%)
lightcyan rgb(224,255,255) hsl(180, 100% ,93.9%)
aliceblue rgb(240,248,255) hsl(208, 100% ,97.1%)
lavenderblush rgb(255,240,245) hsl(340, 100% ,97.1%)
seashell rgb(255,245,238) hsl(24.7, 100% ,96.7%)
linen rgb(250,240,230) hsl(30, 66.7% ,94.1%)
antiquewhite rgb(250,235,215) hsl(34.3, 77.8% ,91.2%)
blanchedalmond rgb(255,235,205) hsl(36, 100% ,90.2%)
papayawhip rgb(255,239,213) hsl(37.1, 100% ,91.8%)
oldlace rgb(253,245,230) hsl(37.1, 100% ,91.8%)
cornsilk rgb(255,248,220) hsl(48, 100% ,93.1%)
lemonchiffon rgb(255,250,205) hsl(54, 100% ,90.2%)
lightgoldenrodyellow rgb(250,250,210) hsl(60, 80% ,90.2%)
lightyellow rgb(255,255,224) hsl(60, 80% ,90.2%)
beige rgb(245,245,220) hsl(60, 55.6% ,91.2%)
ghostwhite rgb(248,248,255) hsl(240, 100% ,98.6%)
mintcream rgb(245,255,250) hsl(150, 100% ,98%)
lavender rgb(230,230,250) hsl(240, 66.7% ,94.1%)
mistyrose rgb(255,228,225) hsl(6, 100% ,94.1%)
peachpuff rgb(255,218,185) hsl(28.3, 100% ,86.3%)
bisque rgb(255,228,196) hsl(32.5, 100% ,88.4%)
navajowhite rgb(255,222,173) hsl(35.9, 100% ,83.9%)
moccasin rgb(255,228,181) hsl(38.1, 100% ,85.5%)
wheat rgb(245,222,179) hsl(39.1, 76.7% ,83.1%)
palegoldenrod rgb(238,232,170) hsl(54.7, 66.7% ,80%)
palegreen rgb(152,251,152) hsl(120, 92.5% ,79%)
paleturquoise rgb(175,238,238) hsl(180, 64.9% ,81%)
powderblue rgb(176,224,230) hsl(186.7, 51.9% ,79.6%)
lightblue rgb(173,216,230) hsl(194.7, 53.3% ,79%)
lightsteelblue rgb(176,196,222) hsl(213.9, 41.1% ,78%)
thistle rgb(216,191,216) hsl(300, 24.3% ,79.8%)
pink rgb(255,192,203) hsl(349.5, 100% ,87.6%)
lightpink rgb(255,182,193) hsl(351, 100% ,85.7%)
lightcoral rgb(240,128,128) hsl(0, 78.9% ,72.2%)
salmon rgb(250,128,114) hsl(6.2, 93.2% ,71.4%)
darksalmon rgb(233,150,122) hsl(15.1, 71.6% ,69.6%)
lightsalmon rgb(255,160,122) hsl(20.5, 71.6% ,69.6%)
burlywood rgb(222,184,135) hsl(33.8, 56.9% ,70%)
khaki rgb(240,230,140) hsl(54, 76.9% ,74.5%)
lightgreen rgb(144,238,144) hsl(120, 73.4% ,74.9%)
aquamarine rgb(127,255,212) hsl(159.8, 100% ,74.9%)
skyblue rgb(135,206,235) hsl(197.4, 71.4% ,72.5%)
lightskyblue rgb(135,206,250) hsl(203, 92% ,75.5%)
plum rgb(221,160,221) hsl(300, 47.3% ,74.7%)
violet rgb(238,130,238) hsl(300, 76.1% ,72.2%)
indianred rgb(205,92,92) hsl(0, 53.1% ,58.2%)
peru rgb(205,133,63) hsl(29.6, 58.7% ,52.5%)
tan rgb(210,180,140) hsl(39.2, 45.5% ,67.6%)
darkkhaki rgb(189,183,107) hsl(55.6, 38.3% ,58%)
mediumaquamarine rgb(102,205,170) hsl(159.6, 50.7% ,60.2%)
mediumturquoise rgb(72,209,204) hsl(177.8, 59.8% ,55.1%)
turquoise rgb(64,224,208) hsl(180.9, 100% ,41%)
cornflowerblue rgb(100,149,237) hsl(218.5, 79.2% ,66.1%)
royalblue rgb(65,105,225) hsl(225, 72.7% ,56.9%)
mediumslateblue rgb(123,104,238) hsl(248.5, 79.8% ,67.1%)
blueviolet rgb(138,43,226) hsl(271.1, 75.9% ,52.7%)
slateblue rgb(106,90,205) hsl(248.3, 53.5% ,57.8%)
mediumpurple rgb(147,112,219) hsl(259.6, 59.8% ,64.9%)
mediumorchid rgb(186,85,211) hsl(288.1, 58.9% ,58%)
orchid rgb(218,112,214) hsl(280.1, 60.6% ,49.8%)
palevioletred rgb(219,112,147) hsl(340.4, 59.8% ,64.9%)
red(*1) rgb(255,0,0) hsl(0, 100% ,50%)
orangered rgb(255,69,0) hsl(16.2, 100% ,50%)
tomato rgb(255,99,71) hsl(9.1, 100% ,63.9%)
coral rgb(255,127,80) hsl(16.1, 100% ,65.7%)
darkorange rgb(255,140,0) hsl(347, 100% ,77.5%)
orange(*1) rgb(255,165,0) hsl(38.8, 100% ,50%)
gold rgb(255,215,0) hsl(50.6, 100% ,50%)
yellow (*1) rgb(255,255,0) hsl(60, 100% ,50%)
greenyellow rgb(173,255,47) hsl(83.7, 100% ,59.2%)
chartreuse rgb(127,255,0) hsl(90.1, 100% ,50%)
lawngreen rgb(124,252,0) hsl(90.5, 100% ,49.4%)
lime (*1) rgb(0,255,0) hsl(120, 100% ,50%)
springgreen rgb(0,255,127) hsl(157, 100% ,49%)
mediumspringgreen rgb(0,250,154) hsl(146.7, 49.8% ,46.9%)
aqua (*1)(*2) rgb(0,255,255) hsl(180, 100% ,50%)
darkturquoise rgb(0,206,209) hsl(180.9, 100% ,41%)
deepskyblue rgb(0,191,255) hsl(195.1, 100% ,50%)
dodgerblue rgb(30,144,255) hsl(209.6, 100% ,55.9%)
blue (*1) rgb(0,0,255) hsl(240, 100% ,50%)
mediumblue rgb(0,0,205) hsl(240, 100% ,40.2%)
darkviolet rgb(148,0,211) hsl(282.1, 100% ,41.4%)
fuchsia (*1)(*3) rgb(255,0,255) hsl(300, 100% ,27.3%)
deeppink rgb(255,20,147) hsl(327.6, 100% ,53.9%)
hotpink rgb(255,105,180) hsl(330, 100% ,70.6%)
firebrick rgb(178,34,34) hsl(0, 67.9% ,41.6%)
brown rgb(165,42,42) hsl(0, 59.4% ,40.6%)
sienna rgb(160,82,45) hsl(19.3, 56.1% ,40.2%)
chocolate rgb(210,105,30) hsl(25, 75% ,47.1%)
darkgoldenrod rgb(184,134,11) hsl(42.7, 88.7% ,38.2%)
goldenrod rgb(218,165,32) hsl(42.9, 74.4% ,49%)
yellowgreen rgb(154,205,50) hsl(79.7, 60.8% ,50%)
limegreen rgb(50,205,50) hsl(120, 60.8% ,50%)
mediumseagreen rgb(60,179,113) hsl(146.7, 49.8% ,46.9%)
lightseagreen rgb(32,178,170) hsl(165.6, 69.5% ,41.2%)
steelblue rgb(70,130,180) hsl(207.3, 44% ,49%)
darkslateblue rgb(72,61,139) hsl(248.5, 39% ,39.2%)
darkorchid rgb(153,50,204) hsl(280.1, 60.6% ,49.8%)
mediumvioletred rgb(199,21,133) hsl(322.2, 80.9% ,43.1%)
crimson rgb(220,20,60) hsl(348, 83.3% ,47.1%)
darkred rgb(139,0,0) hsl(0, 100% ,27.3%)
maroon(*1) rgb(128,0,0) hsl(0, 100% ,25.1%)
saddlebrown rgb(139,69,19) hsl(25, 75.9% ,31%)
olive (*1) rgb(128,128,0) hsl(60, 100% ,25.1%)
olivedrab rgb(107,142,35) hsl(79.6, 60.5% ,34.7%)
darkolivegreen rgb(85,107,47) hsl(82, 39% ,30.2%)
forestgreen rgb(34,139,34) hsl(120, 60.7% ,33.9%)
green (*1) rgb(0,128,0) hsl(120, 100% ,25.1%)
darkgreen rgb(0,100,0) hsl(120, 100% ,25.1%)
seagreen rgb(46,139,87) hsl(146.5, 50.3% ,36.3%)
darkcyan rgb(0,139,139) hsl(180, 100% ,27.3%)
teal (*1) rgb(0,128,128) hsl(180, 100% ,25.1%)
darkblue rgb(0,0,139) hsl(240, 100% ,27.3%)
midnightblue rgb(25,25,112) hsl(240, 63.5% ,26.9%)
navy (*1) rgb(0,0,128) hsl(240, 100% ,25.1%)
indigo rgb(75,0,130) hsl(274.6, 100% ,25.5%)
darkmagenta rgb(139,0,139) hsl(300, 100% ,27.3%)
purple (*1) rgb(128,0,128) hsl(300, 100% ,25.1%)
rosybrown rgb(188,143,143) hsl(0, 25.1% ,64.9%)
darkseagreen rgb(143,188,143) hsl(120, 25.1% ,64.9%)
darkslategray (*4) rgb(47,79,79) hsl(180, 25.4% ,24.7%)
cadetblue rgb(95,158,160) hsl(181.8, 25.5% ,50%)
lightslategray (*4) rgb(119,136,153) hsl(210, 14.3% ,53.3%)
slategray (*4) rgb(112,128,144) hsl(210, 12.6% ,50.2%)
white (*1) rgb(255,255,255) hsl(0, 0% ,100%)
whitesmoke rgb(245,245,245) hsl(0, 0% ,96.1%)
gainsboro rgb(220,220,220) hsl(0, 0% ,86.3%)
lightgray (*4) rgb(211,211,211) hsl(0, 0% ,82.7%)
silver (*1) rgb(192,192,192) hsl(0, 0% ,75.3%)
darkgray (*4) rgb(169,169,169) hsl(0, 0% ,66.3%)
gray (*1)(*4) rgb(128,128,128) hsl(0, 0% ,50.2%)
dimgray (*4) rgb(105,105,105) hsl(0, 0% ,41.2%)
black (*1) rgb(0,0,0) hsl(0, 0% ,0%)

表1:CSS3カラーキーワード・チャート

CSS3では拡張色として以上の138色(+別名10色)が定義されている。色キーワードの関係としては、

ということになっている。X11の色名称は、Netscapeカラーパレットとして初期のバージョンに一部の色にバグがありながらもかなり昔のNetscapeには実装されていた。よって、色をサポートしているブラウザが色キーワードを解釈できず、色が出ないということはまずないと思われる。なお、X11の色名称の経緯については、なぜCSSのカラー名には「トマト」「レモン・シフォン」のような名前がつけられているのか? - GIGAZINEが詳しい。

また、透明を表すtransparentinheritのような振る舞いをするcurrentColorといったキーワードも定義されている。後者に関しては、ご存じですか?colorプロパティ 3.currentColorキーワードで詳しく取り上げられている。

なお、これらのキーワードは、CSS 2.1の構文規則により、大文字小文字を区別しない(CSS 2.1 4.1.3 文字と活字ケース)。

HSLについて

CSS3 colorではRGBによる色指定に加え、HSL(HLSと呼ばれることもある)による色指定が加わった。HSLの定義は、

というものである。彩度100%、輝度50%としたときの色見本を表2に示す。

HSLによる色指定に対応していれば(IE7までは非対応)、HSLカラーテーブルは表示される。カラーキーワードでHSL値を示しているので、あわせて参照すれば、HSLのイメージがつかめると思う。

coding

...
<td style="background-color:hsl(0, 100%, 50%)"> </td><!--red-->
...
<td style="background-color:hsl(120, 100%, 50%)"> </td><!--green-->
...
<td style="background-color:hsl(240, 100%, 50%)"> </td><!--blue-->
...

透明度について

opacityrgba()(とhsla())の2種類で透明度がCSSでは指定できる。どちらも<alphavalue>として0から1の範囲で透明度を指定できるが、前者はプロパティーに対して、後者はプロパティー値となるのが最大の違いとなる。つまり、opacityは要素全体に効果が現れるのに対し、rgba()はそのプロパティーのみに効果が現れる。表3で実際に違いを見てみる。

...
<tr>
<td style="background-color:rgb(178,34,34);opacity: 0;">opacity testing</td><!-- 完全に透明 -->
<td style="background-color:rgba(178,34,34,0);">opacity testing</td>
</tr>
<tr>
<td style="background-color:rgb(178,34,34);opacity: 0.2;">opacity testing</td>
<td style="background-color:rgba(178,34,34,0.2);">opacity testing</td>
</tr>
<tr>
<td style="background-color:rgb(178,34,34);opacity: 0.5;">opacity testing</td>
<td style="background-color:rgba(178,34,34,0.5);">opacity testing</td>
</tr>
<tr>
<td style="background-color:rgb(178,34,34);opacity: 0.8;">opacity testing</td>
<td style="background-color:rgba(178,34,34,0.8);">opacity testing</td>
</tr>
<tr>
<td style="background-color:rgb(178,34,34);opacity: 1;">opacity testing</td><!-- 完全に不透明 -->
<td style="background-color:rgba(178,34,34,1);">opacity testing</td>
</tr>
...

なお、透明度をブラウザが解釈できないとき、CSSの構文解釈規則によりopacityrgba()はそれぞれ無視される。つまり、前者を設定したときは透明度の設定のみが無視されるのに対し、後者は色そのものが無視されることになる。

応用的な例として、CSS LectureによるCSS3 要素を透明に出来る Opacity と RGBa の使い方のデモページも参考になる。

色に関連するアクセシビリティー・ガイドライン(WCAG 2.0)

CSS3には規定も参照もされていないが、アクセシビリティの観点から、高齢者や視覚に障害を持つなどの、色の区別がしにくい・難しい人にも配慮した配色が求められるだろう。以下に色に関連すると思われるアクセシビリティー・ガイドラインへの日本語訳リンクを示す。

関連するウェブページとして、色の組み合わせチェック - 読みやすい前景色と背景色を挙げておく。

仕様書と参考資料

CSS Color Module Level 3 (2011-06-07 REC)
http://www.w3.org/TR/2011/REC-css3-color-20110607/
CSS カラーモジュール Level 3 (2011-06-07 RECに一致)
http://standards.mitsue.co.jp/resources/w3c/TR/css3-color/
HSL色空間
http://ja.wikipedia.org/wiki/HLS%E8%89%B2%E7%A9%BA%E9%96%93
CSS3大接近:第2回 OpacityとRGBa実践テクニック|gihyo.jp … 技術評論社
http://gihyo.jp/design/feature/01/css3-approach/0002
CSS3 要素を透明に出来る Opacity と RGBa の使い方 | CSS Lecture
http://www.css-lecture.com/log/css3/css3-opacity-rgba.html
透明度を表す「opacity」 と 「RGBa」の違いと使い分け|Webpark
http://weboook.blog22.fc2.com/blog-entry-282.html
第二回 W3C CSS Module 仕様書もくもく会@東京 - Color Module Level 3 を読む
http://togetter.com/li/889862