Barwy mają kluczowe znaczenie dla wyglądu strony internetowej. W CSS możemy zdefiniować kolory na kilka sposobów, dostosowując je do własnych potrzeb i preferencji. Znajomość tych metod pozwala precyzyjnie dobrać kolory, które podkreślą estetykę i funkcjonalność witryny.
Sposoby definiowania barw w CSS
1. Angielskie nazwy kolorów
Najprostszym sposobem definiowania barw jest używanie ich anglojęzycznych nazw:
<div style="background: maroon;"></div>
2. Zapis szesnastkowy (Hexadecimal)
Kolor definiowany jest w modelu RGB, który opiera się na trzech podstawowych barwach:
-
R (red) – czerwony
-
G (green) – zielony
-
B (blue) – niebieski
Każdy kolor zapisujemy w formacie #rrggbb, gdzie:
-
rr– intensywność czerwieni -
gg– intensywność zieleni -
bb– intensywność niebieskiego
Wartości zapisujemy szesnastkowo od 00 (brak koloru) do FF (pełna intensywność):
<div style="background: #FF0000;"></div> <!-- czerwony -->
3. Dziesiętny zapis RGB
Barwę definiujemy także w notacji dziesiętnej, używając funkcji rgb():
<div style="background: rgb(0, 255, 255);"></div> <!-- cyan -->Wartości liczbowe również mieszczą się w zakresie od 0 do 255.
4. Procentowy zapis RGB
Kolor można zdefiniować także procentowo, używając notacji rgb():
<div style="background: rgb(100%, 50%, 50%);"></div>Każdy kanał koloru (czerwony, zielony, niebieski) określamy w procentach od 0% (brak intensywności) do 100% (maksymalna intensywność).
Przykładowe zastosowania
Tworzenie odcieni jednego koloru
Aby stworzyć różne odcienie tego samego koloru, manipulujemy intensywnością składowych RGB. Na przykład dla odcieni czerwieni zmieniamy wartość kanału czerwonego:
<div style="background: #FF0000;"></div> <!-- intensywny czerwony -->
<div style="background: #A60000;"></div> <!-- ciemniejszy czerwony -->
<div style="background: #490000;"></div> <!-- bardzo ciemny czerwony -->
Skala szarości
Aby uzyskać odcienie szarości, ustawiamy wszystkie składowe RGB na tę samą wartość:
<div style="background: #303030;"></div> <!-- ciemnoszary -->
<div style="background: #777777;"></div> <!-- średni szary -->
<div style="background: #A2A2A2;"></div> <!-- jasnoszary -->