Wartości CSS Kolor prawne

Kolory CSS

Kolory w CSS można określić za pomocą następujących metod:

szesnastkowe kolorów
kolory RGB
kolorów RGBA
HSL kolory
HSLA kolory
Nazwy kolorów predefiniowane / cross-browser

szesnastkowe kolorów

Szesnastkowe wartości kolorów są obsługiwane we wszystkich głównych przeglądarkach.

Kolor szesnastkowy jest określona: #RRGGBB, gdzie RR (red) , GG (green) i BB (blue) całkowitymi szesnastkowe określenie części składowych koloru. Wszystkie wartości muszą zawierać się pomiędzy 00 i FF.

Na przykład, wartość 0000FF # jest wyświetlany jako niebiesko, ponieważ niebieski składnik jest ustawiona na najwyższą wartość (ff) , a pozostałe są ustawione na 00.

Przykład

Definiowanie różnych kolorów HEX:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Spróbuj sam "

Kolory RGB

Wartości kolorów RGB są obsługiwane we wszystkich głównych przeglądarek.

Wartość RGB jest określona: rgb(red, green, blue) . Każdy parametr (czerwony, zielony, niebieski) określa intensywność koloru i może być liczbą całkowitą z zakresu od 0 do 255, lub wartość procentowego (from 0% to 100%) .

Na przykład, rgb(0,0,255) wartość jest wyświetlany jako niebieski, niebieski, ponieważ parametr jest ustawiony na jego najwyższej wartości (255) , a pozostałe są ustawione na 0.

Ponadto, następujące wartości określają równe color: rgb(0,0,255) i rgb(0%,0%,100%) .

Przykład

Definiowanie różnych kolorów RGB:

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

Spróbuj sam "

RGBA kolory

Wartości kolorów RGBA są obsługiwane w IE9 +, Firefox 3+, Chrome, Safari, Opera i 10+.

Wartości kolorów RGBA są przedłużeniem wartości kolorów RGB z kanałem alfa - który określa stopień przezroczystości obiektu.

Wartość koloru RGBA jest określona: rgba(red, green, blue, alpha) . Parametr alpha jest liczbą z przedziału od 0,0 (fully transparent) i 1,0 (fully opaque) .

Przykład

Definiowanie różnych kolorów RGB z kryciem:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

Spróbuj sam "

Kolory HSL

Wartości kolorów HSL są obsługiwane w IE9 +, Firefox, Chrome, Safari, Opera i 10+.

HSL oznacza odcień, nasycenie i lekkości - i stanowi cylindryczny współrzędna reprezentację kolorów.

Wartość koloru HSL jest określona: hsl(hue, saturation, lightness) .

Barwa jest stopień na kole kolorów (from 0 to 360) - 0 (or 360) jest czerwony, zielony 120, 240 jest niebieski. Nasycenie jest wartością procentową; 0% oznacza odcień szarości i 100% jest w pełnym kolorze. Lekkość jest również odsetek; 0% jest czarny, 100% jest biały.

Przykład

Definiowanie różnych kolorów HSL:

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

Spróbuj sam "

HSLA Kolory

Wartości kolorów HSLA są obsługiwane w IE9 +, Firefox 3+, Chrome, Safari, Opera i 10+.

Wartości kolorów HSLA są przedłużeniem wartości kolorów HSL z kanałem alfa - który określa stopień przezroczystości obiektu.

Wartość koloru HSLA jest określona: hsla(hue, saturation, lightness, alpha) , gdzie parametr alfa definiuje zadymienia. Parametr alpha jest liczbą z przedziału od 0,0 (fully transparent) i 1,0 (fully opaque) .

Przykład

Definiowanie różnych kolorów HSL z kryciem:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

Spróbuj sam "