Yourpedia:ウェブカラー

2015-05-31T03:25:13Z

アクセスアップ.NET: ウェブカラーをYourpedia:ウェブカラーへ移動

'''ウェブカラー'''（{{lang-en-short|Web colors}}）は[[World Wide Web|ウェブ]]ページのデザインで使う色であり、その色を指定し記述する方法である。16進の色コードはハッシュ記号 (#) が先頭に付与される<ref>{{lang|en|Jennifer Niederst Robbins}} 著、「{{lang|en|Web Design in a Nutshell}}」、103ページ</ref><ref>{{lang|en|Richard York}} 著、「{{lang|en|Beginning CSS}}」、71-72ページ</ref> 。

ウェブページのデザインにあたって、ウェブ文書の要素として色を指定する方法はいくつかある。[[RGB]]の三つ組みの[[十六進法|16進数]]形式（16進トリプレット）で色を指定することもできる。場合によっては、色名称をつかって指定することもできる。[[カラーツール]]や他の[[グラフィックソフトウェア]]を色の値を生成するのに使うことが比較的多い。

初期の [[NCSA Mosaic|Mosaic]] や [[Netscape Navigator (ネットスケープコミュニケーションズ)|Netscape Navigator]] はどちらも [[X Window System]] のアプリケーションとして始まったということもあり、[[X11の色名称]]を基盤としていた<ref>[http://www.splus.com/support/splus80win/graphics.pdf Guide to Graphics]. SP LUS, splus.com. Page 13.{{リンク切れ|date=2011年3月}}</ref>。

ウェブカラーには [[:en:sRGB|sRGB]] という明確な比色分析的定義があり、特定の蛍光体の色度、所定の伝達曲線、順応性のホワイトポイント、観察条件などに基づいている<ref>{{lang|en|Gaurav Sharma}} 著、「{{lang|en|Digital Color Imaging Handbook}}」（ISBN {{ISBN|084930900X}}）</ref>。これは一般的なコンピュータのモニターとそれを人間が見る環境に合うように選択されており、[[カラーマネージメントシステム]]なしでもそれなりの色再現性がある。しかし、指定された色を再現する忠実度はユーザーの環境に左右される。よりよい色忠実度を実現するには、カラーマネジメントを使ったよりよい環境を必要とする。これはウェブのコンテンツを紙に印刷する際に特に重要である。

== 16進トリプレット表記 ==
'''16進トリプレット'''は[[十六進法|16進数]]6桁、3バイトの数値であり、[[HyperText Markup Language|HTML]]、[[Cascading Style Sheets|CSS]]、[[Scalable Vector Graphics|SVG]]やその他のアプリケーションで[[色]]を表すのに使用する。それぞれのバイトが色の赤・緑・青の成分を表す。1つのバイトは（16進数で）00からFFまでの数値を表し、10進では0から255である。これにより、それぞれの成分の強さを最小 (0) から最大 (255)の範囲で表す。16進トリプレットはこの3つのバイトを並べたもので、その配置順序は次の通りである。
* 1バイトめ - 赤の値
* 2バイトめ - 緑の値
* 3バイトめ - 青の値
例えば、赤/緑/青の値が10進で、赤は36、緑は104、青は160 という色があるとする（灰色がかった青）。10進数の36、104、160をそれぞれ16進数で表すと24、68、A0となる。この色を16進トリプレットで表すと 2468A0 となる。

なお、10進で16未満、16進で10未満の値の場合、ゼロを前置してトリプレットを常に6桁に保つ必要がある。たとえば10進で 4、8、16という値なら16進では 04、08、10となり、16進トリプレットは 040810 となる。

この体系で表現できる色の数（種類）は次のようになる。
:<math>256 \times 256 \times 256 = 16,777,216</math>

16進トリプレットを短縮し、16進3桁で表現する方式もある<ref>[http://www.w3.org/TR/css3-color/#rgb-color CSS3 color module]</ref>。このフォーマットを通常の16進トリプレットに変換するには、各桁を繰り返せばよく、例えば 09C なら 0099CC とすればよい。この3桁のフォーマットは[[Cascading Style Sheets|CSS]]の仕様にあり、HTMLの色指定では規格外となっている<ref>[http://www.w3.org/TR/html401/sgml/loosedtd.html#Color HTML4 Transitional Document Type Definition]</ref>。

=== RGBから16進への変換 ===
RGBのそれぞれの値は一般に0から255の範囲で与えられる。0から1の小数で表す場合、255倍すればよい。この値を16で割り、「'''○余り△'''」の形にする。○と△を表の通りに変換して「'''●▲'''」のように並べたものが16進形式である。

{|class=wikitable style="line-height:1.2"
!○または△!!●または▲
|- style="background: #FFF;"
|0||0
|-
|1||1
|- style="background: #FFF;"
|2||2
|-
|3||3
|- style="background: #FFF;"
|4||4
|-
|5||5
|- style="background: #FFF;"
|6||6
|-
|7||7
|- style="background: #FFF;"
|8||8
|-
|9||9
|- style="background: #FFF;"
|10||A
|-
|11||B
|- style="background: #FFF;"
|12||C
|-
|13||D
|- style="background: #FFF;"
|14||E
|-
|15||F
|}

例えば、RGBの値が201なら、それを16で割ると12が得られるので、一桁目はCとなる。その余りは9なので、全体としてはC9となる。これを[[三原色]]それぞれについて繰り返す。

基数の変換は[[関数電卓]]など一部の電卓にもある機能である。ウェブ上にもこのような変換を行うツールが存在する。

== HTMLでの色名称 ==
[[HyperText Markup Language|HTML]] 4.01 仕様<ref>[http://www.w3.org/TR/REC-html40/types.html#h-6.5 HTML 4.01 Specification section 6.5 "Colors"]</ref>では16の基本的な色名称を次のように定義している（大文字/小文字は区別しない）。

{{Colort|caption=CSS1 / HTML3–4 / VGA の色名称|html_name=1|alias=[[Color Graphics Adapter|CGA]]での番号と名称|width=auto}}
{{Colort/Color|r=255|g=255|b=255|h=0|s=0|v=100|name=[[白|White]]|html_name=15 {{color|#FFF|(white)}}}}
{{Colort/Color|r=192|g=192|b=192|h=0|s=0|v=75|name=[[銀色|Silver]]|html_name={{0}}7 {{color|#AAA|(light gray)}}}}
{{Colort/Color|r=128|g=128|b=128|h=0|s=0|v=50|name=[[灰色|Gray]]|html_name={{0}}8 {{color|#555|(dark gray)}}}}
{{Colort/Color|r=0|g=0|b=0|h=0|s=0|v=0|name=[[黒|Black]]|html_name={{0}}0 {{color|#000|(black)}}}}
{{Colort/Color|r=255|g=0|b=0|h=0|s=100|v=100|name=[[赤|Red]]|html_name=12 {{color|#F55|(high red)}}}}
{{Colort/Color|r=128|g=0|b=0|h=0|s=100|v=50|name=[[マルーン (色)|Maroon]]|html_name={{0}}4 {{color|#A00|(low red)}}}}
{{Colort/Color|r=255|g=255|b=0|h=60|s=100|v=100|name=[[黄色|Yellow]]|html_name=14 {{color|#FF5|(yellow)}}}}
{{Colort/Color|r=128|g=128|b=0|h=60|s=100|v=50|name=[[オリーブ色|Olive]]|html_name={{0}}6 {{color|#A50|(brown)}}}}
{{Colort/Color|r=0|g=255|b=0|h=120|s=100|v=100|name=[[ライムグリーン|Lime]]|html_name=10 {{color|#5F5|(high green)}}; green}}
{{Colort/Color|r=0|g=128|b=0|h=120|s=100|v=50|name=[[緑|Green]]|html_name={{0}}2 {{color|#0A0|(low green)}}}}
{{Colort/Color|r=0|g=255|b=255|h=180|s=100|v=100|name=[[水色|Aqua]]|html_name=11 {{color|#5FF|(high cyan)}}; cyan}}
{{Colort/Color|r=0|g=128|b=128|h=180|s=100|v=50|name=[[鴨の羽色|Teal]]|html_name={{0}}3 {{color|#0AA|(low cyan)}}}}
{{Colort/Color|r=0|g=0|b=255|h=240|s=100|v=100|name=[[青|Blue]]|html_name={{0}}9 {{color|#55F|(high blue)}}}}
{{Colort/Color|r=0|g=0|b=128|h=240|s=100|v=50|name=[[ネイビー|Navy]]|html_name={{0}}1 {{color|#00A|(low blue)}}}}
{{Colort/Color|r=255|g=0|b=255|h=300|s=100|v=100|name=[[フクシャ|Fuchsia]]|html_name=13 {{color|#F5F|(high magenta)}}; magenta}}
{{Colort/Color|r=128|g=0|b=128|h=300|s=100|v=50|name=[[紫|Purple]]|html_name={{0}}5 {{color|#A0A|(low magenta)}}}}
|}

これら16色は HTML 3.0 仕様にも sRGB で示されており、「この標準16色は Windows の [[Video Graphics Array|VGA]] パレットでサポートされている」とある<ref>[http://www.w3.org/TR/REC-html32#body HTML 3.2 Specification "The BODY element"]</ref>。

== X11の色名称 ==
{{Main|X11の色名称}}
基本16色に加えて、[[ウェブブラウザ]]により多くの色が定義されている。特定のブラウザがそれらの色全てを認識できるとは限らないが、2005年時点のよく使われているブラウザは全色をサポートしている。これらの色は [[X Window System]] と共に普及した[[X11の色名称]]に基づいているものが多い。これらの色は [[Scalable Vector Graphics|SVG 1.0]] で標準化され、SVG Full に対応した[[ユーザーエージェント]]が受け付ける（SVG Tiny にはこれらの標準は含まれない）。

X11製品に付属する色名称一覧ファイルの内容は実装によって差異があり、HTML での色名称と食い違いも存在する（greenなど）。さらにX11での定義は [[:en:sRGB|sRGB]] のような特定の色空間を前提としていない単なる[[RGB]]としての定義である。すなわち、X11にある色名称一覧ファイル（例えば、/usr/lib/X11/rgb.txt）をそのままウェブ上での色の選択に使うのは好ましくない<ref>[http://lists.w3.org/Archives/Public/www-svg/2002Apr/0052.html Public discussion on SVG mailing list ''Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt'']</ref>。

CSS3 仕様でウェブ用の "X11 colors" として定義されている色の一覧を16進と10進の値と共に示す。なお、同じ色で別名が示されているものもある。aqua（HTML4/CSS 1.0 での標準名）とcyan（sRGBでの名前）、magenta（sRGBでの名前）とfuchsia（HTML4/CSS 1.0 での標準名）、gray（HTML4/CSS 1.0 での標準名）と grey である<ref>[http://www.w3.org/TR/css3-color/#svg-color W3C TR CSS3 Color Module, SVG color keywords]</ref><ref>[http://www.w3.org/TR/SVG/types.html#ColorKeywords W3C TR SVG 1.0, recognized color keyword names]</ref>。

{|style="font-size:90%" cellpadding="4"
|-valign="top"
|
{|border="0"
|-
!style="background:lightgrey"|[[HyperText Markup Language|HTML]]での名称
!style="background:lightgrey"|[[#16進トリプレット表記|16進]] [[RGB|R/G/B]]
!style="background:lightgrey"|[[RGB#数値表示|10進]] [[RGB|R/G/B]]
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''赤系の色'''</big>
|-style="background:indianred;color:white"
|IndianRed ||<tt>CD 5C 5C</tt>||<tt>205  92  92</tt>
|-style="background:lightcoral;color:black"
|LightCoral ||<tt>F0 80 80</tt>||<tt>240 128 128</tt>
|-style="background:salmon;color:black"
|Salmon ||<tt>FA 80 72</tt>||<tt>250 128 114</tt>
|-style="background:darksalmon;color:black"
|DarkSalmon ||<tt>E9 96 7A</tt>||<tt>233 150 122</tt>
|-style="background:lightsalmon;color:black"
|LightSalmon ||<tt>FF A0 7A</tt>||<tt>255 160 122</tt>
|-style="background:crimson;color:white;color:white"
|Crimson ||<tt>DC 14 3C</tt>||<tt>220  20  60</tt>
|-style="background:red;color:white"
|Red ||<tt>FF 00 00</tt>||<tt>255   0   0</tt>
|-style="background:fireBrick;color:white"
|FireBrick ||<tt>B2 22 22</tt>||<tt>178  34  34</tt>
|-style="background:darkred;color:white"
|DarkRed ||<tt>8B 00 00</tt>||<tt>139   0   0</tt>
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''ピンク系の色'''</big>
|-style="background:pink;color:black"
|Pink ||<tt>FF C0 CB</tt>||<tt>255 192 203</tt>
|-style="background:lightpink;color:black"
|LightPink ||<tt>FF B6 C1</tt>||<tt>255 182 193</tt>
|-style="background:hotpink;color:white"
|HotPink ||<tt>FF 69 B4</tt>||<tt>255 105 180</tt>
|-style="background:deeppink;color:white"
|DeepPink ||<tt>FF 14 93</tt>||<tt>255  20 147</tt>
|-style="background:mediumvioletred;color:white"
|MediumVioletRed ||<tt>C7 15 85</tt>||<tt>199  21 133</tt>
|-style="background:palevioletred;color:white"
|PaleVioletRed ||<tt>DB 70 93</tt>||<tt>219 112 147</tt>
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''橙系の色'''</big>
|-style="background:lightsalmon;color:black"
||LightSalmon ||<tt>FF A0 7A</tt>||<tt>255 160 122</tt>
|-style="background:coral;color:white"
|Coral ||<tt>FF 7F 50</tt>||<tt>255 127  80</tt>
|-style="background:tomato;color:white"
|Tomato ||<tt>FF 63 47</tt>||<tt>255  99  71</tt>
|-style="background:orangered;color:white"
|OrangeRed ||<tt>FF 45 00</tt>||<tt>255  69   0</tt>
|-style="background:darkorange;color:white"
|DarkOrange ||<tt>FF 8C 00</tt>||<tt>255 140   0</tt>
|-style="background:orange;color:white"
|Orange ||<tt>FF A5 00</tt>||<tt>255 165   0</tt>
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''黄系の色'''</big>
|-style="background:gold;color:black"
|Gold ||<tt>FF D7 00</tt>||<tt>255 215   0</tt>
|-style="background:yellow;color:black"
|Yellow ||<tt>FF FF 00</tt>||<tt>255 255   0</tt>
|-style="background:lightyellow;color:black"
|LightYellow ||<tt>FF FF E0</tt>||<tt>255 255 224</tt>
|-style="background:lemonchiffon;color:black"
|LemonChiffon ||<tt>FF FA CD</tt>||<tt>255 250 205</tt>
|-style="background:lightgoldenrodyellow;color:black"
|LightGoldenrodYellow||<tt>FA FA D2</tt>||<tt>250 250 210</tt>
|-style="background:papayawhip;color:black"
|PapayaWhip ||<tt>FF EF D5</tt>||<tt>255 239 213</tt>
|-style="background:moccasin;color:black"
|Moccasin ||<tt>FF E4 B5</tt>||<tt>255 228 181</tt>
|-style="background:peachpuff;color:black"
|PeachPuff ||<tt>FF DA B9</tt>||<tt>255 218 185</tt>
|-style="background:palegoldenrod;color:black"
|PaleGoldenrod ||<tt>EE E8 AA</tt>||<tt>238 232 170</tt>
|-style="background:khaki;color:black"
|Khaki ||<tt>F0 E6 8C</tt>||<tt>240 230 140</tt>
|-style="background:darkkhaki;color:black"
|DarkKhaki ||<tt>BD B7 6B</tt>||<tt>189 183 107</tt>
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''紫系の色'''</big>
|-style="background:lavender;color:black"
|Lavender ||<tt>E6 E6 FA</tt>||<tt>230 230 250</tt>
|-style="background:thistle;color:black"
|Thistle ||<tt>D8 BF D8</tt>||<tt>216 191 216</tt>
|-style="background:plum;color:black"
|Plum ||<tt>DD A0 DD</tt>||<tt>221 160 221</tt>
|-style="background:violet;color:black"
|Violet ||<tt>EE 82 EE</tt>||<tt>238 130 238</tt>
|-style="background:orchid;color:black"
|Orchid ||<tt>DA 70 D6</tt>||<tt>218 112 214</tt>
|-style="background:fuchsia;color:white"
|Fuchsia ||<tt>FF 00 FF</tt>||<tt>255   0 255</tt>
|-style="background:Magenta;color:white"
|Magenta ||<tt>FF 00 FF</tt>||<tt>255   0 255</tt>
|-style="background:mediumorchid;color:white"
|MediumOrchid ||<tt>BA 55 D3</tt>||<tt>186  85 211</tt>
|-style="background:mediumpurple;color:white"
|MediumPurple ||<tt>93 70 DB</tt>||<tt>147 112 219</tt>
|-style="background:#9966CC;color:white"
|Amethyst ||<tt>99 66 CC</tt>||<tt>153 102 204</tt>
|-style="background:blueviolet;color:white"
|BlueViolet ||<tt>8A 2B E2</tt>||<tt>138  43 226</tt>
|-style="background:darkviolet;color:white"
|DarkViolet ||<tt>94 00 D3</tt>||<tt>148   0 211</tt>
|-style="background:darkorchid;color:white"
|DarkOrchid ||<tt>99 32 CC</tt>||<tt>153  50 204</tt>
|-style="background:darkmagenta;color:white"
|DarkMagenta ||<tt>8B 00 8B</tt>||<tt>139   0 139</tt>
|-style="background:purple;color:white"
|Purple ||<tt>80 00 80</tt>||<tt>128   0 128</tt>
|-style="background:indigo;color:white"
|Indigo ||<tt>4B 00 82</tt>||<tt> 75   0 130</tt>
|-style="background:slateblue;color:white"
|SlateBlue ||<tt>6A 5A CD</tt>||<tt>106  90 205</tt>
|-style="background:darkslateblue;color:white"
|DarkSlateBlue ||<tt>48 3D 8B</tt>||<tt> 72  61 139</tt>
|-style="background:mediumslateblue;color:white"
|MediumSlateBlue ||<tt>7B 68 EE</tt>||<tt>123 104 238</tt>
|}
|
{|
|-
!style="background:lightgrey"|[[HyperText Markup Language|HTML]]での名称
!style="background:lightgrey"|[[#16進トリプレット表記|16進]] [[RGB|R/G/B]]
!style="background:lightgrey"|[[RGB#数値表示|10進]] [[RGB|R/G/B]]
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''緑系の色'''</big>
|-style="background:greenyellow;color:black"
|GreenYellow ||<tt>AD FF 2F</tt>||<tt>173 255  47</tt>
|-style="background:chartreuse;color:black"
|Chartreuse ||<tt>7F FF 00</tt>||<tt>127 255   0</tt>
|-style="background:lawngreen;color:black"
|LawnGreen ||<tt>7C FC 00</tt>||<tt>124 252   0</tt>
|-style="background:lime;color:black"
|Lime ||<tt>00 FF 00</tt>||<tt>  0 255   0</tt>
|-style="background:limegreen;color:black"
|LimeGreen ||<tt>32 CD 32</tt>||<tt> 50 205  50</tt>
|-style="background:palegreen;color:black"
|PaleGreen ||<tt>98 FB 98</tt>||<tt>152 251 152</tt>
|-style="background:lightgreen;color:black"
|LightGreen ||<tt>90 EE 90</tt>||<tt>144 238 144</tt>
|-style="background:mediumspringgreen;color:black"
|MediumSpringGreen ||<tt>00 FA 9A</tt>||<tt>  0 250 154</tt>
|-style="background:springgreen;color:black"
|SpringGreen ||<tt>00 FF 7F</tt>||<tt>  0 255 127</tt>
|-style="background:mediumseagreen;color:white"
|MediumSeaGreen ||<tt>3C B3 71</tt>||<tt> 60 179 113</tt>
|-style="background:seagreen;color:white"
|SeaGreen ||<tt>2E 8B 57</tt>||<tt> 46 139  87</tt>
|-style="background:forestgreen;color:white"
|ForestGreen ||<tt>22 8B 22</tt>||<tt> 34 139  34</tt>
|-style="background:green;color:white"
|Green ||<tt>00 80 00</tt>||<tt>  0 128   0</tt>
|-style="background:darkgreen;color:white"
|DarkGreen ||<tt>00 64 00</tt>||<tt>  0 100   0</tt>
|-style="background:yellowgreen;color:black"
|YellowGreen ||<tt>9A CD 32</tt>||<tt>154 205  50</tt>
|-style="background:olivedrab;color:white"
|OliveDrab ||<tt>6B 8E 23</tt>||<tt>107 142  35</tt>
|-style="background:olive;color:white"
|Olive ||<tt>80 80 00</tt>||<tt>128 128   0</tt>
|-style="background:darkolivegreen;color:white"
|DarkOliveGreen ||<tt>55 6B 2F</tt>||<tt> 85 107  47</tt>
|-style="background:mediumaquamarine;color:black"
|MediumAquamarine ||<tt>66 CD AA</tt>||<tt>102 205 170</tt>
|-style="background:darkseagreen;color:black"
|DarkSeaGreen ||<tt>8F BC 8F</tt>||<tt>143 188 143</tt>
|-style="background:lightseagreen;color:white"
|LightSeaGreen ||<tt>20 B2 AA</tt>||<tt> 32 178 170</tt>
|-style="background:darkcyan;color:white"
|DarkCyan ||<tt>00 8B 8B</tt>||<tt>  0 139 139</tt>
|-style="background:teal;color:white"
|Teal ||<tt>00 80 80</tt>||<tt>  0 128 128</tt>
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''青系の色'''</big>
|-style="background:aqua;color:black"
|Aqua ||<tt>00 FF FF</tt>||<tt>  0 255 255</tt>
|-style="background:cyan;color:black"
|Cyan ||<tt>00 FF FF</tt>||<tt>  0 255 255</tt>
|-style="background:lightcyan;color:black"
|LightCyan ||<tt>E0 FF FF</tt>||<tt>224 255 255</tt>
|-style="background:paleturquoise;color:black"
|PaleTurquoise ||<tt>AF EE EE</tt>||<tt>175 238 238</tt>
|-style="background:aquamarine;color:black"
|Aquamarine ||<tt>7F FF D4</tt>||<tt>127 255 212</tt>
|-style="background:turquoise;color:black"
|Turquoise ||<tt>40 E0 D0</tt>||<tt> 64 224 208</tt>
|-style="background:mediumturquoise;color:black"
|MediumTurquoise ||<tt>48 D1 CC</tt>||<tt> 72 209 204</tt>
|-style="background:darkturquoise;color:white"
|DarkTurquoise ||<tt>00 CE D1</tt>||<tt>  0 206 209</tt>
|-style="background:cadetblue;color:white"
|CadetBlue ||<tt>5F 9E A0</tt>||<tt> 95 158 160</tt>
|-style="background:steelblue;color:white"
|SteelBlue ||<tt>46 82 B4</tt>||<tt> 70 130 180</tt>
|-style="background:lightsteelblue;color:black"
|LightSteelBlue ||<tt>B0 C4 DE</tt>||<tt>176 196 222</tt>
|-style="background:powderblue;color:black"
|PowderBlue ||<tt>B0 E0 E6</tt>||<tt>176 224 230</tt>
|-style="background:lightblue;color:black"
|LightBlue ||<tt>AD D8 E6</tt>||<tt>173 216 230</tt>
|-style="background:skyblue;color:black"
|SkyBlue ||<tt>87 CE EB</tt>||<tt>135 206 235</tt>
|-style="background:lightskyblue;color:black"
|LightSkyBlue ||<tt>87 CE FA</tt>||<tt>135 206 250</tt>
|-style="background:deepskyblue;color:white"
|DeepSkyBlue ||<tt>00 BF FF</tt>||<tt>  0 191 255</tt>
|-style="background:dodgerblue;color:white"
|DodgerBlue ||<tt>1E 90 FF</tt>||<tt> 30 144 255</tt>
|-style="background:cornflowerblue;color:white"
|CornflowerBlue ||<tt>64 95 ED</tt>||<tt>100 149 237</tt>
|-style="background:mediumslateblue;color:white"
|MediumSlateBlue ||<tt>7B 68 EE</tt>||<tt>123 104 238</tt>
|-style="background:royalblue;color:white"
|RoyalBlue ||<tt>41 69 E1</tt>||<tt> 65 105 225</tt>
|-style="background:blue;color:white"
|Blue ||<tt>00 00 FF</tt>||<tt>  0   0 255</tt>
|-style="background:mediumblue;color:white"
|MediumBlue ||<tt>00 00 CD</tt>||<tt>  0   0 205</tt>
|-style="background:darkblue;color:white"
|DarkBlue ||<tt>00 00 8B</tt>||<tt>  0   0 139</tt>
|-style="background:navy;color:white"
|Navy ||<tt>00 00 80</tt>||<tt>  0   0 128</tt>
|-style="background:midnightblue;color:white"
|MidnightBlue ||<tt>19 19 70</tt>||<tt> 25  25 112</tt>
|}
|
{|
|-
!style="background:lightgrey"|[[HyperText Markup Language|HTML]]での名称
!style="background:lightgrey"|[[#16進トリプレット表記|16進]] [[RGB|R/G/B]]
!style="background:lightgrey"|[[RGB#数値表示|10進]] [[RGB|R/G/B]]
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''茶系の色'''</big>
|-style="background:cornsilk;color:black"
|Cornsilk ||<tt>FF F8 DC</tt>||<tt>255 248 220</tt>
|-style="background:blanchedalmond;color:black"
|BlanchedAlmond ||<tt>FF EB CD</tt>||<tt>255 235 205</tt>
|-style="background:bisque;color:black"
|Bisque ||<tt>FF E4 C4</tt>||<tt>255 228 196</tt>
|-style="background:navajowhite;color:black"
|NavajoWhite ||<tt>FF DE AD</tt>||<tt>255 222 173</tt>
|-style="background:wheat;color:black"
|Wheat ||<tt>F5 DE B3</tt>||<tt>245 222 179</tt>
|-style="background:burlywood;color:black"
|BurlyWood ||<tt>DE B8 87</tt>||<tt>222 184 135</tt>
|-style="background:tan;color:black"
|Tan ||<tt>D2 B4 8C</tt>||<tt>210 180 140</tt>
|-style="background:rosybrown;color:black"
|RosyBrown ||<tt>BC 8F 8F</tt>||<tt>188 143 143</tt>
|-style="background:sandybrown;color:black"
|SandyBrown ||<tt>F4 A4 60</tt>||<tt>244 164  96</tt>
|-style="background:goldenrod;color:black"
|Goldenrod ||<tt>DA A5 20</tt>||<tt>218 165  32</tt>
|-style="background:darkgoldenrod;color:white"
|DarkGoldenrod ||<tt>B8 86 0B</tt>||<tt>184 134  11</tt>
|-style="background:Peru;color:white"
|Peru ||<tt>CD 85 3F</tt>||<tt>205 133  63</tt>
|-style="background:chocolate;color:white"
|Chocolate ||<tt>D2 69 1E</tt>||<tt>210 105  30</tt>
|-style="background:saddlebrown;color:white"
|SaddleBrown ||<tt>8B 45 13</tt>||<tt>139  69  19</tt>
|-style="background:sienna;color:white"
|Sienna ||<tt>A0 52 2D</tt>||<tt>160  82  45</tt>
|-style="background:brown;color:white"
|Brown ||<tt>A5 2A 2A</tt>||<tt>165  42  42</tt>
|-style="background:maroon;color:white"
|Maroon ||<tt>80 00 00</tt>||<tt>128   0   0</tt>
|-
|colspan="3" style="background:whitesmoke;color:slategray;text-align:left"|<big>'''白系の色'''</big>
|-style="background:white;color:black"
|White ||<tt>FF FF FF</tt>||<tt>255 255 255</tt>
|-style="background:snow;color:black"
|Snow ||<tt>FF FA FA</tt>||<tt>255 250 250</tt>
|-style="background:honeydew;color:black"
|Honeydew ||<tt>F0 FF F0</tt>||<tt>240 255 240</tt>
|-style="background:mintcream;color:black"
|MintCream ||<tt>F5 FF FA</tt>||<tt>245 255 250</tt>
|-style="background:azure;color:black"
|Azure ||<tt>F0 FF FF</tt>||<tt>240 255 255</tt>
|-style="background:aliceblue;color:black"
|AliceBlue ||<tt>F0 F8 FF</tt>||<tt>240 248 255</tt>
|-style="background:ghostwhite;color:black"
|GhostWhite ||<tt>F8 F8 FF</tt>||<tt>248 248 255</tt>
|-style="background:whitesmoke;color:black"
|WhiteSmoke ||<tt>F5 F5 F5</tt>||<tt>245 245 245</tt>
|-style="background:seashell;color:black"
|Seashell ||<tt>FF F5 EE</tt>||<tt>255 245 238</tt>
|-style="background:beige;color:black"
|Beige ||<tt>F5 F5 DC</tt>||<tt>245 245 220</tt>
|-style="background:oldlace;color:black"
|OldLace ||<tt>FD F5 E6</tt>||<tt>253 245 230</tt>
|-style="background:floralwhite;color:black"
|FloralWhite ||<tt>FF FA F0</tt>||<tt>255 250 240</tt>
|-style="background:ivory;color:black"
|Ivory ||<tt>FF FF F0</tt>||<tt>255 255 240</tt>
|-style="background:antiquewhite;color:black"
|AntiqueWhite ||<tt>FA EB D7</tt>||<tt>250 235 215</tt>
|-style="background:linen;color:black"
|Linen ||<tt>FA F0 E6</tt>||<tt>250 240 230</tt>
|-style="background:lavenderblush;color:black"
|LavenderBlush ||<tt>FF F0 F5</tt>||<tt>255 240 245</tt>
|-style="background:mistyrose;color:black"
|MistyRose ||<tt>FF E4 E1</tt>||<tt>255 228 225</tt>
|-
|colspan=3 style="background:whitesmoke;color:slategray;text-align:left"|<big>'''灰系の色'''</big>
|-style="background:gainsboro;color:black"
|Gainsboro ||<tt>DC DC DC</tt>||<tt>220 220 220</tt>
|-style="background:lightgrey;color:black"
|LightGrey ||<tt>D3 D3 D3</tt>||<tt>211 211 211</tt>
|-style="background:silver;color:black"
|Silver ||<tt>C0 C0 C0</tt>||<tt>192 192 192</tt>
|-style="background:darkgray;color:black"
|DarkGray ||<tt>A9 A9 A9</tt>||<tt>169 169 169</tt>
|-style="background:gray;color:black"
|Gray ||<tt>80 80 80</tt>||<tt>128 128 128</tt>
|-style="background:dimgray;color:white"
|DimGray ||<tt>69 69 69</tt>||<tt>105 105 105</tt>
|-style="background:lightslategray;color:white"
|LightSlateGray ||<tt>77 88 99</tt>||<tt>119 136 153</tt>
|-style="background:slategray;color:white"
|SlateGray ||<tt>70 80 90</tt>||<tt>112 128 144</tt>
|-style="background:darkslategray;color:white"
|DarkSlateGray ||<tt>2F 4F 4F</tt>||<tt> 47  79  79</tt>
|-style="background:black;color:white"
|Black ||<tt>00 00 00</tt>||<tt>  0   0   0</tt>
|}
|}

== ウェブセーフカラー ==
かつて、コンピュータの多くが256色までしか同時に表示できない時期があった。ハードウェアの持つカラーパレットで表示する色を指定することもあった。画像などに表示できない色が見つかると、違う色を使うことがあった。このとき、最も近い色を使ったり（高速）、[[ディザ]]を施したりもした（低速だが、見栄えがよい）。

「標準」カラーパレットを定める試みはいくつかあった。[[ディザ|ディザリング]]なしで256色ディスプレイで表示するのに必要な色を定めるもので、OSが使用する16色から24色を除く216色について色の選択が検討された。216色というのは、赤・緑・青の強さの段階をそれぞれ6段階としたときの組み合わせ（6×6×6=216）でもある。

この色の一覧はディザリングを引き起こさない特殊な属性があるかのように提示された。しかし、256色ディスプレイでのアプリケーションはカラーパレットに任意の色を選択して置くことができ、残りはディザリングされる。ウェブセーフカラーは当時の主要なウェブブラウザのカラーパレットにマッチするよう選択された。幸運なことに他のウェブブラウザのカラーパレットも大きな差異はなかった。

[[X Window System|X11]]などではアプリケーション間でカラーパレットを共有するため、ブラウザに割り当てられる色は256色よりも少ない（5×5×5または4×4×4）。したがってそのようなシステムではウェブセーフカラーであってもディザリングを生じる。したがって使っている色の範囲が広い画像については、ウェブセーフカラーに減色して提示するよりも、ブラウザ自身に色空間の量子化を任せたほうがよい結果が得られる。

2007年時点で、パーソナルコンピュータは一般に16ビットカラーか24ビットカラー (TrueColor) を実現している。携帯機器でさえ、携帯電話にカメラが搭載された影響もあって、16ビットカラー以上を実現している。以上からウェブセーフカラーの利用は減る傾向にある。

なお、ウェブセーフカラーの欠点の1つとして、背景に使える'''明るい色の選択肢が狭い'''点が挙げられる。また、'''暗い色同士は区別が難しい'''ものもある。

ウェブセーフカラーには標準名称が存在せず、それぞれ[[RGB]]トリプレットで指定する。三原色（赤、緑、青）のそれぞれの成分は次のように6段階の値をとる（24ビットカラーではRGBそれぞれ256段階を表現可能）。

{| class="wikitable" style="background-color:#FFF; color:black; line-height:1.2;"|
|+ 三原色の6段階
! キー
! 16進
! 10進
! RGBの%
|- style="background: #FFF;"
| align=center|0
| align=center|00
| align=center|0
| align=center|0%
|-
| align=center|3
| align=center|33
| align=center|51
| align=center|20%
|- style="background: #FFF;"
| align=center|6
| align=center|66
| align=center|102
| align=center|40%
|-
| align=center|9
| align=center|99
| align=center|153
| align=center|60%
|- style="background: #FFF;"
| align=center|C (12)
| align=center|CC
| align=center|204
| align=center|80%
|-
| align=center|F (15)
| align=center|FF
| align=center|255
| align=center|100%
|}

=== カラーテーブル ===
次の表は、ウェブセーフカラー全216色のRGB値を簡略化して示したものである。

例えば、609（R40%, G0%, B60%）は「[[RGB#数値表示|RGBコード]]」では 102-0-153 であり、「[[#16進トリプレット表記|16進トリプレット]]」では #660099 である。

{{quotation|
'''凡例'''
* 下線のある色は、[[#最も安全なウェブカラー |「最も安全」な22色]]。
* 見出しの「330°」などの数字は、MRYGCBの、それぞれのちょうど中間点となる、[[色相]]の値。
* '''F0F''' - '''C0F'''までの一列30色は、彩度・明度ともに最大＝[[純色#ウェブセーフカラーにおける純色|純色]]。
}}

{| class="wikitable sortable" style="color:black; text-align:center; font-weight:bold; font-size:small; line-height:1;"

|-
|+ style="color:black"|'''ウェブセーフカラー216色'''
|-
! style="background: #F2F2F2"| [[無彩色|無 彩]]
! colspan=13 style="background: #FFF;" | FFF （''White''）
! colspan=13 style="background: #CCC;" | CCC
! colspan=13 style="background: #999;" | 999
! colspan=13 style="background: #666; color: white;" | 666
! colspan=13 style="background: #333; color: white;" | 333
! colspan=13 style="background: #000; color: white;" | 000 （''Black''）

|-
! nowrap|
! [[マゼンタ|M]]
! colspan=12|330°
! [[レッド|R]]
! colspan=12|30°
! [[イエロー|Y]]
! colspan=12|90°
! [[ライムグリーン#ウェブカラーのライム|G]]
! colspan=12|150°
! [[シアン (色)|C]]
! colspan=12|210°
! [[ブルー|B]]
! colspan=12|270°

|- style="color: white;"
| style="color: black;" | 03
| style="background: #303;" | 303
| colspan=12|
| style="background: #300;" | 300
| colspan=12|
| style="background: #330;" | 330
| colspan=12|
| style="background: #030;" | 030
| colspan=12|
| style="background: #033;" | 033
| colspan=12|
| style="background: #003;" | 003
| colspan=12|

|- style="color: white;"
| style="color: black;" | 06 036
| style="background: #606;" | 606
| colspan=12 style="background: #603;" | 603
| style="background: #600;" | 600
| colspan=12 style="background: #630;" | 630
| style="background: #660;" | 660
| colspan=12 style="background: #360;" | 360
| style="background: #060;" | 060
| colspan=12 style="background: #063;" | 063
| style="background: #066;" | 066
| colspan=12 style="background: #036;" | 036
| style="background: #006;" | 006
| colspan=12 style="background: #306;" | 306

|- style="color: white;"
| style="color: black;" | 09 039 069
| style="background: #909;" | 909
| colspan=6 style="background: #906;" | 906
| colspan=6 style="background: #903;" | 903
| style="background: #900;" | 900
| colspan=6 style="background: #930;" | 930
| colspan=6 style="background: #960;" | 960
| style="background: #990;" | 990
| colspan=6 style="background: #690;" | 690
| colspan=6 style="background: #390;" | 390
| style="background: #090;" | 090
| colspan=6 style="background: #093;" | 093
| colspan=6 style="background: #096;" | 096
| style="background: #099;" | 099
| colspan=6 style="background: #069;" | 069
| colspan=6 style="background: #039;" | 039
| style="background: #009;" | 009
| colspan=6 style="background: #309;" | 309
| colspan=6 style="background: #609;" | 609

|- style="color: white;"
| style="color: black;" | 0C 03C 06C 09C
| style="background: #C0C;" | C0C
| colspan=4 style="background: #C09;" | C09
| colspan=4 style="background: #C06;" | C06
| colspan=4 style="background: #C03;" | C03
| style="background: #C00;" | C00
| colspan=4 style="background: #C30;" | C30
| colspan=4 style="background: #C60;" | C60
| colspan=4 style="background: #C90;" | C90
| style="background: #CC0;" | CC0
| colspan=4 style="background: #9C0;" | 9C0
| colspan=4 style="background: #6C0;" | 6C0
| colspan=4 style="background: #3C0;" | 3C0
| style="background: #0C0;" | 0C0
| colspan=4 style="background: #0C3;" | 0C3
| colspan=4 style="background: #0C6;" | 0C6
| colspan=4 style="background: #0C9;" | 0C9
| style="background: #0CC;" | 0CC
| colspan=4 style="background: #09C;" | 09C
| colspan=4 style="background: #06C;" | 06C
| colspan=4 style="background: #03C;" | 03C
| style="background: #00C;" | 00C
| colspan=4 style="background: #30C;" | 30C
| colspan=4 style="background: #60C;" | 60C
| colspan=4 style="background: #90C;" | 90C

|-
| 0F 03F 06F 09F 0CF
| style="background: #F0F;" | F0F （''[[マゼンタ|M]]''）
| colspan=3 style="background: #F0C;" | F 0 C
| colspan=3 style="background: #F09;" | F 0 9
| colspan=3 style="background: #F06;" | F 0 6
| colspan=3 style="background: #F03;" | F 0 3
| style="background: #F00;" | F00 （''[[レッド|R]]''）
| colspan=3 style="background: #F30;" | F 3 0
| colspan=3 style="background: #F60;" | F 6 0
| colspan=3 style="background: #F90;" | F 9 0
| colspan=3 style="background: #FC0;" | F C 0
| style="background: #FF0;" | FF0 （''[[イエロー|Y]]''）
| colspan=3 style="background: #CF0;" | C F 0
| colspan=3 style="background: #9F0;" | 9 F 0
| colspan=3 style="background: #6F0;" | 6 F 0
| colspan=3 style="background: #3F0;" | 3 F 0
| style="background: #0F0;" | 0F0 （''[[ライムグリーン#ウェブカラーのライム|G]]''）
| colspan=3 style="background: #0F3;" | 0 F 3
| colspan=3 style="background: #0F6;" | 0 F 6
| colspan=3 style="background: #0F9;" | 0 F 9
| colspan=3 style="background: #0FC;" | 0 F C
| style="background: #0FF;" | 0FF （''[[シアン (色)|C]]''）
| colspan=3 style="background: #0CF;" | 0 C F
| colspan=3 style="background: #09F;" | 0 9 F
| colspan=3 style="background: #06F;" | 0 6 F
| colspan=3 style="background: #03F;" | 0 3 F
| style="background: #00F;" | 00F （''[[ブルー|B]]''）
| colspan=3 style="background: #30F;" | 3 0 F
| colspan=3 style="background: #60F;" | 6 0 F
| colspan=3 style="background: #90F;" | 9 0 F
| colspan=3 style="background: #C0F;" | C 0 F

|- style="color: white;"
| style="color: black;" | 36
| style="background: #636;" | 636
| colspan=12|
| style="background: #633;" | 633
| colspan=12|
| style="background: #663;" | 663
| colspan=12|
| style="background: #363;" | 363
| colspan=12|
| style="background: #366;" | 366
| colspan=12|
| style="background: #336;" | 336
| colspan=12|

|- style="color: white;"
| style="color: black;" | 39 369
| style="background: #939;" | 939
| colspan=12 style="background: #936;" | 936
| style="background: #933;" | 933
| colspan=12 style="background: #963;" | 963
| style="background: #993;" | 993
| colspan=12 style="background: #693;" | 693
| style="background: #393;" | 393
| colspan=12 style="background: #396;" | 396
| style="background: #399;" | 399
| colspan=12 style="background: #369;" | 369
| style="background: #339;" | 339
| colspan=12 style="background: #639;" | 639

|-
| 3C 36C 39C
| style="background: #C3C;" | C3C
| colspan=6 style="background: #C39;" | C39
| colspan=6 style="background: #C36;" | C36
| style="background: #C33;" | C33
| colspan=6 style="background: #C63;" | C63
| colspan=6 style="background: #C93;" | C93
| style="background: #CC3;" | CC3
| colspan=6 style="background: #9C3;" | 9C3
| colspan=6 style="background: #6C3;" | 6C3
| style="background: #3C3;" | 3C3
| colspan=6 style="background: #3C6;" | 3C6
| colspan=6 style="background: #3C9;" | 3C9
| style="background: #3CC;" | 3CC
| colspan=6 style="background: #39C;" | 39C
| colspan=6 style="background: #36C;" | 36C
| style="background: #33C;" | 33C
| colspan=6 style="background: #63C;" | 63C
| colspan=6 style="background: #93C;" | 93C

|-
| 3F 36F 39F 3CF
| style="background: #F3F;" | F3F
| colspan=4 style="background: #F3C;" | F3C
| colspan=4 style="background: #F39;" | F39
| colspan=4 style="background: #F36;" | F36
| style="background: #F33;" | F33
| colspan=4 style="background: #F63;" | F63
| colspan=4 style="background: #F93;" | F93
| colspan=4 style="background: #FC3;" | FC3
| style="background: #FF3;" | FF3
| colspan=4 style="background: #CF3;" | CF3
| colspan=4 style="background: #9F3;" | 9F3
| colspan=4 style="background: #6F3;" | 6F3
| style="background: #3F3;" | 3F3
| colspan=4 style="background: #3F6;" | 3F6
| colspan=4 style="background: #3F9;" | 3F9
| colspan=4 style="background: #3FC;" | 3FC
| style="background: #3FF;" | 3FF
| colspan=4 style="background: #3CF;" | 3CF
| colspan=4 style="background: #39F;" | 39F
| colspan=4 style="background: #36F;" | 36F
| style="background: #33F;" | 33F
| colspan=4 style="background: #63F;" | 63F
| colspan=4 style="background: #93F;" | 93F
| colspan=4 style="background: #C3F;" | C3F

|- style="color: white;"
| style="color: black;" | 69
| style="background: #969;" | 969
| colspan=12|
| style="background: #966;" | 966
| colspan=12|
| style="background: #996;" | 996
| colspan=12|
| style="background: #696;" | 696
| colspan=12|
| style="background: #699;" | 699
| colspan=12|
| style="background: #669;" | 669
| colspan=12|

|-
| 6C 69C
| style="background: #C6C;" | C6C
| colspan=12 style="background: #C69;" | C69
| style="background: #C66;" | C66
| colspan=12 style="background: #C96;" | C96
| style="background: #CC6;" | CC6
| colspan=12 style="background: #9C6;" | 9C6
| style="background: #6C6;" | 6C6
| colspan=12 style="background: #6C9;" | 6C9
| style="background: #6CC;" | 6CC
| colspan=12 style="background: #69C;" | 69C
| style="background: #66C;" | 66C
| colspan=12 style="background: #96C;" | 96C

|-
| 6F 69F 6CF
| style="background: #F6F;" | F6F
| colspan=6 style="background: #F6C;" | F6C
| colspan=6 style="background: #F69;" | F69
| style="background: #F66;" | F66
| colspan=6 style="background: #F96;" | F96
| colspan=6 style="background: #FC6;" | FC6
| style="background: #FF6;" | FF6
| colspan=6 style="background: #CF6;" | CF6
| colspan=6 style="background: #9F6;" | 9F6
| style="background: #6F6;" | 6F6
| colspan=6 style="background: #6F9;" | 6F9
| colspan=6 style="background: #6FC;" | 6FC
| style="background: #6FF;" | 6FF
| colspan=6 style="background: #6CF;" | 6CF
| colspan=6 style="background: #69F;" | 69F
| style="background: #66F;" | 66F
| colspan=6 style="background: #96F;" | 96F
| colspan=6 style="background: #C6F;" | C6F

|-
| 9C
| style="background: #C9C;" | C9C
| colspan=12|
| style="background: #C99;" | C99
| colspan=12|
| style="background: #CC9;" | CC9
| colspan=12|
| style="background: #9C9;" | 9C9
| colspan=12|
| style="background: #9CC;" | 9CC
| colspan=12|
| style="background: #99C;" | 99C
| colspan=12|

|-
| 9F 9CF
| style="background: #F9F;" | F9F
| colspan=12 style="background: #F9C;" | F9C
| style="background: #F99;" | F99
| colspan=12 style="background: #FC9;" | FC9
| style="background: #FF9;" | FF9
| colspan=12 style="background: #CF9;" | CF9
| style="background: #9F9;" | 9F9
| colspan=12 style="background: #9FC;" | 9FC
| style="background: #9FF;" | 9FF
| colspan=12 style="background: #9CF;" | 9CF
| style="background: #99F;" | 99F
| colspan=12 style="background: #C9F;" | C9F

|-
| CF
| style="background: #FCF;" | FCF
| colspan=12|
| style="background: #FCC;" | FCC
| colspan=12|
| style="background: #FFC;" | FFC
| colspan=12|
| style="background: #CFC;" | CFC
| colspan=12|
| style="background: #CFF;" | CFF
| colspan=12|
| style="background: #CCF;" | CCF
| colspan=12|
|}

=== 最も安全なウェブカラー ===
ウェブデザイナーは、かつてこの216色のウェブセーフカラーを使うことを推奨されていた。しかし、このカラーパレットが登場したころに比べると、8ビットカラーのディスプレイの利用は少なくなっている。

David Lehn と Hadley Stern は、ウェブセーフカラーの216色のうち、16ビットカラーのディスプレイで変換なしで表示できる色が「22色」だけであることを発見した。これら22色を'''「真に安全なパレット」'''と呼ぶ。上の表では、それらの色には下線を引いてある<ref>[http://www.physics.ohio-state.edu/~wilkins/color/websafecolors.html Death of the Websafe Color Palette?]</ref>。

{|cellpadding="3" cellspacing="5"
|色
|bgcolor = "#FF00FF" width = 30|
|bgcolor = "#FF0033" width = 30|
|bgcolor = "#FF0000" width = 30|
|bgcolor = "#FFFF00" width = 30|
|bgcolor = "#FFFF33" width = 30|
|bgcolor = "#FFFF66" width = 30|
|bgcolor = "#FFFFFF" width = 30|
|bgcolor = "#CCFF66" width = 30|
|bgcolor = "#66FF00" width = 30|
|bgcolor = "#66FF33" width = 30|
|bgcolor = "#33FF33" width = 30|
|-
{|border="0"
|16進3桁
|（'''{{color|#C00|#F0F}}'''）
|#F03
|（'''{{color|#C00|#F00}}'''）
|（'''{{color|#C00|#FF0}}'''）
|#FF3
|#FF6
|（'''{{color|#C00|#FFF}}'''）
|#CF6
|#6F0
|#6F3
|#3F3
|-
{|border="0"
|色
|bgcolor = "#00FF00" width = 30|
|bgcolor = "#33FF66" width = 30|
|bgcolor = "#00FF66" width = 30|
|bgcolor = "#33FFCC" width = 30|
|bgcolor = "#00FFCC" width = 30|
|bgcolor = "#66FFFF" width = 30|
|bgcolor = "#33FFFF" width = 30|
|bgcolor = "#00FFFF" width = 30|
|bgcolor = "#0000FF" width = 30|
|bgcolor = "#000033" width = 30|
|bgcolor = "#000000" width = 30|
|-
{|border="0"
|16進3桁
|（'''{{color|#C00|#0F0}}'''）
|#3F6
|#0F6
|#3FC
|#0FC
|#6FF
|#3FF
|（'''{{color|#C00|#0FF}}'''）
|（'''{{color|#C00|#00F}}'''）
|#003
|（'''{{color|#C00|#000}}'''）
|}
※ （'''{{color|#C00|赤字}}'''）は、「[[カラーチャート#基本16色|HTML基本16色]]」のうちの8色。

== CSSカラー ==
[[Cascading Style Sheets]] 言語では、HTML 4 仕様と同じ数（基本の16色）の色を定義している。さらに CSS 2.1 はこれに "orange" を追加した<ref>{{Cite web|url= http://www.w3.org/TR/CSS21/syndata.html#color-units |title=CSS 2.1 Specification: Syntax and basic data types: Colors |date=2009-09-08 |accessdate=2009-12-21 }}</ref>。

{{Colort|width=auto|html_color=|alias=別名|caption=CSS 2.1 で追加された色}}
{{Colort/Color|name=[[オレンジ色|orange]]|r=255|g=165|b=0}}
|}

また CSS 2、[[Scalable Vector Graphics|SVG]] および CSS 2.1 では ''system colors'' と呼ばれる色が使えるが、これらの色は[[オペレーティングシステム]]のデスクトップで使っている色の値に名前をつけたものである。これらを使うとユーザーのOS環境に合わせた色を使うことができる<ref>[http://www.w3.org/TR/CSS21/ui.html#system-colors User interface - System colors]</ref>。2004年現在、CSS3 仕様ではこの機能が "depreated" とされているが、今後変更される可能性もある<ref>[http://www.w3.org/TR/css3-color/#css2-system CSS3 Color Module - CSS2 System Colors]</ref>。

CSS3 仕様ではまた、スタイルシートに[[HSV色空間|HSL色空間]]を導入している。

<div style="text-align:center;font-size:120%;">'''CSSの例'''</div>
<source lang="css">
/* RGB model */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

/* RGB with alpha channel, added to CSS3 */
p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

/* 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 */
</source>

== アクセス容易性 ==
中には色をサポートしていない[[ウェブブラウザ]]や機器もある。そのような機器や、視覚障害、色覚異常のあるユーザーのため、ウェブコンテンツは色がなくとも使えるようにすることが望ましい。色が表示できないとき、背景と文字が似たような明るさで識別できくなることは避けるべきである<ref name="w3ctips">[http://www.w3.org/QA/Tips/color If You Pick One Color, Pick Them All]</ref>。同様にリンクを青で表示することが多いため、背景を青系の色にするとリンクが目立たなくなる。

== 脚注・出典 ==
{{Reflist}}

== 関連項目 ==
* [[色名一覧]]
* [[国際照明委員会|CIE]] [[Lab色空間]]

== 外部リンク ==
* [http://www.w3.org/TR/CSS21/syndata.html#color-units CSS2.1 Color Specification]

{{DEFAULTSORT:うえふから}}
[[Category:色]]
[[Category:ウェブ開発]]
[[Category:ウェブデザイン]]
[[Category:基本方針とガイドライン]]

Yourpedia - 利用者の投稿記録 [ja]

Yourpedia:ウェブカラー

ウェブカラー

Yourpedia:検索エンジン表示方法