ウェブカラー

HTML
HTML and variants
HTML elements and attributes
Editing
Character encodings and language
Document and browser models
Client-side scripting and APIs
Graphics and Web3D technology
Comparisons

ウェブカラーは、ワールドワイドウェブ上でウェブページを表示する際に使用される色であり、3つの方法で記述できます。色は、RGB 3値、16進形式（16進数3値）、または場合によっては一般的な英語名で指定できます。カラーツールまたはその他のグラフィックソフトウェアは、多くの場合、色の値を生成するために使用されます。場合によっては、先頭に番号記号（#）を使用した表記で16進カラーコードが指定されます。[1] [2]色は、赤、緑、青の各要素の強度に従って指定され、各要素は8ビットで表されます。したがって、 sRGB色域内でウェブカラーを指定するために24ビットが使用され、そのように指定できる色は16,777,216色あります。

sRGB 色域外の色は、カスケーディング・スタイル・シート（ CSS）において、赤、緑、青の3つの要素のうち1つ以上を負の値、または100%より大きい値にすることで指定できます。そのため、理論上はscRGBと同様に、sRGB の無限外挿となる色空間となります。[3]この方法で sRGB 以外の色を指定するには、RGB()関数呼び出しが必要です。これは16進数構文では不可能であり（したがって、CSS を使用しない 従来のHTML文書では不可能です）、

MosaicとNetscape Navigatorの最初のバージョンは、どちらもX Window Systemアプリケーションとして始まったため、 X11 のカラー名をカラーリストのベースとして使用していました。Web カラーには、特定のリン光体セットの色度、所定の転送曲線、適応ホワイトポイント、表示条件を関連付けるsRGB という明確な色彩定義があります。 [4]これらは、カラー マネージメントがなくても指定された値にかなり近いレンダリングができるように、多くの実際のモニターと表示条件に類似するように選択されています。ユーザー エージェントによって、指定された色を再現する際の忠実度は異なります。より高度なユーザー エージェントは、カラー マネージメントを使用して、より正確な色の再現性を提供します。これは、Web から印刷へのアプリケーションでは特に重要です。

六角形のトリプレット

16進トリプレットは、 HTML、CSS、SVG 、およびその他のコンピューティング アプリケーションで色を表すために使用される6 桁 (または 8 桁)、3バイト(または 4 バイト)の16 進数です。バイトは色の赤、緑、青の要素を表します。オプションの 4 番目のバイトはアルファ チャネルを参照します。1 バイトは 00 ～ FF (16 進数表記)、または 0 ～ 255 (10 進数表記) の範囲の数値を表します。これは、各色要素の最低 (0) から最高 (255) の強度を表します。したがって、Web カラーは24 ビット RGB カラー スキームで色を指定します。16 進トリプレットは、次の順序で 3 つのバイトを 16 進数表記で連結することによって形成されます。

  • バイト1: 赤の値（カラータイプは赤）
  • バイト2: 緑の値（カラータイプは緑）
  • バイト3: 青の値（カラータイプは青）
  • バイト4（オプション）: アルファ値

例えば、赤、緑、青の値が10進数で表されている色を考えてみましょう。赤=123、緑=58、青=30（堅木のような茶色）です。10進数の123、58、30は、それぞれ16進数の7B、3A、1Eに相当します。16進数の3桁目は、6つの16進数を連結することで得られ、この例では7B3A1Eとなります。

3つの色値のいずれかが16進数で10（10進数で16）未満の場合、先頭にゼロを付けて表す必要があります。これにより、3つの数値は常に6桁になります。例えば、10進数で4、8、16という3つの数値は、16進数で04、08、10という3つの数値で表され、040810という16進数になります。

このシステムで表現できる色の数は、256 3、16 6、または 2 24 = 16,777,216 です。

16進数の略記

短縮された3桁（16進数）または4桁の形式を使用することもできますが[5]、ソフトウェアやメンテナンススクリプトが長い形式のみを想定している場合はエラーが発生する可能性があります。この形式を6桁に拡張するには、各桁を繰り返すだけです。次のCSS例に示すように、09Cは0099CCになります。

. threedigit { color : #09C ; } . sixdigit { color : #0099CC ; } /* 上記と同じ色 */

この省略形はパレットを4,096色に削減します。これは、6桁の数字全体（16,777,216色）を使用した24ビットカラーとは対照的に、12ビットカラーに相当します。この制限は、多くのテキストベースのドキュメントには十分です。

RGBを16進数に変換する

RGB 値は通常 0～255 の範囲で表されます。0～1 の範囲にある場合は、変換前に値に 255 が掛けられます。この数値を 16 で割ると (整数除算、余りは無視)、16 進数の最初の桁 (0 から F まで、文字 A から F は数値 10 から 15 を表します。詳細については、16進数を参照してください) が得られます。余りが 16 進数の 2 番目の桁になります。たとえば、RGB 値 58 (前の 16 進数 3 桁の例で示したように) は 16 の 3 つのグループに分かれるため、最初の桁は 3 になります。余りが 10 の場合は、16 進数の 3A になります。同様に、RGB 値 201 は 16 の 12 グループに分かれるため、最初の桁は C です。余りが 9 の場合は、16 進数の C9 になります。このプロセスは、3 つのカラー値ごとに繰り返されます。

基数間の変換は、携帯型計算機だけでなく、ほとんどの最新オペレーティングシステムにバンドルされているソフトウェア計算機を含む計算機の一般的な機能です。色値の変換に特化したWebベースのツールも利用可能です。

HTMLの色名

最近のW3Cの色名仕様では、基本色と拡張色が区別されています。[6] HTMLとXHTMLでは、色はテキスト、背景色、フレームの境界線、表、個々の表セルに使用できます。[7]

すべての基本的なHTMLカラーを含む図

基本色

基本色は1999年に承認されたHTML 4.01仕様で定義されている16色です[8]（この文脈では名前は大文字と小文字を区別しないように定義されています）。

CSS 1～2.0、HTML 3.2～4​​、およびVGAカラー名
名前16進数
（RGB）		赤
（RGB）		緑
（RGB）		青
（RGB）		色相
（HSL/HSV）		土星
（HSL）		ライト
（HSL）		飽和
（HSV）		値
（HSV）		CGA番号（名前）; 別名
白#FFFFFF100%100%100%0 °0%100%0%100%15（白）
銀#C0C0C075%75%75%0 °0%75%0%75%07（ライトグレー）
グレー＃80808050%50%50%0 °0%50%0%50%08（ダークグレー）
黒#0000000%0%0%0 °0%0%0%0%00（ブラック）
赤#FF0000100%0%0%0 °100%50%100%100%12（ハイレッド）
マルーン800000番50%0%0%0 °100%25%100%50%04（ローレッド）
黄色#FFFF00100%100%0%60 °100%50%100%100%14（黄色）
オリーブ＃80800050%50%0%60 °100%25%100%50%06（ブラウン）
ライム#00FF000%100%0%120 °100%50%100%100%10（ハイグリーン）; 緑
緑#0080000%50%0%120 °100%25%100%50%02（ローグリーン）
アクア#00FFFF0%100%100%180 °100%50%100%100%11（高シアン）; シアン
ティール#0080800%50%50%180 °100%25%100%50%03（低シアン）
青#0000FF0%0%100%240 °100%50%100%100%09（ハイブルー）
海軍#0000800%0%50%240 °100%25%100%50%01（ローブルー）
フクシア#FF00FF100%0%100%300 °100%50%100%100%13（高マゼンタ）; マゼンタ
紫＃80008050%0%50%300 °100%25%100%50%05（低マゼンタ）

これらの16色はsRGBとしてラベル付けされ、HTML 3.0仕様に含まれており、「Windows VGAパレットでサポートされている標準の16色」であると記されています。[9]

拡張カラー

X11 色名の SVG バージョン
UHD（4K）解像度で、sRGB 16進数/10進数およびHSLコードを使用したSVG1.1名前付きカラー

拡張カラーは、HTML 4.01、CSS 2.0、SVG 1.0、CSS3ユーザーインターフェイス（CSS3 UI）の仕様を統合した結果です。[6]

ウェブブラウザによっていくつかの色が定義されています。特定のブラウザではこれらの色をすべて認識できない場合もありますが、2005年現在、すべての最新の汎用グラフィカルブラウザは、これらの色をすべてサポートしています。これらの色の多くは、X Window Systemに付属するX11 色名のリストに含まれています。これらの色はSVG 1.0で標準化されており、SVG Fullユーザーエージェントで使用できます。SVG Tinyには含まれていません。

X11製品に同梱されている色の一覧は実装によって異なり、緑などのHTMLの特定の名前と衝突することがあります。X11の色はsRGBではなく、単純なRGB （したがって特定の色空間を持たない）として定義されています。つまり、X11に含まれる色の一覧（例えば/usr/lib/X11/rgb.txt）をそのままWeb用の色の選択に使用すべきではありません。[10]

CSS3仕様におけるウェブ「X11カラー」のリストと、それらの16進数および10進数での対応表を以下に示します。W3C標準規格のアルファベット順リストと比較してください。これには、一般的な同義語であるアクア（HTML4/CSS 1.0標準名称）とシアン（一般的なsRGB名称）、フクシア（HTML4/CSS 1.0標準名称）とマゼンタ（一般的なsRGB名称）、グレー（HTML4/CSS 1.0標準名称）とグレーが含まれています。[11] [12]

HTML名RGB
ヘックス小数点
ピンク色
ミディアムバイオレットレッドC71585199、21、133
ディープピンクFF1493255、20、147
ペールバイオレットレッドDB7093219、112、147
ホットピンクFF69B4255、105、180
ライトピンクFFB6C1255、182、193
ピンクFFC0CB255、192、203
赤色
ダークレッド8B0000139, 0, 0
赤FF0000255, 0, 0
耐火レンガB22222178、34、34
クリムゾンDC143C220、20、60
インディアンレッドCD5C5C205、92、92
ライトコーラルF08080240、128、128
鮭FA8072250、128、114
ダークサーモンE9967A233、150、122
ライトサーモンFFA07A255、160、122
オレンジ色
オレンジレッドFF4500255, 69, 0
トマトFF6347255、99、71
ダークオレンジFF8C00255, 140, 0
コーラルFF7F50255、127、80
オレンジFFA500255, 165, 0
黄色
ダークカーキBDB76B189、183、107
金FFD700255, 215, 0
カーキF0E68C240、230、140
ピーチパフFFDAB9255、218、185
黄色FFFF00255, 255, 0
ペールゴールデンロッドEEE8AA238、232、170
モカシンFFE4B5255、228、181
パパイヤホイップFFEFD5255、239、213
ライトゴールデンロッドイエローファファド2250、250、210
レモンシフォンFFFACD255、250、205
ライトイエローFFFFE0255、255、224
茶色
マルーン800000128, 0, 0
茶色A52A2A165、42、42
サドルブラウン8B4513139、69、19
シエナA0522D160、82、45
チョコレートD2691E210、105、30
ダークゴールデンロッドB8860B184、134、11
ペルーCD853F205、133、63
ロージーブラウンBC8F8F188、143、143
ゴールデンロッドDAA520218、165、32
サンディブラウンF4A460244, 164, 96
タンD2B48C210、180、140
バーリーウッドDEB887222、184、135
小麦F5DEB3245、222、179
ナバホホワイトFFDEAD255、222、173
ビスクFFE4C4255、228、196
ブランチドアーモンドFFEBCD255、235、205
コーンシルクFFF8DC255、248、220
HTML名RGB
ヘックス小数点
紫、バイオレット、マゼンタの色
インジゴ4B008275、0、130
紫800080128, 0, 128
ダークマゼンタ8B008B139, 0, 139
ダークバイオレット9400D3148, 0, 211
ダークスレートブルー483D8B72、61、139
ブルーバイオレット8A2BE2138、43、226
ダークオーキッド9932CC153、50、204
フクシアFF00FF255, 0, 255
マゼンタFF00FF255, 0, 255
スレートブルー6A5ACD106、90、205
ミディアムスレートブルー7B68EE123、104、238
ミディアムオーキッドBA55D3186、85、211
ミディアムパープル9370DB147、112、219
蘭DA70D6218、112、214
バイオレットEE82EE238、130、238
梅DDA0DD221、160、221
アザミD8BFD8216、191、216
ラベンダーE6E6FA230、230、250
青色
ミッドナイトブルー19197025、25、112
海軍0000800, 0, 128
ダークブルー00008B0, 0, 139
ミディアムブルー0000CD0, 0, 205
青0000FF0, 0, 255
ロイヤルブルー4169E165、105、225
スティールブルー4682B470、130、180
ドジャーブルー1E90FF30、144、255
ディープスカイブルー00BFFF0, 191, 255
コーンフラワーブルー6495ED100、149、237
スカイブルー87CEEB135、206、235
ライトスカイブルー87CEFA135、206、250
ライトスチールブルーB0C4DE176、196、222
ライトブルーADD8E6173、216、230
パウダーブルーB0E0E6176、224、230
シアン色
ティール0080800, 128, 128
ダークシアン008B8B0, 139, 139
ライトシーグリーン20B2AA32、178、170
キャデットブルー5F9EA095、158、160
ダークターコイズ00CED10, 206, 209
ミディアムターコイズ48D1CC72、209、204
ターコイズ40E0D064, 224, 208
アクア00FFFF0, 255, 255
シアン00FFFF0, 255, 255
アクアマリン7FFFD4127、255、212
ペールターコイズアフィー175、238、238
ライトシアンE0FFFF224、255、255
HTML名RGB
ヘックス小数点
緑色
ダークグリーン0064000, 100, 0
緑0080000, 128, 0
ダークオリーブグリーン556B2F85、107、47
フォレストグリーン228B2234、139、34
シーグリーン2E8B5746、139、87
オリーブ808000128, 128, 0
オリーブドラブ6B8E23107、142、35
ミディアムシーグリーン3CB37160、179、113
ライムグリーン32CD3250、205、50
ライム00FF000, 255, 0
スプリンググリーン00FF7F0, 255, 127
ミディアムスプリンググリーン00FA9A0、250、154
ダークシーグリーン8FBC8F143、188、143
ミディアムアクアマリン66CDAA102、205、170
黄緑9ACD32154、205、50
ローングリーン7CFC00124, 252, 0
シャルトリューズ7FFF00127, 255, 0
ライトグリーン90EE90144、238、144
グリーンイエローADFF2F173、255、47
ペールグリーン98FB98152、251、152
白色
ミスティローズFFE4E1255、228、225
アンティークホワイトFAEBD7250、235、215
リネンFAF0E6250、240、230
ベージュF5F5DC245、245、220
ホワイトスモークF5F5F5245、245、245
ラベンダーブラッシュFFF0F5255、240、245
オールドレースFDF5E6253、245、230
アリスブルーF0F8FF240、248、255
貝殻FFF5EE255、245、238
ゴーストホワイトF8F8FF248、248、255
甘露F0FFF0240、255、240
フローラルホワイトFFFAF0255、250、240
アズールF0FFFF240、255、255
ミントクリームF5FFFA245、255、250
雪FFFAFA255、250、250
象牙FFFFF0255、255、240
白FFFFFF255、255、255
グレーと黒の色
黒0000000、0、0
ダークスレートグレー2F4F4F47、79、79
ディムグレー696969105、105、105
スレートグレー708090112、128、144
グレー808080128、128、128
ライトスレートグレー778899119、136、153
ダークグレーA9A9A9169、169、169
銀コココ192、192、192
ライトグレーD3D3D3211、211、211
ゲインズボロDCDCDC220、220、220

CSSカラー

カスケードスタイルシート仕様では、HTML 4仕様と同じ数の色名が定義されています。つまり、HTMLの16色とNetscape X11カラーリストの124色で、合計140色の名前がInternet Explorer (IE) 3.0とNetscape Navigator 3.0で認識されます。[13] Blooberry.comによると、Opera 2.1とSafari 1にもNetscapeの拡張された140色の名前が含まれていましたが、後にWindows 98のOpera 3.5には含まれていない14色の名前が発見されました。[14]

CSS 2.1では、140色のうちの1色である「オレンジ」が、HTML4の16色を含むセクションに17番目の色として追加されました。[15] CSS3.0仕様では、「HTML4カラーキーワード」セクションにオレンジが含まれていなかったため、「基本カラーキーワード」に改名されました。 [16]同じリファレンスの「SVGカラーキーワード」セクションは、以前のワーキングドラフトでは「X11カラーキーワード」として開始されましたが、「拡張カラーキーワード」に改名されました。[17]レベル4カラーモジュールのワーキングドラフトでは、基本セクションと拡張セクションが統合され、シンプルな「名前付きカラー」セクションになっています。[18]

CSS 2.1で追加された色
名前16進数
（RGB）		赤
（RGB）		緑
（RGB）		青
（RGB）		色相
（HSL/HSV）		土星
（HSL）		ライト
（HSL）		飽和
（HSV）		値
（HSV）
オレンジ#FFA500100%65%0%39 °100%50%100%100%

CSS 2、SVG 、CSS 2.1では、ウェブ制作者はシステムカラーを使用できます。システムカラーとは、オペレーティングシステムから値を取得する色名で、オペレーティングシステムのハイライト表示テキストの色やツールチップコントロールの背景色などが使用されます。これにより、ウェブ制作者はユーザーエージェントのオペレーティングシステムに合わせてコンテンツのスタイルを設定できます。[19] CSS3カラーモジュールでは、システムカラーの使用は廃止され、CSS3 UI System Appearanceプロパティ[20] [21]が推奨されていますが、このプロパティ自体もその後CSS3から削除されました。[22]

システムカラーキーワードの例
外観キーワード
リンクテキスト
訪問したテキスト
アクティブテキスト
ハイライト
マーク

CSS3仕様では、スタイルシートにHSLカラースペース値も導入されている。 [23]

/* RGB モデル */ p { color : #F00 } /* #rgb */ p { color : #FF0000 } /* #rrggbb */ p { color : rgb ( 255 , 0 , 0 ) } /* 整数範囲 0 - 255 */ p { color : rgb ( 100 % , 0 % , 0 % ) } /* 浮動小数点範囲 0.0% - 100.0% */                        /* アルファチャンネル付きRGB、CSS3に追加 */ p { color : rgba ( 255 , 0 , 0 , 0.5 ) } /* 不透明度50%、半透明 */        /* CSS3 に追加された HSL モデル */ p { color : hsl ( 0 , 100 % , 50 % ) } /* 赤 */ p { color : hsl ( 120 , 100 % , 50 % ) } /* 緑 */ p { color : hsl ( 120 , 100 % , 25 % ) } /* 濃い緑 */ p { color : hsl ( 120 , 100 % , 75 % ) } /* 薄い緑 */ p { color : hsl ( 120 , 50 % , 50 % ) } /* パステルグリーン */                                   /* アルファチャンネル付き HSL モデル */ p { color : hsla ( 120 , 100 % , 50 % , 1 ) } /* 緑 */ p { color : hsla ( 120 , 100 % , 50 % , 0.5 ) } /* 半透明の緑 */ p { color : hsla ( 120 , 100 % , 50 % , 0.1 ) } /* 非常に透明な緑 */

transparentCSSは、アルファ値0を表す特殊な色 もサポートしています。デフォルトでは、transparent目に見えない名目上の黒としてレンダリングされますrgba(0, 0, 0, 0)。これはCSS1で導入されましたが、バージョンを重ねるごとにその使用範囲は拡大してきました。[23]

CSSカラー4

CSSカラー仕様のレベル4では、いくつかの新しいCSSカラーフォーマットが導入されました。[24]

色の新しい表記法に加え、 sRGB以外の色空間における色の混合の概念も導入されています。これは、色のグラデーションにおけるよく知られた問題を解決するための第一歩です。実装を容易にするために、色彩理論やガモットマッピングなどの一般的な操作を説明するセクションもいくつか追加されています。[24]

p { color : #F80A } /* #rgba */ p { color : #FF8800 AA } /* #rrggbbaa */ p { color : rgb ( 255.0 136.0 0.0 / 0.667 ) } /* 8ビット精度以上の場合の浮動小数点範囲0.0 - 255.0 */ p { color : rgb ( 100 % 53.3 % 0 % / 66.7 % ) } /* 浮動小数点範囲0.0% - 100.0% */ p { color : color ( sRGB 1 0.533 0 / 0.667 ) } /* カラースペースを持つcolor()関数 */

デバイスに依存しない色

CSSカラー4では、デバイスに依存しないカラーのいくつかの異なるフォーマットが導入され、（対応画面で）可視色の全体を表示することができます。[25]

定義済みのカラースペース

sRGBよりも広い色域を持つRGB空間も新しい関数によって導入される: [25]color()

sRGBの線形化バージョンも色混合のために定義されています。[24]

その他の形式

2014年6月21日、CSSワーキンググループは、2014年6月7日に6歳の誕生日を迎えたエリック・マイヤーの娘レベッカを記念して、カラーモジュールレベル4のエディターズドラフトにレベッカパープルという色を追加しました。[26]

CSS4カラーモジュールに追加された色
名前16進数
（RGB）		赤
（RGB）		緑
（RGB）		青
（RGB）		色相
（HSL/HSV）		土星
（HSL）		ライト
（HSL）		飽和
（HSV）		値
（HSV）
レベッカパープル＃66339940%20%60%270 °50%40%67%60%

CSS4ではHSL/HSVの代替としてHWBカラーモデルも導入されています。 [18]

CSSカラー5

CSSカラー5 [27]仕様草案では、既存の色を混ぜたり操作したりするための構文が導入されています。

  • color-mix()色を混ぜる機能
  • 既存の色のコンポーネントを操作するための相対的な色構文

ICCプロファイルを介してカスタムカラースペースもサポートされています。これにより、WebページでCMYKを使用できます。 [27]

ウェブセーフカラー

Color depth
Related

1990年代半ば、多くのディスプレイは256色しか表示できませんでした[28]。これはハードウェアによって制御されるか、「カラーテーブル」によって変更可能でした。画像などで、表示できない色が見つかった場合、別の色を使用する必要がありました。これは、最も近い色を使用するか、ディザリングを使用することで行われました。

「標準」カラーパレットを作成するための様々な試みがなされました。256色ディスプレイでディザリングなしで表示できる色のセットが必要でした。216という数字が選ばれたのは、コンピュータのオペレーティングシステムが通常16色から20色を独自に使用していたためです。また、赤、緑、青の3色をそれぞれ00からFF（両方の上限を含む）まで、正確に6つの等間隔の色合い（6 × 6 × 6 = 216）で表示できるためでもありました。

色のリストは、ディザリングの影響を受けない特別な特性を持つかのように提示されていましたが、256色ディスプレイでは、アプリケーションは実際には任意の色をパレットとして設定し、残りの色をディザリングすることが可能でした。これらの色は、様々なブラウザアプリケーションで選択されたパレットと一致するように特別に選択されました。ブラウザ間でそれほど大きな違いは見られませんでした。[要出典]

「ウェブセーフ」カラーには、X11などのアプリケーション間でパレットを共有するシステムでは、ブラウザによって小さなカラーキューブ（5×5×5または4×4×4）が割り当てられるという欠陥がありました。そのため、「ウェブセーフ」カラーはそのようなシステムではディザリングされてしまいます。画像に広い色域を提供し、ブラウザが必要に応じて色空間を量子化できるようにすることで、二重量子化による品質低下を回避し、異なる結果が得られました。

2000年代を通じて、パーソナルコンピュータにおける256色ディスプレイの使用は24ビット（TrueColor）ディスプレイに取って代わられ、急激に減少しました。 [29]また、「ウェブセーフ」カラーはウェブ上では一般的に使用されなくなりました。

「Web セーフ」カラーはすべて標準の名前を持っているわけではありませんが、それぞれRGBトリプレットで指定できます。各コンポーネント (赤、緑、青) は、次の表の 6 つの値のいずれかになります (完全な 24 ビット カラーで各コンポーネントに使用できる 256 個の可能な値から)。

各色6色
鍵ヘックス小数点分数
00000
333510.2
6661020.4
9991530.6
C (12)CC2040.8
女性（15）FF2551

以下の表は、「ウェブセーフ」カラーをすべて示しています。ウェブセーフパレットの欠点の一つは、ウェブページの背景に適した明るい色の範囲が狭いことです。一方、範囲の下限付近、例えば最も暗い2つの色は、輝度が似通っているため、区別が困難です。「*」（アスタリスク）で囲まれた値は「本当に安全なパレット」の一部です。下記の「最も安全なウェブカラー」をご覧ください。

カラーテーブル

216色の「ウェブセーフ」カラー
*000*300600900C00*F00*
*003*303603903C03*F03*
006306606906C06F06
009309609909C09F09
00C30℃60℃90℃C0CF0C
*00F*30階60F90FC0F*F0F*
030330630930C30F30
033333633933C33F33
036336636936C36F36
039339639939C39F39
03C33C63C93℃C3CF3C
03階33階63階93階C3FF3F
060360660960C60F60
063363663963C63F63
066366666966C66F66
069369669969C69F69
06C36℃66C96CC6CF6C
06階36階66階96FC6FF6F
090390690990C90F90
093393693993C93F93
096396696996C96F96
099399699999C99F99
09C39℃69C99℃C9CF9C
09階39階69階99FC9FF9F
0C03C06C09C0CC0FC0
0C33C36C39C3CC3FC3
0C63C66C69C6CC6FC6
0C93C96C99C9CC9FC9
0CC3CC6CC9CCCCCFCC
0CF3CF6CF9CFCCFFCFC
*0F0*3F0*6F0*9F0CF0*FF0*
0F3*3F3**6F3*9F3CF3*FF3*
*0F6**3F6*6F69F6*CF6**FF6*
0F93F96F99F9CF9FF9
*0FC**3FC*6FC9FCCFCFFC
*0FF**3FF**6FF*9FFCFF*ふぅ*

記載されている各カラーコードはRGB値の略称です。例えば、コード609はRGBコード102-0-153、HEXコード#660099に相当します。

最も安全なウェブカラー

216色パレットが開発された当時、8ビットカラーディスプレイが多数存在していたため、デザイナーはウェブサイトで216色の「ウェブセーフ」カラーを使用するよう推奨されました（誰によって？） 。デイビッド・レーンとハドリー・スターンは、ウェブセーフパレットの216色のうち、16ビットコンピュータディスプレイ上で不整合な再マッピングなしに確実に表示されるのは22色だけであることを発見しました。彼らはこの22色を「真に安全なパレット」と呼びました。このパレットは主に緑、黄、シアンの色合いで構成されています。[30] [31]

最も安全なウェブカラー
R--
-GB
0369CF
00*000**F00*
03*003**F03*
06
09
0℃
0F*00F**F0F*
⋮⋮
F0*0F0**6F0**FF0*
F3*3F3**6F3**FF3*
F6*0F6**3F6**CF6**FF6*
F9
FC*0FC**3FC*
FF*0FF**3FF**6FF**ふぅ*

アクセシビリティ

色の選択

一部のブラウザやデバイスはカラー表示をサポートしていません。これらのディスプレイや視覚障碍者、色覚障碍者にとって、色に依存するWebコンテンツは使いにくく、あるいは利用できない場合があります。

ブラウザのデフォルトの色を呼び出すために色を指定しないか、背景色とすべての前景色（プレーンテキスト、未訪問リンク、ホバーリンク、アクティブリンク、訪問済みリンクの色など）の両方を指定して、黒地に黒、白地に白という効果を避ける必要があります。[32]

色のコントラスト

ウェブコンテンツ・アクセシビリティ・ガイドラインでは、テキストの相対輝度と背景色のコントラスト比を4.5:1以上とすることを推奨しています[33]。大きなテキストの場合は3:1以上としています。アクセシビリティを向上させるには、7:1を超えるコントラスト比が必要です。

しかし、アクセシビリティの問題に対処するのは、単にコントラスト比を上げるという問題ではありません。Web Accessibility Initiativeへの報告書[34] が示すように、失読症の読者には、最大値を下回るコントラスト比のほうが適しています。彼らが言及しているオフブラック(#0A0A0A)とオフホワイト(#FFFFE5)、黒(#000000)とクリーム色(#FAFAC8)の推奨は、それぞれ11.7:1と20.3:1のコントラスト比です。他の色の組み合わせでは、茶色(#282800)とダークグリーン(#A0A000)のコントラスト比は3.24:1で、WCAG推奨事項を下回っています。ダークブラウン(#1E1E00)とライトグリーン(#B9B900)のコントラスト比は4.54:1、青(#00007D)と黄色(#FFFF00)のコントラスト比は11.4:1です。レポートで指定された色は、同じ名前の Web 色とは異なる色の値を使用します。

参照

参考文献

  1. ^ Niederst Robbins, Jennifer (2006年2月). 「付録D：色の指定」. Web Design in a Nutshell . O'Reilly. 830ページ. ISBN 978-0-596-00987-8。
  2. ^ ヨーク、リチャード. CSS入門、pp.71-72。
  3. ^ Pemberton, Steven; Pettit, Brad (2011年6月7日). Çelik, Tantek; Lilley, Chris; Baron, L. David (編). 「CSS Color Module Level 3」. W3C. セクション4.2.1. RGBカラー値.
  4. ^ Sharma, Gaurav; Bala, Raja (2017年12月19日). デジタルカラーイメージングハンドブック. CRC Press. ISBN 978-1-4200-4148-4。
  5. ^ Pemberton, Steven; Pettit, Brad (2011年6月7日). Çelik, Tantek; Lilley, Chris; Baron, L. David (編). 「4.2.1. RGBカラー値」. CSSカラーモジュールレベル3. W3C . 2013年3月19日閲覧。
  6. ^ ab "CSS Color Module Level 3". W3c . 2020年7月19日閲覧。
  7. ^ Powell, Thomas A. (2010). HTML & CSS: The Complete Reference, Fifth Edition . ニューヨーク: McGraw-Hill. p. 765. ISBN 9780071741705。
  8. ^ 「HTML 4.01仕様 | 基本的なHTMLデータ型 | 色」W3C . 2013年7月8日閲覧。
  9. ^ Raggett, Dave. 「HTML 3.2 リファレンス仕様 | BODY要素」. W3C . 2013年7月8日閲覧。
  10. ^ Lilley, Chris (2002年4月24日). 「Re: SVG-1.0のカラー名が/usr/lib/X11/rgb.txtと競合しています」. W3Cパブリックメーリングリストアーカイブ. 2013年7月8日閲覧。
  11. ^ Pemberton, Steven; Pettit, Brad (2011年6月7日). Çelik, Tantek; Lilley, Chris; Baron, L. David (編). 「4.3. 拡張カラーキーワード」. CSS カラーモジュール レベル3 . W3C . 2013年3月19日閲覧。
  12. ^ 「Scalable Vector Graphics (SVG) 1.1 (第2版) | 基本データ型とインターフェース | 認識されたカラーキーワード名」W3C、2011年8月16日。 2019年2月1日閲覧。
  13. ^ 「X11カラーセット」HSEASにおけるコンピューティングとネットワーク. 2014年7月14日時点のオリジナルよりアーカイブ。 2014年7月6日閲覧。
  14. ^ Brian Wilson. 「HTMLとCSSの色」. blooberry.com . 2014年7月6日閲覧。
  15. ^ 「CSS 2.1仕様：構文と基本データ型：色」W3C、2009年9月8日。 2009年12月21日閲覧。
  16. ^ 「CSS カラーモジュールレベル 3 – 勧告案 - 11. 変更点」W3C 2010年10月28日. 2014年7月6日閲覧。
  17. ^ 「CSS3モジュール：カラー | ワーキングドラフト」W3C、2002年4月18日。 2014年7月6日閲覧。
  18. ^ ab 「CSS カラー モジュール レベル 4 – 名前付きカラー」。
  19. ^ 「ユーザーインターフェース - システムカラー」W3C . 2013年7月8日閲覧。
  20. ^ Pemberton, Steven; Pettit, Brad (2011年6月7日). Çelik, Tantek; Lilley, Chris; Baron, L. David (編). 「4.5.1. CSS2 システムカラー」. CSS カラーモジュール レベル3 . W3C . 2013年3月19日閲覧。
  21. ^ 「CSS3 基本ユーザーインターフェースモジュール | システムの外観」W3C . 2013年7月8日閲覧。
  22. ^ Çelik, Tantek編 (2012年1月17日). 「大幅な変更点一覧」. CSS 基本ユーザーインターフェースモジュール レベル3. W3C . 2013年3月19日閲覧.システム外観（外観値とプロパティ、システムフォント/「font」プロパティのショートカット拡張を含む）は削除されました。
  23. ^ ab Pemberton, Steven; Pettit, Brad (2011年6月7日). Çelik, Tantek; Lilley, Chris; Baron, L. David (編). 「4.2.4. HSL カラー値」. CSS カラーモジュール レベル 3 . W3C . 2013年3月19日閲覧。
  24. ^ abcd "CSS Color Module Level 4". W3C . 2022年3月14日閲覧。
  25. ^ ab 「CSS カラーモジュール レベル 4: 概要」W3C . 2022年1月11日閲覧。
  26. ^ Glazman, Daniel (2014年6月21日). 「Re: [CfC] CSS Color Level 4への「rebeccapurple」の追加」www-styleメーリングリストへの投稿. W3C . 2014年6月24日閲覧。
  27. ^ ab CSS カラーモジュール レベル 5
  28. ^ ジェンキンス、スー（2012年12月27日）『Web Design All-in-One For Dummies』John Wiley & Sons. ISBN 9781118404119。
  29. ^ 「ブラウザ表示統計」W3Schools . 2013年7月8日閲覧。
  30. ^ Lehn, David; Stern, Hadley. 「Websafe Color Paletteの終焉か？」 asc.ohio-state.edu. 2021年3月3日時点のオリジナルよりアーカイブ。 2021年3月3日閲覧。
  31. ^ Piperoglou, Stephanos (2000年12月13日). 「Web Color Reference - HTML with Style | 4」. WebReference . 2016年11月23日時点のオリジナルよりアーカイブ。2016年1月5日閲覧。
  32. ^ 「1つの色を選ぶなら、全部選ぼう」W3C . 2013年7月8日閲覧。
  33. ^ WCAG 2.0ガイドライン1.4
  34. ^ 失読症の人の読みやすさを向上させる最適な色
Retrieved from "https://en.wikipedia.org/w/index.php?title=Web_colors&oldid=1320484439"