ウェブカラー

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

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進トリプレットUTC（更新）
ベース6011:10:21
16進数

77_2C_5F

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）未満の場合、先頭にゼロを付けて表す必要があります。これにより、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番号（名前）; 別名
白#FFFFFF 100% 100% 100% 0 ° 0% 100% 0% 100%15（白）
銀#C0C0C0 75% 75% 75% 0 ° 0% 75% 0% 75%07（ライトグレー）
グレー＃808080 50% 50% 50% 0 ° 0% 50% 0% 50%08（ダークグレー）
黒#000000 0% 0% 0% 0 ° 0% 0% 0% 0%00（ブラック）
赤#FF0000 100% 0% 0% 0 ° 100% 50% 100% 100%12（ハイレッド）
マルーン800000番 50% 0% 0% 0 ° 100% 25% 100% 50%04（ローレッド）
黄色#FFFF00 100% 100% 0% 60 ° 100% 50% 100% 100%14（黄色）
オリーブ＃808000 50% 50% 0% 60 ° 100% 25% 100% 50%06（ブラウン）
ライム#00FF00 0% 100% 0% 120 ° 100% 50% 100% 100%10（ハイグリーン）; 緑
緑#008000 0% 50% 0% 120 ° 100% 25% 100% 50%02（ローグリーン）
アクア#00FFFF 0% 100% 100% 180 ° 100% 50% 100% 100%11（高シアン）; シアン
ティール#008080 0% 50% 50% 180 ° 100% 25% 100% 50%03（低シアン）
青#0000FF 0% 0% 100% 240 ° 100% 50% 100% 100%09（ハイブルー）
海軍#000080 0% 0% 50% 240 ° 100% 25% 100% 50%01（ローブルー）
フクシア#FF00FF 100% 0% 100% 300 ° 100% 50% 100% 100%13（高マゼンタ）; マゼンタ
紫＃800080 50% 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）
オレンジ#FFA500 100% 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）
レベッカパープル ＃663399 40% 20% 60% 270 ° 50% 40% 67% 60%

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

CSSカラー5

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

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

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

ウェブセーフカラー

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色
鍵 ヘックス 小数点 分数
0 00 0 0
3 33 51 0.2
6 66 102 0.4
9 99 153 0.6
C (12) CC 204 0.8
女性（15） FF 255 1

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

カラーテーブル

216色の「ウェブセーフ」カラー
*000* 300 600 900 C00 *F00*
*003* 303 603 903 C03 *F03*
006 306 606 906 C06 F06
009 309 609 909 C09 F09
00C 30℃ 60℃ 90℃ C0C F0C
*00F* 30階 60F 90F C0F *F0F*
030 330 630 930 C30 F30
033 333 633 933 C33 F33
036 336 636 936 C36 F36
039 339 639 939 C39 F39
03C 33C 63C 93℃ C3C F3C
03階 33階 63階 93階 C3F F3F
060 360 660 960 C60 F60
063 363 663 963 C63 F63
066 366 666 966 C66 F66
069 369 669 969 C69 F69
06C 36℃ 66C 96C C6C F6C
06階 36階 66階 96F C6F F6F
090 390 690 990 C90 F90
093 393 693 993 C93 F93
096 396 696 996 C96 F96
099 399 699 999 C99 F99
09C 39℃ 69C 99℃ C9C F9C
09階 39階 69階 99F C9F F9F
0C0 3C0 6C0 9C0 CC0 FC0
0C3 3C3 6C3 9C3 CC3 FC3
0C6 3C6 6C6 9C6 CC6 FC6
0C9 3C9 6C9 9C9 CC9 FC9
0CC 3CC 6CC 9CC CCC FCC
0CF 3CF 6CF 9CF CCF FCFC
*0F0* 3F0 *6F0* 9F0 CF0 *FF0*
0F3 *3F3* *6F3* 9F3 CF3 *FF3*
*0F6* *3F6* 6F6 9F6 *CF6* *FF6*
0F9 3F9 6F9 9F9 CF9 FF9
*0FC* *3FC* 6FC 9FC CFC FFC
*0FF* *3FF* *6FF* 9FF CFF *ふぅ*

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

最も安全なウェブカラー

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

最も安全なウェブカラー
R--
-GB
0 3 6 9 C F
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のコントラスト比となっています。その他の色の組み合わせでは、ダークグリーン (#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. ^ヨーク、リチャード. 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. ^ a b「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. ^ 「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. ^ a b「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. ^ a b 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. ^ a b c d「CSS カラーモジュールレベル 4」。W3C 。 2022年3月14日閲覧。
  25. ^ a b「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. ^ a b CSS カラーモジュール レベル 5
  28. ^ジェンキンス、スー（2012年12月27日）『Webデザイン オールインワン フォー ダミーズ』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. ^失読症の人の読みやすさを向上させる最適な色
「 https://en.wikipedia.org/w/index.php?title=Web_colors&oldid=1335630455#Hex_triplet」から取得