ウェブカラー

ウェブカラー（英: Web colors）の記事では、ウェブ技術等における色の扱い等について解説する。 ウェブコンテンツの視覚的な表現に関して指定するスタイルシート（CSS）や、Scalable Vector Graphics（SVG）において、色を指定する方法はいくつかある。主要な方法としては、十六進でRGBの三ツ組（16進トリプレット）を指定する方法と、色名称で指定する方法がある。詳細は後の節で述べる。 最初期のMosaicや、続いてNetscape NavigatorなどはどちらもX Window Systemのアプリケーションとして始まったということもあり、色名称としてX11の色名称が流用されていた。その後、インターネット接続環境が一般個人にも広まったが、その当時の一般個人のパーソナルコンピュータのスペックの制限などもあり、色の扱いには気を使う必要がある時代もあった。#ウェブセーフカラーの節で説明する。 パーソナルコンピュータ業界団体によるものとしては、sRGBという比色分析的定義があり、特定の蛍光体の色度、所定の伝達曲線、順応性のホワイトポイント、観察条件などに基づいている。これは一般的なコンピュータのモニタとそれを人間が見る環境に合うように選択されている。しかし、そもそも色再現性という概念が全く一般的には理解されていないため「色が違う」といった苦情が出るなどといったトラブルが後を断たない。 ましてや、加法混合であるディスプレイと減法混合である印刷で、何の調節も管理も無く同じ見栄えが得られる道理などなく（原色#加法混合と原色#減法混合を参照）、(準)商業レベルのカラーの印刷には、できればカラーマネージメントシステム等が必要であるが、これはコンピュータ中の色表現と印刷という話題であって、ウェブのコンテンツに全く限られない話だからこれ以上は触れない。 16進トリプレットは、先頭に # を前置した後に、色深度がRGBの各色4ビットあるいは8ビット（すなわち12bpp（4096色）あるいは24bpp（約1,600万色））のどれかの色について、16進3桁あるいは6桁で表現するものである。赤・緑・青の順で、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の色指定では規格外である。3桁から6桁への拡張は、各桁を繰り返せばよく、例えば09Cなら0099CCとすればよい。 HTML 4.01仕様では（当時のパーソナルコンピュータのGUI環境のパレットにおいて、いわゆる「システムカラー」として用意されていた色に基づく）16の基本的な色名称を次のように定義している（大文字/小文字は区別しない）。 これら16色はHTML 3.0仕様にもsRGBで示されており、「この標準16色はWindowsのVGAパレットでサポートされている」とある。 多くの環境で、X Window Systemと共に普及したX11の色名称に基づいた色名称がサポートされている。これらの色はSVG 1.0で標準化され、SVG Full に対応したユーザーエージェントが受け付ける（SVG Tinyにはこれらの標準は含まれない）。 X11製品に付属する色名称一覧ファイルの内容は実装によって差異があり、HTMLでの色名称と食い違いも存在する（greenなど）。さらにX11での定義はsRGBのような特定の色空間を前提としていない単なるRGBとしての定義である。すなわち、X11にある色名称一覧ファイル（例えば、/usr/lib/X11/rgb.txt）をそのままウェブ上での色の選択に使うのは好ましくない、とされている。 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である。 ウェブ技術が大きく発展した1990年代後半の多くのパーソナルコンピュータのビデオカードは、現代のコンピュータのようなフルカラーをまだサポートしておらず、フルカラーの約1,600万色のうちから選んだ256色のみしか同時には表示できない、というものが多かった。「ウェブセーフカラー」と称されるパレット（色の集合）はそのような時代における苦慮の策として存在したもので、フルカラーをサポートするコンピュータや携帯端末が大きく普及した2018年現在では、積極的な意義が存在するものではない。 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）。そのようなシステムではコンテンツ側でウェブセーフカラーを使っていたとしても、さらに減色される。 以上のようにしてデファクトスタンダードとして成立したパレット（色の集合）であり、色彩設計（デザイン）からの観点などは無い。背景に使える明るい色の選択肢が狭い、暗い色同士は区別が難しいものもある、などといった欠点が指摘されている。また、写真などの画像を減色加工する目的等に適しているわけでもなく、イラスト等を描く際に、これらの中にある色を選べば、表示側でそのまま表示される（確率が高い）、という目安に過ぎない。 このパレットの出典として、これを「Browser Safe color palette」として著書で紹介したLynda Weinmanの名が（誤って）提示されていることがある。しかし、前述のように、ブラウザの側の実装がそうなっていた、というのが先であり、Lynda Weinmanの関与は（挙げるならば）名前を付けただけに過ぎない。著者自身がフォローのための情報をウェブで公開していた（注のリンク先（アーカイブ）を参照）。 ウェブセーフカラーの各色に対する標準名称といったものは存在しない。 次の表は、ウェブセーフカラー全216色である。 凡例 下線のある色は、次節で説明する「Reallysafe」な22色。 見出しの「330°」などの数字は、MRYGCBの、それぞれのちょうど中間点となる、色相の値。 F0F - C0Fまでの一列30色は、彩度・明度ともに最大=純色。 約1,600万色（24ビットカラー）のうち256色が使える環境の他に、当時は、16ビットカラーの環境も多かった。David LehnとHadley Sternは、ウェブセーフカラーの216色のうち、16ビットカラーで表示できる22色を the Reallysafe palette と呼んだ。 以下にその22色を示す。また、上の表では、それらの色には下線を引いてある。 ※（赤字）は、「HTML基本16色」のうちの8色。 Cascading Style Sheetsでは、HTML 4仕様と同じ数（基本の16色）の色を定義している。さらにCSS 2.1はこれに"orange"を追加した。 またCSS 2、SVGおよびCSS 2.1ではsystem colorsと呼ばれる色が使えるが、これらの色はオペレーティングシステムのデスクトップで使っている色の値に名前をつけたものである。これらを使うとユーザーのOS環境に合わせた色を使うことができる。2004年現在、CSS3仕様ではこの機能が"depreated"とされているが、今後変更される可能性もある。 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 */ 中には色をサポートしていないウェブブラウザや機器もある。そのような機器や、視覚障害、色覚異常のあるユーザーのため、ウェブコンテンツは色がなくとも使えるようにすることが望ましい。色が表示できないとき、背景と文字が似たような明るさで識別できくなることは避けるべきである。同様にリンクを青で表示することが多いため、背景を青系の色にするとリンクが目立たなくなる。 ^ Guide to Graphics. SP LUS, splus.com. Page 13.[リンク切れ] ^ Gaurav Sharma著、「Digital Color Imaging Handbook」（ISBN 084930900X） ^ HTML4 Transitional Document Type Definition ^ HTML 4.01 Specification section 6.5 "Colors" ^ HTML 3.2 Specification "The BODY element" ^ Public discussion on SVG mailing list Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt ^ W3C TR CSS3 Color Module, SVG color keywords ^ W3C TR SVG 1.0, recognized color keyword names ^ 2016年現在「簡単な数コマ程度の動画のための、手軽な広く普及しているフォーマット」が、いわゆるアニメーションGIFしか存在しないことから、GIFにするため写真等を256色に減色する必要がある、というのが2016年現在の数少ない減色作業の例であるが、そういった場合は画像からメディアンカット等の手法で適応的にパレットを決めたほうが良い。 ^ 1996年の著書『Designing Web Graphics』 ISBN 1-56205-532-1 の pp. 68～69 などにある。 ^ https://web.archive.org/web/19961109214300/http://www.lynda.com/hex.html ^ https://web.archive.org/web/20060424141309/http://www.lynda.com/hex.html ^ Death of the Websafe Color Palette? ^ “CSS 2.1 Specification: Syntax and basic data types: Colors” (2009年9月8日). 2009年12月21日閲覧。 ^ User interface - System colors ^ CSS3 Color Module - CSS2 System Colors ^ If You Pick One Color, Pick Them All 色名一覧 CIE Lab色空間 CSS2.1 Color Specification