ウェブカラー

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

sRGB 色域外の色は、カスケーディング スタイル シートで赤、緑、青のコンポーネントの 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 進トリプレットは、16進数表記の 3 つのバイトを次の順序で 連結して形成されます。

• バイト 1: 赤の値 (色の種類は赤)
• バイト2: 緑の値（色の種類は緑）
• バイト3: 青の値（色の種類は青）
• バイト4（オプション）: アルファ値

たとえば、赤/緑/青の値が 10 進数である色を考えてみましょう。赤 = 123、緑 = 58、青 = 30 (堅木のような茶色)。10 進数の 123、58、30 は、それぞれ 16 進数の 7B、3A、1E に相当します。16 進数の 6 つの数字を連結すると、16 進数の 3 つ組が得られます。この例では、7B3A1E です。

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

このシステムで表現できる色の数は、256 ³、16 ⁶、または 2 ²⁴ = 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 値は通常 0～255 の範囲で与えられます。0～1 の範囲にある場合は、変換前に値が 255 倍されます。この数値を 16 で割ると (整数除算、余りは無視)、16 進数の最初の桁 (0 から F まで、文字 A から F は 10 から 15 の数字を表します。詳細については、16 進数を参照してください) が得られます。余りによって 16 進数の 2 番目の桁が得られます。たとえば、RGB 値 58 (前の 16 進数トリプレットの例で示したように) は 16 の 3 つのグループに分かれるため、最初の桁は 3 になります。余りが 10 の場合、16 進数は 3A になります。同様に、RGB 値 201 は 16 の 12 グループに分かれるため、最初の桁は C になります。余りが 9 の場合、16 進数は C9 になります。このプロセスは、3 つのカラー値ごとに繰り返されます。

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

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

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

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

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

いくつかの色はWeb ブラウザーによって定義されています。特定のブラウザーではこれらの色がすべて認識されない場合がありますが、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 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つである「オレンジ」が、16のHTML4色のセクションに17番目の色として追加されました。^{[15] CSS3.0仕様では、オレンジ}は「HTML4色キーワード」セクションに含まれておらず、「基本色キーワード」に名前が変更されました。 ^[16]同じリファレンスで、「SVG色キーワード」セクションは、以前のワーキングドラフトで「X11色キーワード」として始まった後、「拡張色キーワード」に名前が変更されました。^[17]レベル4色モジュールのワーキングドラフトでは、基本セクションと拡張セクションが単純な「名前付き色」セクションに統合されています。^[18]

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 ) } /* 不透明度 0.5、半透明 */        

/* 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カラーフォーマットが導入されました。^[24]

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

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

• ラボとLCH
• OKLabとOKLCH（Lab/LCHよりも優先）^{[24] ：§§9.2–3}
• XYZ (D50 または D65 [デフォルト])

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

• ディスプレイP3
• プロフォト
• 2020年
• Adobe 1998 RGB

sRGBの線形化された変種も色の混合のために定義されています。^[24]

2014年6月21日、CSS WGは、2014年6月7日の6歳の誕生日に亡くなったエリック・マイヤーの娘レベッカを記念して、カラーモジュールレベル4の編集者草案にレベッカパープルという色を追加しました。^[26]

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

CSS Color 5 ^[27]仕様草案では、既存の色を混合および操作するための構文が導入されています。

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

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

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

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

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

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

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

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

次の表は、すべての「Web セーフ」カラーを示しています。Web セーフ パレットの欠点の 1 つは、Web ページの背景の明るい色の範囲が狭いことです。一方、範囲の低い方の色の強度 (最も暗い 2 色など) は互いに似通っているため、区別が困難です。「*」(アスタリスク) で囲まれた値は、「本当に安全なパレット」の一部です。以下の「最も安全な Web カラー」を参照してください。

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

216 色パレットが開発された当時は 8 ビット カラー ディスプレイが多かったため、デザイナーは Web サイトでこの 216 色の​​「Web セーフ」カラーを使用するよう推奨されました^{(誰によって? ) 。David Lehn と Hadley Stern は、Web セーフ パレットの 216 色の​​うち、} 16 ビット コンピュータ ディスプレイで一貫性のない再マッピングなしで確実に表示されるのは 22 色だけであることを発見しました。彼らはこの 22 色を「本当に安全なパレット」と呼びました。このパレットは主に緑、黄、シアンの色合いで構成されています。^{[30] [31]}

一部のブラウザやデバイスは色をサポートしていません。これらのディスプレイや視覚障碍者、色覚障碍者にとって、色に依存する 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 です。レポートで指定された色は、同じ名前の Web 色とは異なる色の値を使用します。

• MDN Web Docsの CSS カラー値
• CSS2.1 カラー仕様