CSS3 の色の特性 review_html/css_WEB-ITnose

Web ページは色表現の原理に基づいています。ディスプレイはピクセルで構成され、電子ビームを使用して色を表現します。光の三原色である赤（R）、緑（G）、青（B）を画素で組み合わせ、科学原理に基づいて色を表現します。 1 つのピクセルには 8 ビットの色情報が含まれており、0 から 255 までの 256 単位があります。0 は完全に暗い状態、255 は最も明るい状態です

Web ページの安全な色
さまざまなプラットフォーム (Mac、PC など)さまざまなカラー パレットがあり、ブラウザごとに独自のカラー パレットがあります。特定の色を選択すると、ブラウザーは使用しているパレットで最も近い色を使用しようとします。選択した色がブラウザーで利用できない場合は、独自の色をディザリングまたは混合することによって色を再生成しようとします
Web ページ。セーフカラーとは、赤(R)、緑(G)、青(B)の色のデジタル信号値が0、51、102、153、204、255のときの色の組み合わせです。合計6×6×6=216になります。色（うち色は210種類、無彩色は6種類あります）。 216 色の​​特定の色は、異なるハードウェア環境、オペレーティング システム、ブラウザー間の色の変化を心配することなく、すべての Web で安全に使用できます

Web ページの 216 色の​​安全な色は、高精度を達成する必要がありますが、それが来ると少し不足しますグラデーション効果やトゥルーカラーの画像や写真を表示する場合には適していますが、ロゴや 2 次元のフラット レンダリングを表示する場合には十分以上です。ただし、安全な色を使用する必要はありませんが、色かぶりが発生しないように、安全な色と安全でない色が適切にマッチングされます

カラーモードの説明:
(1) RGB カラーモード: 生成されます。光の三原色、赤、緑、青を混ぜることで。 Web ページで使用される画像のほとんどは RGB カラー モードであり、RGB 色は色の加法混合によって生成されます。補色とは、加法混色において、関連する 2 つの色が混合されると白になる状態を指します。 (2) CMYK カラーモード: 顔料の 3 原色、シアン、マゼンタ、イエロー、ブラックを生成するために主に使用されます。減法混色モードとは、混色後の色が元の色よりも暗くなり、補色関係にある2色の混合がカラフルに見えるモードです
​​ (3) インデックスカラーモード: 256に制限されています。カラー モード。主に Web ページのセキュリティ カラーと透明な GIF 画像の作成に使用されます。
(4) グレースケール モード: 白黒写真を作成するときに使用される無色のモードで、主に白黒、グレーの写真を処理するために使用されます
(5) デュオトーン モード: 白黒写真に色を追加して、白黒写真を作成します。トーンリッチモード。 RGB や CMYK などのカラー モードをダブルトーン モードに直接変換することはできません。カラー モードをダブルトーン モードに変換する前に、グレースケール モードに変換する必要があります。狭いスペースでも美しい写真を作成するには、デュオトーンモードを使用してください
(6) ビットマップモード: 白と黒を使用して画像を一緒に処理するモードです。デュオトーンと同様、デュオトーン モードとグレースケール モードを除き、他のカラー モードはグレースケール モードに変換してからビットマップ モードに変換する必要があります

CSS 透明度属性: 不透明度、要素の透明度を設定するために使用されます

構文とパラメータ: opacity:alphavalue || 継承
alphavalue: デフォルト値は 1 で、0 から 1 までの任意の浮動小数点数を指定できます。値が 1 の場合、要素は完全に不透明であり、逆に、値が 0 の場合、要素は完全に透明で非表示になります。その値は負にすることはできません
inhert: 親要素の不透明度設定を継承する、つまり親要素の不透明度を継承する値を示します
アルファチャンネルと不透明度属性の違い: アルファは個別に透明度を設定できますが、不透明度は全体にのみ設定でき、子孫要素に直接継承できます。また、不透明度を透明に設定することもできます。これは、アルファ チャネル値が 0 に設定されるのと同じです。CSS3 では、透明は任意のカラー属性で使用できます。

注: IE8 以下は不透明度透明属性をサポートしていませんが、独自のフィルターを使用して透明効果を実現できます

/*IE5 - 7*/
filter:alpha(opacity=transparent value);
/* IE8* /
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=transparent value)";
ここでの透明度の値は 0 から 1 までの浮動小数点数ではなく、0 から 100 までの任意の整数です

IE8 より前のブラウザと互換性を持たせるために、実際には不透明度透明属性が次のように使用されることがよくあります

/*IE5-7*/
filter:alpha(opacity=80);
/*IE8*/
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
不透明度:0.8;

CSS3 カラーモード: RGBA、HSL、HSLA

RGBA 構文とパラメーター: rgba(r,g,b,a)
R : 赤色の値、その値は正の整数またはパーセントであり、その値の範囲は 0 ～ 255 または 0 ～ 100% です。
G: 緑色の値、その値は正の整数またはパーセントであり、その値の範囲は 0 ～ です。 255 または 0 ～ 100%;
B: 青の値、値は正の整数またはパーセント、値の範囲は 0 ～ 255 または 0 ～ 100%;
A: アルファ透明度の値、値は 0 ～ 1 の範囲です。 、値の範囲は 0~1 です。
範囲外の値は最も近い値の制限に切り捨てられ、負の値は削除できません
ブラウザの互換性

HSL カラー モード
HSL は、RGB と同様に、色相 (H)、彩度 (S)、明度 (L) の 3 つのカラー チャネルの変化とそれらの重ね合わせを使用します。豊富な色。 HSL 標準は人間の視覚で認識できるほぼすべての色をカバーしており、現在最も広く使用されているカラー システムの 1 つです。
画面上に 16777216 色を表示するには、3 つのチャンネルのみが異なる比率で混合されます
構文とパラメーター: 値はカンマで区切られます
hsl(h,s,l)
3 つの属性値、つまり h()値、s() 値​​および l() 値​​、説明:
H: 色相 (色相)。整数値 () を取得します。これは任意の整数で、0 (または 360 または -360) は赤を表し、60 は黄色を表し、120 は緑を表し、180 はシアンを表し、240 は青を表し、300 はマゼンタを表します。値が 360 より大きい場合、実際の値は値を 360 で割った余りと等しくなります。たとえば、色相の値が 480 の場合、実際の色の値は 480 を 360 で割った余り 120 になります。 S: 彩度。これは色の深さと明るさのプログラムであり、0 から 100% までの任意の値を取ることができるパーセンテージ () を表します。0 はグレースケール (色なし) を意味し、100% は最高の彩度を意味します。最も鮮やかな色)
L: 明るさ。値は彩度 (S) と同じで、0 ～ 100% の任意の値を指定できます。0 が最も暗く (黒)、100% が最も明るい (白) です。 IE8 以下のブラウザに加えて、他の主流ブラウザも HSL カラー モードのサポートに対応しています。互換性を実現するためにブラウザのプライベート プレフィックスを使用する必要はありません

HSLA カラー モード

は、基本的に、HSL の拡張モードです。不透明度パラメータを設定します

構文とパラメータ: hsla(,,,)

opacity、値の範囲は 0~1 倍で、値が大きくなるほど、透明度を下げる

ブラウザ互換性

RGBAとHSLAカラーモードの選択
RGB/RGBAカラー値を使用すると、表現された色を一目で識別するのが難しく、赤と緑を区別するのが困難です 彩度を識別すると青、青の3つの値からこの色の明るさを求めます。 RGB/RGBA カラー モードのもう 1 つの問題は、色を調整するには各パラメータを変更する必要があることです。HSL/HSLA カラー モードを使用して色を取得する場合、カラーを同時に調整する必要はありません。 RGB/RGBA カラー モード。色相値を特定の値に設定するだけです。カラーホイールに従って色の特定の情報を知ることができ、明るさの値 (L) を直接変更するだけで、RGB/RGBA の色は同じになります。代替案
最初の RGBA/HSLA IE 互換ソリューションは通常、非透明色 (RGB/HSL) を先頭に設定し、サポートされていない場合は RGBA/HSLA が続きます。が直接表示され、サポートされている場合は前の色が直接表示されます
2 つ目は、PNG 透過画像を使用することです。これは HTTP リクエストを増加させるため、使用はお勧めしません。 3 番目の方法は、グラデーション フィルターを使用して半透明の色を指定することです。グラデーションを避けるために、開始色と終了色を同じ色に設定します

グラデーション フィルターは次のとおりです: -ms-filter:filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99A6DADC',endColorstr=' #99A6DADC');