Prawidłowe wartości kolorów w CSS
- Poprzednia strona Kolory CSS
- Następna strona Domyślne wartości CSS
Kolory CSS
Kolory w CSS można określić w następujący sposób:
- Kolory szesnastkowe
- Kolory HEX z przezroczystością
- Kolor RGB
- #p3 {background-color: rgb(0, 0, 255);} /* Niebieski */
- Kolory HSL
- Kolory HSLA
- Nazwy kolorów zdefiniowane/predefiniowane/obsługiwane przez różne przeglądarki
- Używając
currentcolor
Kluczowe słowa
Kolory szesnastkowe
Używając #RRGGBB określa się kolor szesnastkowego, gdzie RR (czerwony), GG (zielony) i BB (niebieski) to szesnastkowe liczby całkowite określające składniki koloru (komponenty). Wszystkie wartości muszą być w zakresie 00 do FF.
Na przykład, wartość #0000ff jest wyświetlana jako niebieski, ponieważ komponent niebieski ustawiony jest na najwyższą wartość (ff), a inne komponenty ustawione są na 00.
Przykład
Definiowanie różnych kolorów HEX:
#p1 {background-color: #ff0000;} /* Czerwony */ #p2 {background-color: #00ff00;} /* Zielony */ #p3 {background-color: #0000ff;} /* Niebieski */
Kolory HEX z przezroczystością
Używając #RRGGBB określa się kolor szesnastkowego. Aby zwiększyć przezroczystość, dodaj dwie dodatkowe cyfry między 00 a FF.
Przykład
Definiowanie kolorów HEX z przezroczystością:
#p1a {background-color: #ff000080;} /* Czerwony z przezroczystością */ #p2a {background-color: #00ff0080;} /* Zielony z przezroczystością */ #p3a {background-color: #0000ff80;} /* Niebieski z przezroczystością */
Kolor RGB
Wartość koloru RGB składa się z Funkcja rgb()Określenie, gramatyka wygląda tak:
rgb(red, zielony, blue)
Każdy parametr (red, zielony, blueDefiniuje intensywność koloru, może to być liczba całkowita lub wartość procentowa z zakresu 0 do 255 (od 0% do 100%).
Na przykład, wartość rgb(0,0,255) jest wyświetlana jako niebieski, ponieważ parametr blue ustawiony jest na najwyższą wartość (255), a inne parametry ustawione są na 0.
此外,以下值定义相同的颜色:rgb(0,0,255) 和 rgb(0%,0%,100%)。
Przykład
Oprócz tego, następujące wartości definiują ten sam kolor: rgb(0,0,255) i rgb(0%,0%,100%).
Definiowanie różnych kolorów RGB: #p1 {background-color: rgb(255, 0, 0);} /* Czerwony */ #p2 {background-color: rgb(0, 255, 0);} /* Zielony */
#p3 {background-color: rgb(0, 0, 255);} /* Niebieski */
Kolory RGBA
Kolory RGBA są rozszerzeniem wartości kolorów RGB, mają kanał Alpha - określają nieprzejrzystość obiektu. Funkcja rgba()Określenie, gramatyka wygląda tak:
rgba(red, zielony, blue, alpha)
alpha Parametry to liczby między 0.0 (całkowicie przezroczysty) a 1.0 (całkowicie nieprzeźroczysty).
Przykład
Definiowanie różnych kolorów RGB z nieprzejrzystością:
#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 */
Kolory HSL
HSL oznacza barwę (hue), nasycenie (saturation) i jasność (lightness) - reprezentację kolumnową kolorów.
Używając Funkcja hsl()Określenie wartości koloru HSL, gramatyka tej funkcji wygląda tak:
hsl(barwa, nasycenie, jasność)
Barwa 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 szarość, a 100% to pełne kolory.
Jasność jest wartością procentową; 0% to czarny, 100% to biały.
Przykład
Definiowanie różnych kolorów HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* 绿色 */ #p2 {background-color: hsl(120, 100%, 75%);} /* 浅绿色 */ #p3 {background-color: hsl(120, 100%, 25%);} /* 深绿色 */ #p4 {background-color: hsl(120, 60%, 70%);} /* miękki zielony */
Kolory HSLA
Wartości kolorów HSLA są rozszerzeniem wartości kolorów HSL, zawierają kanał Alpha - określają przezroczystość obiektu.
Wartości kolorów HSLA składają się z Funkcja hsla()Określ, gramatyka funkcji tej wygląda następująco:
hsla(barwa, nasycenie, jasność, alpha)
alpha Parametry to liczby między 0.0 (całkowicie przezroczysty) a 1.0 (całkowicie nieprzeźroczysty).
Przykład
Zdefiniuj różne kolory HSL z przezroczystością:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* zielony z przezroczystością */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* jasny zielony z przezroczystością */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* ciemny zielony z przezroczystością */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* miękki zielony z przezroczystością */
Nazwy kolorów zdefiniowane/predefiniowane/obsługiwane przez różne przeglądarki
W specyfikacji kolorów HTML i CSS zdefiniowano 140 nazw kolorów.
Na przykład:blue
,red
,coral
,brown
i:
Przykład
Zdefiniuj różne nazwy kolorów:
#p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;}
Lista wszystkich nazw kolorów zdefiniowanych jest dostępna w naszej encyklopedii nazw kolorów.
Klucz currentcolor
currentcolor
Cytowanie wartości atrybutu color kluczowego.
Przykład
Poniższy element <div> będzie miał niebieską kolor ramki, ponieważ kolor tekstu elementu <div> jest niebieski:
#myDIV { color: blue; /* niebieski tekst */ border: 10px solid currentcolor; /* niebieska ramka */ }
- Poprzednia strona Kolory CSS
- Następna strona Domyślne wartości CSS