Prawidłowe wartości kolorów w 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 */

Spróbuj sam

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ą */

Spróbuj sam

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 */

Spróbuj sam

#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 */

Spróbuj sam

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 */

Spróbuj sam

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ą */

Spróbuj sam

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;}

Spróbuj sam

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 */
}

Spróbuj sam