トップQs
タイムライン
チャット
視点
ウェブカラー
ウェブ等における色の扱い ウィキペディアから
Remove ads
このウェブカラー（英: Web colors）の記事では、ウェブ等における色の扱い等について解説する。
この項目では色を扱っています。閲覧環境によっては、色が適切に表示されていない場合があります。
指定法
 |
ウェブコンテンツの視覚的な表現に関して指定するスタイルシート（CSS）や、Scalable Vector Graphics（SVG）において、色を指定する方法はいくつかある。主要な方法としては、十六進でRGBの三ツ組（16進トリプレット）を指定する方法と、色名称で指定する方法がある。詳細は後の節で述べる。
歴史
最初期のMosaicや、続いてNetscape NavigatorなどはどちらもX Window Systemのアプリケーションとして始まったということもあり、色名称としてX11の色名称が流用されていた[1]。その後、インターネット接続環境が一般個人にも広まったが、その当時の一般個人のパーソナルコンピュータのスペックの制限などもあり、色の扱いには気を使う必要がある時代もあった。#ウェブセーフカラーの節で説明する。
カラーマネージメント
パーソナルコンピュータ業界団体によるものとしては、sRGBという比色分析的定義があり、特定の蛍光体の色度、所定の伝達曲線、順応性のホワイトポイント、観察条件などに基づいている[2]。これは一般的なコンピュータのモニタとそれを人間が見る環境に合うように選択されている。しかし、そもそも色再現性という概念が全く一般的には理解されていないため「色が違う」といった苦情が出るなどといったトラブルが後を断たない。
ましてや、加法混合であるディスプレイと減法混合である印刷で、何の調節も管理も無く同じ見栄えが得られる道理などなく（原色#加法混合と原色#減法混合を参照）、(準)商業レベルのカラーの印刷には、できればカラーマネージメントシステム等が必要であるが、これはコンピュータ中の色表現と印刷という話題であって、ウェブのコンテンツに全く限られない話である。
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の色指定では規格外である[3]。3桁から6桁への拡張は、各桁を繰り返せばよく、例えば09Cなら#0099CC（水色、■）とすればよい。
Remove ads
HTMLでの色名称
HTML 4.01仕様[4]では（当時のパーソナルコンピュータのGUI環境のパレットにおいて、いわゆる「システムカラー」として用意されていた色に基づく）、基本的な色名称を次のように定義している（大文字/小文字は区別しない）。
これらの色はHTML 3.0仕様にもsRGBで示されており、「この標準16色はWindowsのVGAパレットでサポートされている」とある[5]。
X11の色名称
要約
視点
→詳細は「X11の色名称」を参照
多くの環境で、X Window Systemと共に普及したX11の色名称に基づいた色名称がサポートされている。これらの色はSVG 1.0で標準化され、SVG Full に対応したユーザーエージェントが受け付ける（SVG Tinyにはこれらの標準は含まれない）。
X11製品に付属する色名称一覧ファイルの内容は実装によって差異があり、HTMLでの色名称と食い違いも存在する（Greenなど）。さらにX11での定義はsRGBのような特定の色空間を前提としていない単なるRGBとしての定義である。すなわち、X11にある色名称一覧ファイル（例えば、/usr/lib/X11/rgb.txt）をそのままウェブ上での色の選択に使うのは好ましくない、とされている[6]。
CSS3仕様でウェブ用の"X11 colors"として定義されている色の一覧を16進と10進の値と共に示す[7]。なお、同じ色で別名が示されているものもある。Aqua（HTML4/CSS 1.0での標準名）とCyan（sRGBでの名前）、Fuchsia（HTML4/CSS 1.0での標準名）とMagenta（sRGBでの名前）、Gray（HTML4/CSS 1.0での標準名）と Grey（計7色）の9色である[8]。また、Grayよりも明るいDarkGrayやPinkよりも暗いLightPinkのように一貫性のない名称もある。
CSS4ではRebeccaPurpleが追加され、重複を除くと139色となった[9]。
Remove ads
ウェブセーフカラー
要約
視点
ウェブ技術が大きく発展し始めた1990年代半ばに使われていたパーソナルコンピュータのビデオカードは、現代のコンピュータのようなフルカラーをサポートしておらず、フルカラーの約1600万色のうちから選んだ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）。そのようなシステムではコンテンツ側でウェブセーフカラーを使っていたとしても、さらに減色される。
以上のようにしてデファクトスタンダードとして成立したパレット（色の集合）であり、色彩設計（デザイン）からの観点などは無い。背景に使える明るい色の選択肢が狭い、暗い色同士は区別が難しいものもある、などといった欠点が指摘されている。また、写真などの画像を減色加工する目的等に適しているわけでもなく[注釈 1]、イラスト等を描く際に、これらの中にある色を選べば、表示側でそのまま表示される（確率が高い）、という目安に過ぎない。
このパレットの出典として、これを「Browser Safe color palette」として著書で紹介した[10]Lynda Weinmanの名が（誤って）提示されていることがある。しかし、前述のように、ブラウザの側の実装がそうなっていた、というのが先であり、Lynda Weinmanの関与は（挙げるならば）名前を付けただけに過ぎない。著者自身がフォローのための情報をウェブで公開していた（注のリンク先（アーカイブ）を参照）[11][12]。
ウェブセーフカラーの各色に対する標準名称といったものは存在しない。
カラーテーブル
次の表は、ウェブセーフカラー全216色である。
凡例
- 下線のある色は、次節で説明する「Reallysafe」な22色。
- 見出しの「330°」などの数字は、MRYGCBの、それぞれのちょうど中間点となる、色相の値。
- F0F - C0Fまでの一列30色は、彩度・明度ともに最大=純色。
Reallysafe palette
約1600万色（24ビットカラー）のうち256色が使える環境の他に、当時は、16ビットカラーの環境も多かった。David LehnとHadley Sternは、ウェブセーフカラーの216色のうち、16ビットカラーで表示できる22色を the Reallysafe palette と呼んだ。[13]
以下にその22色を示す。また、上の表では、それらの色には下線を引いてある。
| 色 | |||||||||||
| 16進3桁 | （#F0F） | #F03 | （#F00） | （#FF0） | #FF3 | #FF6 | （#FFF） | #CF6 | #6F0 | #6F3 | #3F3 |
| 色 | |||||||||||
| 16進3桁 | （#0F0） | #3F6 | #0F6 | #3FC | #0FC | #6FF | #3FF | （#0FF） | （#00F） | #003 | （#000） |
※（赤字）は、「HTML基本16色」のうちの8色。
Remove ads
CSSカラー
Cascading Style Sheetsでは、HTML 4仕様と同じ数（基本の16色）の色を定義している。またCSS 2、SVGおよびCSS 2.1ではsystem colorsと呼ばれる色が使えるが、これらの色はオペレーティングシステムのデスクトップで使っている色の値に名前をつけたものである。これらを使うとユーザーのOS環境に合わせた色を使うことができる[14]。2004年現在、CSS3仕様ではこの機能が"depreated"とされているが、今後変更される可能性もある[15]。
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 */
Remove ads
アクセシビリティ
中には色をサポートしていないウェブブラウザや機器もある。そのような機器や、視覚障害、色覚異常のあるユーザーのため、ウェブコンテンツは色がなくとも使えるようにすることが望ましい。色が表示できないとき、背景と文字が似たような明るさで識別できくなることは避けるべきである[16]。同様にリンクを青で表示することが多いため、背景を青系の色にするとリンクが目立たなくなる。
脚注
関連項目
外部リンク
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads