ホームページ > 記事 > ウェブフロントエンド > CSSで色を表現するにはいくつかの方法があります
CSS で色を表現するには、次の 6 つの方法があります: 1. 赤、青などの英単語、2. 「#FF0000」などの 16 進数値、3. 「RGB」などの RGB ( 255,0,0)"; 4. RGBA、たとえば "RGB(255,0,0,0.5)"; 5. HSL; 6. HSLA。
#このチュートリアルの動作環境: Windows 7 システム、css3 バージョン、Dell G3 コンピューター。
チュートリアルの推奨事項: css ビデオ チュートリアル
css での色のいくつかの表現
1. 色の定義、英語の単語の使用赤、青などの色を表す
2、16 進値
3 桁の 16 進数、#F00 など (各色は 1 つの 16 進数で表されます)
6 桁の 16 進数、例: #FF0000 (各色を 2 つの 16 進数で表します)
3. RGB 表現方法
RGB 三原色: RGB(255,0, 0) 指定された 3 つのパラメーターは、赤、緑、青の色の値を表し、0 ~ 225
RGB、RGB (100%、0%、0%) の 10 進数で表現されます。表現するパーセント記号
注: 上記の式はすべて RGB カラー システム (赤、緑、青)
4 に属します。RGBA: RGB と同じですが、透明度が追加されています。 RGB(255,0,0,0.5) など。 4 番目の値の範囲は 0 ~ 1 で、0 は完全に透明、1 は完全に不透明です。
5、HSL (後の色調整の学習によく使用されます): 色相、彩度、明るさ。たとえば、HSL(360,100%,50%)。
色相: 色の基本的な属性であり、赤などの一般的に呼ばれる色の名前です。
彩度: 色の純度を指します。色が高いほど純粋な色になり、徐々に低くなります。グレー、0 ~ 100% の値を取ります。
明るさ: 色の明るさです。色の明るさが高いほど、色が明るくなるほど、色の明るさが暗くなるほど、色が暗くなります。0 ~ 100% を取ります。
(ページでカラー システムを使用したい場合は、HSL を使用できます)
6. HSLA: HSL よりも透明度が高くなります。
使用法:
①color:blue;
最初の方法は、color 属性を呼び出し、コロンの後に色の英単語を入力することです。区切る 番号が終了します。
この方法は簡単ですが、表現できる色の種類は非常に限られています。
②color:#000000;
2 番目のタイプは「#」で始まり、各桁は 0、1、2、3、4、5、6、7、8 です。
9、a、b、c、d、e、f。最初の 1 と 2 桁は赤を表し、3 と 4 桁は緑を表し、5 と 6
は青を表します。 RGBの色表現の考え方と同様に、赤、緑、青の三原色を組み合わせてさまざまな色が生まれ、その種類は数多くあります。
③color:rgb(0,0,0);
3 番目の方法は RGB 表現です。値には 2 種類があります: 数値、すべての値は 0 ~ 255、パーセント値
、すべての値は 0% ~ 100% です。これらの共通の特徴は、最初の値が赤を表し、2 番目の
値が緑を表し、3 番目の値が青を表すことです。組み合わせにより様々な色を表現できます。
④color:rgba(0,0,0,0.5);
4 番目の方法は RGBA 表現です。 RGB 表現のアップグレード版であり、新しい透明属性が追加されています。
最初の 3 つの属性値は RGB 表記と同じです。4 番目の属性値の値の範囲は 0 ~ 1 で、
小数点以下 2 桁まで正確です。
⑤color:hsl (0, 100%, 100%);
5 番目の方法、HSL 表現。その意味: H は色相を表し、値の範囲は 0 ~
360 です。0 と 360 は赤を表し、120 は緑を表し、240 は青を表します。 S は彩度
を表し、値の範囲は 0% ~ 100% です。 L は明るさを表し、値の範囲は 0% ~ 100% です。
⑥color:hsla(0,100%,100%,0.5);
6 番目、HSLA 表現。これは HSL 表記の拡張バージョンで、値の範囲が 0 ~ 1 の透明度の属性
値が追加されています。
プログラミング関連の知識について詳しくは、
プログラミング教育以上がCSSで色を表現するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。