CSS_html/css_WEB-ITnose の 6 つのカラー モードについての深い理解

目次 [1] キーワード [2] 16 進数 [3] RGB モード [4] RGBA モード [5] HSL モード [6] HSLA モード

前の単語

心地よい色の組み合わせは、人々を快適に感じさせる、機能要素の色を変更すると、人々がそれに集まります。ただし、不適切な色の計画は Web サイト ユーザーを混乱させます。カラーは から現在まで発展しており、多くのコンテンツを保持し、新しいコンテンツを追加しています。 この記事では、カラー モード

についてのコンテンツを紹介します。主に 16 色が使用されました。 カラーを設定するには、システムと RGB の 3 つの方法があります。 CSS3の登場後、RGBA、HSL、HSLAの3つのモードが追加され、CSSの色の設定方法が大幅に充実しました

【1】キーワード

直接使用される名前の色の値を名前付きカラーと呼びます

CSS は 17 の法的に指定された色 (標準色) をサポートします:

aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

[注意] ブラウザは 140 色をサポートします

【2】16 進数

色の値を設定する一般的な方法は 16 進数です。 X進数00-FF の 3 つのグループの 16 進数がペアになっている場合、3 桁と省略できます

　　#abcdef　　#aabbcc <=> #abc

ウェブセーフカラーとは、常にディザリングを回避できる色のことを指します。 256 色のコンピュータ システム。RGB 値 20% と 51 (対応する 16 進値は 33) の倍数として表されます。したがって、16 進数を使用する場合、00336699ccff は Web セーフ カラーとみなされ、合計 6*6*6=216

[3] RGB モード

異なる赤、緑、青のコンポーネントを組み合わせて作成されます。 color は RGB モードのカラーになります。ディスプレイは個々のピクセルで構成され、電子ビームを使用して色を表現します。ピクセルは光の 3 原色、赤 (R)、緑 (G)、青 (B) を組み合わせたものです。各ピクセルには 8 ビットの色情報が含まれており、0 から 255 までの 256 単位があり、0 は完全に暗い状態、255 は最も明るい状態です

　　rgb(x%,y%,z%)　　rgb(a,b,c)

【注意】値が最小値より小さい場合0、デフォルトは 0 に調整され、最大値が 255 の場合、デフォルトは 255 に調整されます

[4] RGBA モード (IE8 ブラウザはサポートしていません)

rgba モードは、 RGB ベースで使用します。色の透明度を設定するには、このチャンネル値の範囲は 0 ～ 1 です。0 は完全に透明を表し、1 は完全に不透明を表します

【5】HSL モード (IE8 ブラウザー)は対応していません)

HSLモードは、色相(H)、彩度(S)、明度(L)の3つのカラーチャンネルを変更して重ね合わせることで、さまざまな色を取得します。 HSL 標準には、人間の視覚で認識できるほぼすべての色を含めることができます

    rgba(r,g,b,a)

h: 色相は任意の整数です。 0 (または 360 または -360) は赤を表し、60 は黄を表し、120 は緑を表し、180 はシアンを表し、240 は青を表し、300 はマゼンタを表します (h 値が 360 より大きい場合、実際の値はモジュロ値に等しくなります) 360 )

s: 彩度とは、色の深さと鮮やかさを指します。 0 ～ 100% の範囲の値を取り、0 はグレースケール (色なし) を表し、100% は最高の彩度 (最も鮮やかな色) を表します

l: 明るさ (明るさ)、0 の範囲の値を取ります-100%、0 は最も暗い (黒)、100% は最も明るい (白) を意味します

【6】HSLA モード (IE8 ブラウザはサポートしていません)

HSLA モードは HSL の拡張モードです、HSL に基づいて透明度を設定するために透明度チャンネル アルファを追加します