ウェブカラー

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トリプレット、16進形式（16進トリプレット）、または場合によっては一般的な英語名で指定できます。カラーツールやその他のグラフィックソフトウェアは、色の値を生成するためによく使用されます。場合によっては、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 to Printアプリケーションにとって特に重要です。

16進数トリプレット

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

  • バイト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）未満の場合、先頭に0を付けて表す必要があります。そうすることで、3桁は常にちょうど6桁になります。例えば、10進数の3桁4、8、16は、16進数の04、08、10で表され、16進数の3桁040810となります

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

短縮された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 (赤みがかった赤)
マルーン#80000050%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バージョン
SVG1.1は、UHD（4K）解像度で、sRGBの16進数/10進数とHSLコードを使用して色に名前を付けました。

拡張色は、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仕様のWeb「X11色」のリストと、それらの16進数および10進数の等価値を以下に示します。W3C標準のアルファベット順のリストと比較してください。これには、一般的な同義語であるアクア（HTML4/CSS 1.0標準名）とシアン（一般的なsRGB名）、フクシア（HTML4/CSS 1.0標準名）とマゼンタ（一般的なsRGB名）、グレー（HTML4/CSS 1.0標準名）とグレーが含まれています。[11] [12]

HTML名RGB
16進数10進数
ピンク色
ミディアムバイオレットレッド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
ライトゴールデンロッドイエローFAFAD2250、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
16進数10進数
紫、バイオレット、マゼンタの色
インディゴ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
ペールターコイズAFEEEE175, 238, 238
ライトシアンE0FFFF224, 255, 255
HTML名RGB
16進数10進数
緑色
ダークグリーン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
シルバーC0C0C0192, 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% */                        /* CSS3に追加されたアルファチャンネル付きRGB */ 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 Color 4では、デバイスに依存しないカラーのいくつかの異なるフォーマットが導入されており、（対応画面で）可視色のすべてを表示できます。これには以下が含まれます。[25]

定義済みカラースペース

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

sRGBの線形化されたバリアントも、色の混合用に定義されています。[24]

その他の形式

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

Webセーフカラー

Color depth
Related

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

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

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

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

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

「ウェブセーフ」カラーには標準的な名前がすべてあるわけではありませんが、それぞれRGBトリプレットで指定できます。各成分（赤、緑、青）は、次の表の6つの値のいずれかになります（フル24ビットカラーでは、各成分に使用可能な256の値のうち）。

各色の6つの色合い
キー16進数10進数分数
00000
333510.2
6661020.4
9991530.6
C (12)CC2040.8
F (15)FF2551

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

カラーテーブル

216色の「ウェブセーフ」カラー
*000*300600900C00*F00*
*003*303603903C03*F03*
006306606906C06F06
009309609909C09F09
00℃30℃60℃90℃C0CF0C
*00F*30F60F90FC0F*F0F*
030330630930C30F30
033333633933C33F33
036336636936C36F36
039339639939C39F39
03C33C63C93CC3CF3C
03F33F63F93FC3FF3F
060360660<e​​xtra_id_1> 960C60F60063
363663963C63F63066
366666966C66F66069
369669969C69F6906C
36C66C96CC6CF6C06F
36F66F96FC6FF6F090
390690990C90F90093
393693993C93F93096
396696996C96F96099
399699999C99F9909C
39C69C99CC9CF9C09F
39F69F99FC9FF9F0C0
3C06C09C0CC0FC00C3
3C36C39C3CC3FC30C6
3C66C69C6CC6FC60C9
3C96C99C9CC9FC90CC
3CC6CC9CCCCCFCC0CF
3CF6CF9CFCCFFCF*0F0*
3F0*6F0**6F0*9F0CF0*FF0*
0F3*3F3**6F3*9F3CF3*FF3*
*0F6**3F6*6F69F6*CF6**FF6*
0F93F96F99F9CF9FF9
*0FC**3FC*6FC9FCCFCFFC
*0FF**3FF**6FF*9FFCFF*FFF*

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

最も安全なウェブカラー

最も安全なウェブカラー

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

アクセシビリティ

色の選択

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

色のコントラスト

色のコントラスト

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

しかし、アクセシビリティの問題に対処するには、単にコントラスト比を上げるだけでは不十分です。ウェブアクセシビリティ・イニシアチブへの報告書が示すように、[34] ディスレクシアの読者は、最大値を下回るコントラスト比の方が読みやすいです。そこで言及されているオフホワイト（#FFFFE5）の上にオフブラック（#0A0A0A）とクリーム色（#FAFAC8）の上に黒（#000000）の推奨事項は、それぞれ11.7:1と20.3:1です他の色のペアの中で、濃い緑（#A0A000）と茶色（#282800）のコントラスト比は3.24:1で、WCAGの推奨事項を下回っています。薄い緑（#B9B900）と濃い茶色（#1E1E00）のコントラスト比は4.54:1、黄色（#FFFF00）と青（#00007D）のコントラスト比は11.4:1です。レポートで指定された色は、同じ名前のウェブカラーとは異なる色の値を使用しています。

参照

参考文献

  1. ^ Niederst Robbins, Jennifer (2006年2月). 「付録D：色の指定」. Web Design in a Nutshell . O'Reilly. 830ページ. ISBN 978-0-596-00987-8。
  2. ^ York, Richard. Beginning CSS , 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日). Digital Color Imaging Handbook. CRC Press. ISBN 978-1-4200-4148-4。
  5. ^ ペンバートン、スティーブン、ペティット、ブラッド（2011年6月7日）。チェリク、タンテック、リリー、クリス、バロン、L・デイビッド（編）「4.2.1. RGBカラー値」。CSSカラーモジュールレベル3。W3C。2013年3月19日閲覧。
  6. ^ ab 「CSSカラーモジュールレベル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. ^ 「スケーラブル・ベクター・グラフィックス（SVG）1.1（第2版）｜基本データ型とインターフェース｜認識されるカラーキーワード名」W3C。2011年8月16日。 2019年2月1日閲覧。
  13. ^ 「X11カラーセット」HSEASにおけるコンピューティングとネットワーキング。2014年7月14日時点のオリジナルからのアーカイブ。2014年7月6日閲覧。
  14. ^ ブライアン・ウィルソン。「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. ^ 「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 カラーモジュール レベル 4」. W3C . 2022年3月14日閲覧.
  25. ^ ab 「CSS カラーモジュール レベル 4：概要」. W3C . 2022年1月11日閲覧.
  26. ^ Glazman, Daniel (2014年6月21日). 「Re: [CfC] CSS カラーレベル 4 への 'rebeccapurple' の追加」. www-style メーリングリストへの投稿. W3C . 2014年6月24日閲覧
  27. ^ ab CSS カラーモジュール レベル5
  28. ^ Jenkins, Sue (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=1323008595"