CSSにおける色の4つの表現方法を図解で詳しく解説

ページ レイアウトには必然的に色が使用されます。見栄えの良いカラー マッチングにより、ページに多くの色が追加されます。ページに色を設定する方法をご存知ですか?この記事では、 色を表現するさまざまな方法について説明します。色の値を表現する方法がわからない人は、ぜひ参考にしてください。

1. 色を表す英語の単語

最も直接的で簡単な方法は、英語の単語を使って色を表すことです。たとえば、「color: red」と書きます。 。

欠点: 色は何千もあり、すべての色に対応する英単語があるわけではなく、使用には制限があります。

2. 色の 16 進数表現

16 進数の色の構成要素は次のとおりです: #RRGGBB、RR (赤)、GG (緑)、BB (青)すべての値は 0 から FF の間である必要があります。平たく言えば、16 進数の本質は rgb であり、2 桁ごとに色を表します。各2桁の値が同じ場合、例えばcolor:#ffcc00をcolor:#fc0と省略することができます。

すべての主要なブラウザは 16 進カラー値をサポートしており、推奨されます。

3. RGB は色を表します

RGB では、R は赤、G は緑、B は青を表します。

RGB 書き込み方式: rgb (0,0,0)。値の範囲は 0 ～ 255 で、値が大きいほど色が暗くなります。 RGB では、数値を使用するだけでなく、0% から 100% までの値のパーセンテージを使用することもできます。例: RGB (0,0,255) と RGB (0%, 0%, 100%) は同じ色を表します。

一般的な色の RGB 表現。赤: rgb(255,0,0); 白: rgb(255,255,255); 黒: rgb(0,0,0)

すべての主要なブラウザは RGB カラー値をサポートしています。

4. HSL は色を表します

HSL の色の値は色相、彩度、明度を表します。

色相は、カラー ホイール (0 ～ 360) の度数です。0 (または 360) は赤、120 は緑、240 は青です。彩度はパーセント値であり、0% はグレーの色合いを意味し、100% はフルカラーを意味します。明るさもパーセンテージで表され、0% は黒、100% は白です。

注: IE9、Firefox、Chrome、Safari、および Opera 10 は、HSL カラー値をサポートします。

例: 上記の 4 つのメソッドを使用して異なる色を表現するコードは次のとおりです:

HTML 部分:

<div class="color1">床前明月光</div>
<div class="color2">疑是地上霜</div>
<div class="color3">举头望明月</div>
<div class="color4">低头思故乡</div>

CSS 部分:

<style type="text/css">
	.color1{background-color:orange;}
	.color2{background-color:#FFFF00;}
	.color3{background:rgb(0,255,0);}
	.color4{background-color:hsl(360,50%,50%);}
</style>

レンダリング:

クラス名 color1 の div の背景色はオレンジで、英語で直接表現されます。 color2 の div の背景色は黄色です。 16 進数で表される #FFFF00 は、クラス名 color3 の div の背景色が緑色であり、rgb(0,255,0) で表され、クラス名 color4 の div の背景色が濃い赤であることを意味します。明るさは両方とも 50% に設定されており、hsl(360,50 %,50%) の平均値で表されます。

要約: 上記では色を表現する 4 つの方法を紹介しましたが、どれを選択するかは個人の習慣や仕事のニーズによって異なります。初心者は自分で試して、色と組み合わせることができます。百科事典。さまざまな色を試してみてください。

以上がCSSにおける色の4つの表現方法を図解で詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。