Color ng CSS

CSS na sumusuporta Higit sa 140 na pangalawang pangalan ng kulay, at pangalawang kulay na halaga, RGB halaga, RGBA halaga, HSL halaga, HSLA halaga at kapalit.

RGBA kulay

RGBA kulay na halaga ay isang pagpapalawak ng RGB kulay na may alpha channel - ang channel na ito ay nagtutukoy ng kanyang kapalit.

RGBA kulay na halaga ay itinuturing na: rgba(pulang lupa, berde, asul, alpha)。 alpha Ang mga parameter ay bilang na nasa pagitan ng 0.0 ( ganap na mapagkalat) at 1.0 ( ganap na hindi mapagkalat).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Ang halimbawa sa ibaba ay nagtutukoy ng iba't-ibang RGBA kulay:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Kulay pulang lupa na may hindi ganap na kapalit */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Kulay berde na may hindi ganap na kapalit */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Kulay asul na may hindi ganap na kapalit */

Try It Yourself

HSL kulay

HSL ay tumutukoy sa sikat ng kulay, saturasyon at lumineszensya (Hue, Saturation at Lightness).

HSL kulay na halaga ay itinuturing na: hsl(hue, saturation, lightness).

Sikat ng kulay ay degrado sa gulong ng kulay (mula 0 hanggang 360):

  • 0 (o 360) ay kulay pulang lupa.
  • 120 ay kulay berde.
  • 240 ay kulay asul.

Saturasyon ay isang porsyento halaga: 100% ay buong kulay.

Lumineszensya ay isang porsyento halaga: 0% ay malamig na kulay (kulay itim), at 100% ay puti.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Ang mga halimbawa sa ibaba ay nagtatakda ng iba't ibang HSL kulay:

Example

#p1 {background-color: hsl(120, 100%, 50%);}  /* Mapula */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Mapula */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Mapula */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Mapula */

Try It Yourself

HSLA kulay

Ang HSLA kulay ay isang pagpapalawak ng HSL kulay na may Alpha channel - ito ay nagtatakda ng opakidad ng kulay.

Ang halaga ng HSLA kulay ay tinutukoy ng mga sumusunod na parametro: hsla(hue, saturation, lightness, alpha), kung saan ang alpha ay nagtatakda ng opakidad. Ang alpha ay isang numero na nasa pagitan ng 0.0 (wala ng opakidad) at 1.0 (kompletong walang opakidad).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Ang mga halimbawa sa ibaba ay nagtatakda ng iba't ibang HSLA kulay:

Example

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Mapula na may opakidad */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Mapula na may opakidad */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Mapula na may opakidad */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Mapula na may opakidad */

Try It Yourself

opakidad

CSS opakidad Ang setting ng attribute ay nagtatakda ng opakidad ng buong elemento (ang kulay ng labas at ang teksto ay magiging opak o maluwat).

opakidad Ang halaga ng attribute ay dapat na isang numero na nasa pagitan ng 0.0 (wala ng opakidad) at 1.0 (kompletong walang opakidad).

rgb(255, 0, 0); opakidad:0.2;
rgb(255, 0, 0); opakidad:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Note that the text above will also be transparent/opaque!

The following example shows different elements with opacity:

Example

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Semi-transparent red */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Semi-transparent green */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Semi-transparent blue */

Try It Yourself