ウェブカラー

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

指定法

ウェブコンテンツの視覚的な表現に関して指定するスタイルシート（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進ピンク系の色PinkFF C0 CB255 192 203LightPinkFF B6 C1255 182 193HotPinkFF 69 B4255 105 180DeepPinkFF 14 93255  20 147PaleVioletRedDB 70 93219 112 147MediumVioletRedC7 15 85199  21 133赤系の色LightSalmonFF A0 7A255 160 122SalmonFA 80 72250 128 114DarkSalmonE9 96 7A233 150 122LightCoralF0 80 80240 128 128IndianRedCD 5C 5C205  92  92CrimsonDC 14 3C220  20  60FirebrickB2 22 22178  34  34DarkRed8B 00 00139   0   0RedFF 00 00255   0   0橙系の色OrangeRedFF 45 00255  69   0TomatoFF 63 47255  99  71CoralFF 7F 50255 127  80DarkOrangeFF 8C 00255 140   0OrangeFF A5 00255 165   0黄系の色YellowFF FF 00255 255   0LightYellowFF FF E0255 255 224LemonChiffonFF FA CD255 250 205LightGoldenrodYellowFA FA D2250 250 210PapayaWhipFF EF D5255 239 213MoccasinFF E4 B5255 228 181PeachPuffFF DA B9255 218 185PaleGoldenrodEE E8 AA238 232 170KhakiF0 E6 8C240 230 140DarkKhakiBD B7 6B189 183 107GoldFF D7 00255 215   0茶系の色CornsilkFF F8 DC255 248 220BlanchedAlmondFF EB CD255 235 205BisqueFF E4 C4255 228 196NavajoWhiteFF DE AD255 222 173WheatF5 DE B3245 222 179BurlywoodDE B8 87222 184 135TanD2 B4 8C210 180 140RosyBrownBC 8F 8F188 143 143SandyBrownF4 A4 60244 164  96GoldenrodDA A5 20218 165  32DarkGoldenrodB8 86 0B184 134  11PeruCD 85 3F205 133  63ChocolateD2 69 1E210 105  30SaddleBrown8B 45 13139  69  19SiennaA0 52 2D160  82  45BrownA5 2A 2A165  42  42Maroon80 00 00128   0   0緑系の色DarkOliveGreen55 6B 2F 85 107  47Olive80 80 00128 128   0OliveDrab6B 8E 23107 142  35YellowGreen9A CD 32154 205  50LimeGreen32 CD 32 50 205  50Lime00 FF 00  0 255   0LawnGreen7C FC 00124 252   0Chartreuse7F FF 00127 255   0GreenYellowAD FF 2F173 255  47SpringGreen00 FF 7F  0 255 127MediumSpringGreen00 FA 9A  0 250 154LightGreen90 EE 90144 238 144PaleGreen98 FB 98152 251 152DarkSeaGreen8F BC 8F143 188 143MediumAquamarine66 CD AA102 205 170MediumSeaGreen3C B3 71 60 179 113SeaGreen2E 8B 57 46 139  87ForestGreen22 8B 22 34 139  34Green00 80 00  0 128   0DarkGreen00 64 00  0 100   0シアン系の色Aqua00 FF FF  0 255 255Cyan00 FF FF  0 255 255LightCyanE0 FF FF224 255 255PaleTurquoiseAF EE EE175 238 238Aquamarine7F FF D4127 255 212Turquoise40 E0 D0 64 224 208MediumTurquoise48 D1 CC 72 209 204DarkTurquoise00 CE D1  0 206 209LightSeaGreen20 B2 AA 32 178 170CadetBlue5F 9E A0 95 158 160DarkCyan00 8B 8B  0 139 139Teal00 80 80  0 128 128青系の色LightSteelBlueB0 C4 DE176 196 222PowderBlueB0 E0 E6176 224 230LightBlueAD D8 E6173 216 230SkyBlue87 CE EB135 206 235LightSkyBlue87 CE FA135 206 250DeepSkyBlue00 BF FF  0 191 255DodgerBlue1E 90 FF 30 144 255CornflowerBlue64 95 ED100 149 237SteelBlue46 82 B4 70 130 180RoyalBlue41 69 E1 65 105 225Blue00 00 FF  0   0 255MediumBlue00 00 CD  0   0 205DarkBlue00 00 8B  0   0 139Navy00 00 80  0   0 128MidnightBlue19 19 70 25  25 112紫系の色LavenderE6 E6 FA230 230 250ThistleD8 BF D8216 191 216PlumDD A0 DD221 160 221VioletEE 82 EE238 130 238OrchidDA 70 D6218 112 214FuchsiaFF 00 FF255   0 255MagentaFF 00 FF255   0 255MediumOrchidBA 55 D3186  85 211MediumPurple93 70 DB147 112 219BlueViolet8A 2B E2138  43 226DarkViolet94 00 D3148   0 211DarkOrchid99 32 CC153  50 204DarkMagenta8B 00 8B139   0 139Purple80 00 80128   0 128Indigo4B 00 82 75   0 130DarkSlateBlue48 3D 8B 72  61 139SlateBlue6A 5A CD106  90 205MediumSlateBlue7B 68 EE123 104 238白系の色WhiteFF FF FF255 255 255SnowFF FA FA255 250 250HoneydewF0 FF F0240 255 240MintCreamF5 FF FA245 255 250AzureF0 FF FF240 255 255AliceBlueF0 F8 FF240 248 255GhostWhiteF8 F8 FF248 248 255WhiteSmokeF5 F5 F5245 245 245SeashellFF F5 EE255 245 238BeigeF5 F5 DC245 245 220OldLaceFD F5 E6253 245 230FloralWhiteFF FA F0255 250 240IvoryFF FF F0255 255 240AntiqueWhiteFA EB D7250 235 215LinenFA F0 E6250 240 230LavenderBlushFF F0 F5255 240 245MistyRoseFF E4 E1255 228 225灰系、黒系の色GainsboroDC DC DC220 220 220LightGrayD3 D3 D3211 211 211SilverC0 C0 C0192 192 192DarkGrayA9 A9 A9169 169 169Gray80 80 80128 128 128DimGray69 69 69105 105 105LightSlateGray77 88 99119 136 153SlateGray70 80 90112 128 144DarkSlateGray2F 4F 4F 47  79  79Black00 00 00  0   0   0CSS4で追加された色RebeccaPurple66 33 99102  51 153

ウェブセーフカラー

thumb|210px|right|ウェブセーフカラーチャート

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°03303 300 330 030 033 003 06036606603600630660360060063066036006306090390699099069039009309609906903900900930960990690390093096090C03C06C09CC0CC09C06C03C00C30C60C90CC09C06C03C00C00C30C60C90CC09C06C03C00C30C60C90C0F03F06F09F0CFF0F（M）F0CF09F06F03F00（R）F30F60F90FC0FF0（Y）CF09F06F03F00F0（G）0F30F60F90FC0FF（C）0CF09F06F03F00F（B）30F60F90FC0F36636 633 663 363 366 336 393699399369339639936933933963993693396393C36C39CC3CC39C36C33C63C93CC39C36C33C33C63C93CC39C36C33C63C93C3F36F39F3CFF3FF3CF39F36F33F63F93FC3FF3CF39F36F33F33F63F93FC3FF3CF39F36F33F63F93FC3F69969 966 996 696 699 669 6C69CC6CC69C66C96CC69C66C66C96CC69C66C96C6F69F6CFF6FF6CF69F66F96FC6FF6CF69F66F66F96FC6FF6CF69F66F96FC6F9CC9C C99 CC9 9C9 9CC 99C 9F9CFF9FF9CF99FC9FF9CF99F99FC9FF9CF99FC9FCFFCF 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色を示す。また、上の表では、それらの色には下線を引いてある。

+Reallysafe palette色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