Prawne wartości kolorów CSS
Kolory CSS
Kolory w CSS można określić następującymi metodami:
- Kolory szesnastkowe
- Kolory szesnastkowe z przezroczystością
- kolory RGB
- kolory RGBA
- kolory HSL
- kolory HSLA
- Wstępnie zdefiniowane/nazwy kolorów w różnych przeglądarkach
- ze
currentcolorsłowem kluczowym
Kolory szesnastkowe
Kolor szesnastkowy określa się za pomocą: #RRGGBB, gdzie szesnastkowe liczby całkowite RR (czerwony), GG (zielony) i BB (niebieski) określają składniki koloru. Wszystkie wartości muszą zawierać się w przedziale od 00 do FF.
Na przykład wartość #0000ff jest renderowana jako niebieska, ponieważ niebieski składnik jest ustawiony na najwyższą wartość (ff), a pozostałe są ustawione na 00.
Przykład
Zdefiniuj różne kolory HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Kolory szesnastkowe z przezroczystością
Kolor szesnastkowy jest określony za pomocą: #RRGGBB. Aby zwiększyć przezroczystość, dodaj dwie dodatkowe cyfry od 00 do FF.
Przykład
Zdefiniuj różne kolory HEX z przezroczystością:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Kolory RGB
Wartość koloru RGB jest określana za pomocą funkcji rgb() , która ma następującą składnię:
rgb(red, green, blue)
Każdy parametr (czerwony, zielony i niebieski) określa intensywność koloru i może być liczbą całkowitą od 0 do 255 lub wartością procentową (od 0% do 100%).
Na przykład wartość rgb(0,0,255) jest renderowana jako niebieska, ponieważ parametr niebieski jest ustawiony na najwyższą wartość (255), a pozostałe są ustawione na 0.
Również następujące wartości definiują równy kolor: rgb(0,0,255) i rgb(0%,0%,100%).
Przykład
Zdefiniuj różne kolory 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 */
Kolory RGBA
Wartości kolorów RGBA są rozszerzeniem wartości kolorów RGB o kanał alfa, który określa krycie obiektu.
Kolor RGBA jest określany za pomocą funkcji rgba() , która ma następującą składnię:
rgba(red, green, blue, alpha)
Parametr alfa to liczba z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (w pełni nieprzezroczysta).
Przykład
Zdefiniuj różne kolory 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 */
Kolory HSL
HSL oznacza barwę, nasycenie i jasność – i reprezentuje cylindryczną reprezentację kolorów.
Wartość koloru HSL jest określana za pomocą funkcji hsl() , która ma następującą składnię:
hsl(hue, saturation, lightness)
Odcień to stopień na kole kolorów (od 0 do 360) — 0 (lub 360) to czerwony, 120 to zielony, 240 to niebieski. Nasycenie to wartość procentowa; 0% oznacza odcień szarości, a 100% to pełny kolor. Lekkość to również procent; 0% to czarny, 100% to biały.
Przykład
Zdefiniuj różne kolory 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 */
Kolory HSLA
Wartości kolorów HSLA są rozszerzeniem wartości kolorów HSL o kanał alfa - który określa krycie obiektu.
Wartość koloru HSLA jest określana za pomocą funkcji hsla() , która ma następującą składnię:
hsla(hue, saturation, lightness, alpha)
Parametr alfa to liczba z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (w pełni nieprzezroczysta).
Przykład
Zdefiniuj różne kolory HSL za pomocą krycia:
#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 */
Wstępnie zdefiniowane/nazwy kolorów w różnych przeglądarkach
140 nazw kolorów jest wstępnie zdefiniowanych w specyfikacji kolorów HTML i CSS.
Na przykład: blue, red, coral, brown, itp.:
Przykład
Zdefiniuj różne nazwy kolorów:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Listę wszystkich predefiniowanych nazw można znaleźć w naszym zestawieniu nazw kolorów .
Słowo kluczowe currentcolor
Słowo currentcolorkluczowe odnosi się do wartości właściwości koloru elementu.
Przykład
Kolor obramowania następującego elementu <div> będzie niebieski, ponieważ kolor tekstu elementu <div> jest niebieski:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}