Kolory CSS

Obsługa CSS Ponad 140 nazw koloróworaz wartością szesnastkową, wartością RGB, wartością RGBA, wartością HSL, wartością HSLA i przezroczystością.

Kolor RGBA

Wartość koloru RGBA jest rozszerzeniem wartości koloru RGB, z kanałem alpha - który określa przezroczystość koloru.

Wartość koloru RGBA jest określona w następujący sposób: rgba(czerwony, zielony, niebieski, alpha)。 alpha Parametr to liczba między 0.0 (zupełnie przezroczysty) a 1.0 (zupełnie nieprzejrzysty).

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

Poniższe przykłady definiują różne kolory RGBA:

Przykład

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Nieprzejrzysty czerwony */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Nieprzejrzysty zielony */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Nieprzejrzysty niebieski */

Spróbuj sam

Kolor HSL

HSL oznacza tonalność, nasycenie i jasność (Hue, Saturation oraz Lightness).

Wartość koloru HSL jest określona w następujący sposób: hsl(hue, saturation, lightness).

Tonalność to stopień na kole kolorów (od 0 do 360):

  • 0 (lub 360) to czerwony
  • 120 to zielony
  • 240 to niebieski

Nasycenie jest wartością procentową: 100% to pełna barwa.

Jasność jest wartością procentową: 0% to ciemny kolor (czarny), a 100% to biały.

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

Poniższe przykłady definiują różne kolory HSL:

Przykład

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

Spróbuj sam

Kolory HSLA

Wartości kolorów HSLA są rozszerzeniem kolorów HSL z kanałem Alpha - określają one przezroczystość koloru.

Wartości kolorów HSLA określone są przez następujące parametry: hsla(hue, saturation, lightness, alpha), gdzie parametr alpha określa przezroczystość. Parametr alpha jest liczbą znajdującą się między 0.0 (zupełnie przezroczysty) a 1.0 (zupełnie nieprzejrzysty).

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

Poniższe przykłady definiują różne kolory HSLA:

Przykład

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Zielony z przezroczystością */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Średniozielony z przezroczystością */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Ciemnozielony z przezroczystością */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Jasnozielony z przezroczystością */

Spróbuj sam

Przezroczystość

CSS opacity Ustawienie atrybutu określa przezroczystość całego elementu (kolor tła i tekst będą przezroczyste/nieprzejrzyste).

opacity Wartość atrybutu musi być liczbą znajdującą się między 0.0 (zupełnie przezroczysty) a 1.0 (zupełnie nieprzejrzysty).

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

Proszę zauważyć, że powyższy tekst będzie również przezroczysty/nieprzejrzysty!

Poniższy przykład pokazuje różne elementy z różnym stopniem nieprzejrzystości:

Przykład

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Nieprzejrzysty czerwony */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Nieprzejrzysty zielony */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Nieprzejrzysty niebieski */

Spróbuj sam