ウェブカラー

このウェブカラー（）の記事では、ウェブ等における色の扱い等について解説する。

 指定法 

ウェブコンテンツの視覚的な表現に関して指定するスタイルシート（CSS）や、Scalable Vector Graphics（SVG）において、色を指定する方法はいくつかある。主要な方法としては、十六進でRGBの三ツ組（16進トリプレット）を指定する方法と、色名称で指定する方法がある。詳細は後の節で述べる。

 歴史 
最初期のMosaicや、続いてNetscape NavigatorなどはどちらもX Window Systemのアプリケーションとして始まったということもあり、色名称としてX11の色名称が流用されていた. S-PLUS, TIBCO. p13.。その後、インターネット接続環境が一般個人にも広まったが、その当時の一般個人のパーソナルコンピュータのスペックの制限などもあり、色の扱いには気を使う必要がある時代もあった。#ウェブセーフカラーの節で説明する。

 カラーマネージメント 
パーソナルコンピュータ業界団体によるものとしては、という比色分析的定義があり、特定の蛍光体の色度、所定の伝達曲線、順応性のホワイトポイント、観察条件などに基づいている著、「」（）。これは一般的なコンピュータのモニタとそれを人間が見る環境に合うように選択されている。しかし、そもそも色再現性という概念が全く一般的には理解されていないため「色が違う」といった苦情が出るなどといったトラブルが後を断たない。

ましてや、加法混合であるディスプレイと減法混合である印刷で、何の調節も管理も無く同じ見栄えが得られる道理などなく（原色#加法混合と原色#減法混合を参照）、(準)商業レベルのカラーの印刷には、できればカラーマネージメントシステム等が必要であるが、これはコンピュータ中の色表現と印刷という話題であって、ウェブのコンテンツに全く限られない話である。

 16進トリプレット表記 

16進トリプレット(英語:hex triplet)、16進カラーコードは、先頭に # を前置した後に、色深度がRGBの各色4ビットあるいは8ビット（すなわち12bpp（4096色）あるいは24bpp（約1600万色））のどれかの色について、16進3桁あるいは6桁で表現するものである。赤・緑・青(RGB)の順で、16進3桁の各ニブル、あるいは6桁中の各2桁のオクテットが、各成分の0から15あるいは0から255の光度（intensity）を表現する。0 が真っ暗（黒）で、数字が大きいほど明るい。

例えば、赤緑青の光度が、赤は36、緑は104、青は160という色があるとする（灰色がかった青、）。それぞれ16進で24、68、A0であり、それを並べて#2468A0となる。1桁の場合は0を前置する。たとえば、4、8、16の場合（16進では4、8、10）#040810（）となる。

なお、3桁のフォーマットはCSSの仕様にはあるが、HTMLの色指定では規格外であるHTML4 Transitional Document Type Definition。3桁から6桁への拡張は、各桁を繰り返せばよく、例えば09Cなら#0099CC（水色、）とすればよい。

 HTMLでの色名称 
HTML 4.01仕様HTML 4.01 Specification section 6.5 "Colors"では（当時のパーソナルコンピュータのGUI環境のパレットにおいて、いわゆる「システムカラー」として用意されていた色に基づく）、基本的な色名称を次のように定義している（大文字/小文字は区別しない）。
ウェブカラーの純色の黄色『Yellow、#FFFF00』■は、レモン色に近い。
ウェブカラーの純色の青『Blue、#0000FF』■は、わずかに紫がかった青色をしていて、群青色に近い。

これらの色はHTML 3.0仕様にもsRGBで示されており、「この標準16色はWindowsのVGAパレットでサポートされている」とあるHTML 3.2 Specification "The BODY element"。

 X11の色名称 

多くの環境で、X Window Systemと共に普及したX11の色名称に基づいた色名称がサポートされている。これらの色はSVG 1.0で標準化され、SVG Full に対応したユーザーエージェントが受け付ける（SVG Tinyにはこれらの標準は含まれない）。

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

CSS3仕様でウェブ用の"X11 colors"として定義されている色の一覧を16進と10進の値と共に示すW3C TR CSS3 Color Module, SVG color keywords。なお、同じ色で別名が示されているものもある。Aqua（HTML4/CSS 1.0での標準名）とCyan（sRGBでの名前）、Fuchsia（HTML4/CSS 1.0での標準名）とMagenta（sRGBでの名前）、Gray（HTML4/CSS 1.0での標準名）と Grey（計7色）の9色である。また、Grayよりも明るいDarkGrayやPinkよりも暗いLightPinkのように一貫性のない名称もある。

CSS4ではRebeccaPurpleが追加され、重複を除くと139色となったCSS Color Module Level 4。
HTMLでの名称R   G   B16進10進 Pink FF C0 CB255 192 203 LightPink FF B6 C1255 182 193 HotPink FF 69 B4255 105 180 DeepPink FF 14 93255  20 147 PaleVioletRed DB 70 93219 112 147 MediumVioletRed C7 15 85199  21 133 LightSalmon FF A0 7A255 160 122 Salmon FA 80 72250 128 114 DarkSalmon E9 96 7A233 150 122 LightCoral F0 80 80240 128 128 IndianRed CD 5C 5C205  92  92 Crimson DC 14 3C220  20  60 Firebrick B2 22 22178  34  34 DarkRed 8B 00 00139   0   0 Red FF 00 00255   0   0 OrangeRed FF 45 00255  69   0 Tomato FF 63 47255  99  71 Coral FF 7F 50255 127  80 DarkOrange FF 8C 00255 140   0 Orange FF A5 00255 165   0 Yellow FF FF 00255 255   0 LightYellow FF FF E0255 255 224 LemonChiffon FF FA CD255 250 205 LightGoldenrodYellow  FA FA D2250 250 210 PapayaWhip FF EF D5255 239 213 Moccasin FF E4 B5255 228 181 PeachPuff FF DA B9255 218 185 PaleGoldenrod EE E8 AA238 232 170 Khaki F0 E6 8C240 230 140 DarkKhaki BD B7 6B189 183 107 Gold FF D7 00255 215   0 Cornsilk FF F8 DC255 248 220 BlanchedAlmond FF EB CD255 235 205 Bisque FF E4 C4255 228 196 NavajoWhite FF DE AD255 222 173 Wheat F5 DE B3245 222 179 Burlywood DE B8 87222 184 135 Tan D2 B4 8C210 180 140 RosyBrown BC 8F 8F188 143 143 SandyBrown F4 A4 60244 164  96 Goldenrod DA A5 20218 165  32 DarkGoldenrod B8 86 0B184 134  11 Peru CD 85 3F205 133  63 Chocolate D2 69 1E210 105  30 SaddleBrown 8B 45 13139  69  19 Sienna A0 52 2D160  82  45 Brown A5 2A 2A165  42  42 Maroon 80 00 00128   0   0
HTMLでの名称R   G   B16進10進 DarkOliveGreen 55 6B 2F 85 107  47 Olive 80 80 00128 128   0 OliveDrab 6B 8E 23107 142  35 YellowGreen 9A CD 32154 205  50 LimeGreen 32 CD 32 50 205  50 Lime 00 FF 00  0 255   0 LawnGreen 7C FC 00124 252   0 Chartreuse 7F FF 00127 255   0 GreenYellow AD FF 2F173 255  47 SpringGreen 00 FF 7F  0 255 127 MediumSpringGreen  00 FA 9A  0 250 154 LightGreen 90 EE 90144 238 144 PaleGreen 98 FB 98152 251 152 DarkSeaGreen 8F BC 8F143 188 143 MediumAquamarine 66 CD AA102 205 170 MediumSeaGreen 3C B3 71 60 179 113 SeaGreen 2E 8B 57 46 139  87 ForestGreen 22 8B 22 34 139  34 Green 00 80 00  0 128   0 DarkGreen 00 64 00  0 100   0 Aqua 00 FF FF  0 255 255 Cyan 00 FF FF  0 255 255 LightCyan E0 FF FF224 255 255 PaleTurquoise AF EE EE175 238 238 Aquamarine 7F FF D4127 255 212 Turquoise 40 E0 D0 64 224 208 MediumTurquoise 48 D1 CC 72 209 204 DarkTurquoise 00 CE D1  0 206 209 LightSeaGreen 20 B2 AA 32 178 170 CadetBlue 5F 9E A0 95 158 160 DarkCyan 00 8B 8B  0 139 139 Teal 00 80 80  0 128 128 LightSteelBlue B0 C4 DE176 196 222 PowderBlue B0 E0 E6176 224 230 LightBlue AD D8 E6173 216 230 SkyBlue 87 CE EB135 206 235 LightSkyBlue 87 CE FA135 206 250 DeepSkyBlue 00 BF FF  0 191 255 DodgerBlue 1E 90 FF 30 144 255 CornflowerBlue 64 95 ED100 149 237 SteelBlue 46 82 B4 70 130 180 RoyalBlue 41 69 E1 65 105 225 Blue 00 00 FF  0   0 255 MediumBlue 00 00 CD  0   0 205 DarkBlue 00 00 8B  0   0 139 Navy 00 00 80  0   0 128 MidnightBlue 19 19 70 25  25 112
HTMLでの名称R   G   B16進10進 Lavender E6 E6 FA230 230 250 Thistle D8 BF D8216 191 216 Plum DD A0 DD221 160 221 Violet EE 82 EE238 130 238 Orchid DA 70 D6218 112 214 Fuchsia FF 00 FF255   0 255 Magenta FF 00 FF255   0 255 MediumOrchid BA 55 D3186  85 211 MediumPurple 93 70 DB147 112 219 BlueViolet 8A 2B E2138  43 226 DarkViolet 94 00 D3148   0 211 DarkOrchid 99 32 CC153  50 204 DarkMagenta 8B 00 8B139   0 139 Purple 80 00 80128   0 128 Indigo 4B 00 82 75   0 130 DarkSlateBlue 48 3D 8B 72  61 139 SlateBlue 6A 5A CD106  90 205 MediumSlateBlue  7B 68 EE123 104 238 White FF FF FF255 255 255 Snow FF FA FA255 250 250 Honeydew F0 FF F0240 255 240 MintCream F5 FF FA245 255 250 Azure F0 FF FF240 255 255 AliceBlue F0 F8 FF240 248 255 GhostWhite F8 F8 FF248 248 255 WhiteSmoke F5 F5 F5245 245 245 Seashell FF F5 EE255 245 238 Beige F5 F5 DC245 245 220 OldLace FD F5 E6253 245 230 FloralWhite FF FA F0255 250 240 Ivory FF FF F0255 255 240 AntiqueWhite FA EB D7250 235 215 Linen FA F0 E6250 240 230 LavenderBlush FF F0 F5255 240 245 MistyRose FF E4 E1255 228 225 Gainsboro DC DC DC220 220 220 LightGray D3 D3 D3211 211 211 Silver C0 C0 C0192 192 192 DarkGray A9 A9 A9169 169 169 Gray 80 80 80128 128 128 DimGray 69 69 69105 105 105 LightSlateGray 77 88 99119 136 153 SlateGray 70 80 90112 128 144 DarkSlateGray 2F 4F 4F 47  79  79 Black 00 00 00  0   0   0
HTMLでの名称R   G   B16進10進 RebeccaPurple  66 33 99102  51 153

 ウェブセーフカラー 


MS-DOS環境のゲームなど、シングルタスク環境であればそのアプリケーションに必要な色のみを選べばよいが、GUI環境のウェブブラウザは任意のタイプの画像（自然画（写真等）もあれば、イラストもある）を対象とせねばならず、また、任意に必要な色を確保していった場合、ページの途中で足りなくなるといったことも起こりうる。そのためウェブブラウザは、赤緑青の各色について 0, 51, 102, 153, 204, 255（16進で 00, 33, 66, 99, cc, ff）の6段階として、6×6×6 の216色をあらかじめ確保しておくものとし、コンテンツ中のそれ以外の色については、最も近い色をあてるか、ディザを施すこととした。残り40色のうち16色はシステム用として、24色程度の余裕があり（原色などについてはシステム用のパレットと共用できるので、実際はもう少し余裕がある）、ブラウザ自身のボタンのアイコン等のための色に使うこともできる。

X11などではアプリケーション間でカラーパレットを共有するため、ブラウザが使用可能な色は256色よりも少ない場合がある（5×5×5または4×4×4）。そのようなシステムではコンテンツ側でウェブセーフカラーを使っていたとしても、さらに減色される。

以上のようにしてデファクトスタンダードとして成立したパレット（色の集合）であり、色彩設計（デザイン）からの観点などは無い。背景に使える明るい色の選択肢が狭い、暗い色同士は区別が難しいものもある、などといった欠点が指摘されている。また、写真などの画像を減色加工する目的等に適しているわけでもなく2016年現在「簡単な数コマ程度の動画のための、手軽な広く普及しているフォーマット」が、いわゆるアニメーションGIFしか存在しないことから、GIFにするため写真等を256色に減色する必要がある、というのが2016年現在の数少ない減色作業の例であるが、そういった場合は画像からメディアンカット等の手法で適応的にパレットを決めたほうが良い。、イラスト等を描く際に、これらの中にある色を選べば、表示側でそのまま表示される（確率が高い）、という目安に過ぎない。

このパレットの出典として、これを「Browser Safe color palette」として著書で紹介した1996年の著書『Designing Web Graphics』  の68–69頁などにある。Lynda Weinmanの名が（誤って）提示されていることがある。しかし、前述のように、ブラウザの側の実装がそうなっていた、というのが先であり、Lynda Weinmanの関与は（挙げるならば）名前を付けただけに過ぎない。著者自身がフォローのための情報をウェブで公開していた（注のリンク先（アーカイブ）を参照）https://web.archive.org/web/19961109214300/http://www.lynda.com/hex.htmlhttps://web.archive.org/web/20060424141309/http://www.lynda.com/hex.html。

ウェブセーフカラーの各色に対する標準名称といったものは存在しない。

+ 三原色の6段階キー16進10進RGBの%00000%3335120%66610240%99915360%C（12）CC20480%F（15）FF255100%
 カラーテーブル 

次の表は、ウェブセーフカラー全216色である。

凡例
 下線のある色は、次節で説明する「Reallysafe」な22色。
 見出しの「330°」などの数字は、MRYGCBの、それぞれのちょうど中間点となる、色相の値。
 F0F - C0Fまでの一列30色は、彩度・明度ともに最大=純色。

ウェブセーフカラー216色無彩FFF（White）CCC999666333000（Black）M330°R30°Y90°G150°C210°B270°<small>03303 300 330 030 033 003 <small>06036606603600630660360060063066036006306<small>09039069909906903900930960990690390090093096099069039009309609<small>0C03C06C09CC0CC09C06C03C00C30C60C90CC09C06C03C00C00C30C60C90CC09C06C03C00C30C60C90C<small>0F03F06F09F0CFF0F（M）F0CF09F06F03F00（R）F30F60F90FC0FF0（Y）CF09F06F03F00F0（G）0F30F60F90FC0FF（C）0CF09F06F03F00F（B）30F60F90FC0F<small>36636 633 663 363 366 336 <small>39369939936933963993693393396399369339639<small>3C36C39CC3CC39C36C33C63C93CC39C36C33C33C63C93CC39C36C33C63C93C<small>3F36F39F3CFF3FF3CF39F36F33F63F93FC3FF3CF39F36F33F33F63F93FC3FF3CF39F36F33F63F93FC3F<small>69969 966 996 696 699 669 <small>6C69CC6CC69C66C96CC69C66C66C96CC69C66C96C<small>6F69F6CFF6FF6CF69F66F96FC6FF6CF69F66F66F96FC6FF6CF69F66F96FC6F<small>9CC9C C99 CC9 9C9 9CC 99C <small>9F9CFF9FF9CF99FC9FF9CF99F99FC9FF9CF99FC9F<small>CFFCF FCC FFC CFC CFF CCF 

 Reallysafe palette 
約1600万色（24ビットカラー）のうち256色が使える環境の他に、当時は、16ビットカラーの環境も多かった。David LehnとHadley Sternは、ウェブセーフカラーの216色のうち、16ビットカラーで表示できる22色を the Reallysafe palette と呼んだ。Death of the Websafe Color Palette?

以下にその22色を示す。また、上の表では、それらの色には下線を引いてある。

色16進3桁（）#F03（）（）#FF3#FF6（）#CF6#6F0#6F3#3F3色16進3桁（）#3F6#0F6#3FC#0FC#6FF#3FF（）（）#003（）
※（）は、「HTML基本16色」のうちの8色。

 CSSカラー 
Cascading Style Sheetsでは、HTML 4仕様と同じ数（基本の16色）の色を定義している。またCSS 2、SVGおよびCSS 2.1ではsystem colorsと呼ばれる色が使えるが、これらの色はオペレーティングシステムのデスクトップで使っている色の値に名前をつけたものである。これらを使うとユーザーのOS環境に合わせた色を使うことができるUser interface - System colors。2004年現在、CSS3仕様ではこの機能が"depreated"とされているが、今後変更される可能性もあるCSS3 Color Module - CSS2 System Colors。

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

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

 アクセシビリティ 
中には色をサポートしていないウェブブラウザや機器もある。そのような機器や、視覚障害、色覚異常のあるユーザーのため、ウェブコンテンツは色がなくとも使えるようにすることが望ましい。色が表示できないとき、背景と文字が似たような明るさで識別できくなることは避けるべきであるIf You Pick One Color, Pick Them All。同様にリンクを青で表示することが多いため、背景を青系の色にするとリンクが目立たなくなる。

 脚注 

 注釈 

 出典 

 関連項目 
 色名一覧
 CIE Lab色空間

 外部リンク 
 CSS2.1 Color Specification
 MDN - CSS named-color

Category:色
Category:ウェブ開発
Category:ウェブデザイン