Kurs HTML

Wprowadzenie: Świat kolorów w CSS

Kolory są fundamentalnym elementem wizualnym każdej strony internetowej. CSS oferuje wiele sposobów definiowania kolorów dla różnych właściwości, takich jak color (kolor tekstu), background-color (kolor tła), border-color (kolor obramowania) i wiele innych.

W tej lekcji poznamy najpopularniejsze i najczęściej używane metody definiowania kolorów: za pomocą predefiniowanych nazw, kodów heksadecymalnych (HEX) oraz funkcji RGB i RGBA.

1. Nazwy kolorów (Color Keywords)

CSS definiuje zestaw ponad 140 predefiniowanych nazw kolorów, które można używać bezpośrednio jako wartości. Są to podstawowe kolory jak red, blue, green, black, white, ale także bardziej opisowe nazwy jak lightblue, darkseagreen, papayawhip czy rebeccapurple.

Pełną listę nazwanych kolorów można znaleźć w specyfikacji CSS lub na stronach takich jak MDN.

p {
  color: darkblue;
}

.highlight {
  background-color: yellow;
}

button {
  border-color: gray;
}Kopiuj

Zalety: Łatwe do zapamiętania i odczytania dla podstawowych kolorów.

Wady: Ograniczona paleta dostępnych kolorów. Trudno uzyskać dokładne odcienie wymagane w projektach graficznych.

2. Kody heksadecymalne (HEX)

Kody HEX są jedną z najpopularniejszych metod definiowania kolorów w web designie. Reprezentują one kolor w modelu RGB (Red, Green, Blue) za pomocą wartości szesnastkowych.

Składnia kodu HEX zaczyna się od znaku #, po którym następuje 3 lub 6 cyfr szesnastkowych (0-9 i A-F).

• Format 6-cyfrowy: #RRGGBB
  • RR: Wartość składowej czerwonej (od 00 do FF).
  • GG: Wartość składowej zielonej (od 00 do FF).
  • BB: Wartość składowej niebieskiej (od 00 do FF).
  • 00 oznacza brak intensywności danego koloru, FF oznacza pełną intensywność (co odpowiada wartości 255 w systemie dziesiętnym).
• Format 3-cyfrowy: #RGB (skrócony)
  • Jest to skrócona wersja formatu 6-cyfrowego, możliwa do użycia tylko wtedy, gdy każda para cyfr (RR, GG, BB) jest identyczna.
  • #RGB jest równoważne #RRGGBB. Np. #F00 to to samo co #FF0000 (czerwony), #0F0 to #00FF00 (zielony), #FFF to #FFFFFF (biały).

body {
  background-color: #f0f0f0; /* Jasnoszary (prawie biały) */
}

h1 {
  color: #333; /* Ciemnoszary (skrócony zapis #333333) */
}

.link-specjalny {
  color: #ff6347; /* Kolor Tomato */
}

.przycisk {
  background-color: #007bff; /* Niebieski (Bootstrap primary) */
}Kopiuj

Zalety: Pozwala zdefiniować miliony kolorów z dużą precyzją. Szeroko stosowany w narzędziach graficznych i projektowych. Skrócony zapis jest wygodny dla prostych kolorów.

Wady: Może być mniej intuicyjny niż nazwy. Domyślnie nie obsługuje przezroczystości (choć istnieje nowszy, 8-cyfrowy format HEX z kanałem alfa, np. #RRGGBBAA, ale nie jest on jeszcze tak powszechnie używany jak RGBA).

3. Funkcja rgb()

Funkcja rgb() również definiuje kolor w modelu RGB, ale używa wartości dziesiętnych (od 0 do 255) lub procentowych (od 0% do 100%) dla każdej ze składowych: czerwonej, zielonej i niebieskiej.

Składnia:

• rgb(czerwony, zielony, niebieski) - wartości dziesiętne 0-255.
• rgb(czerwony%, zielony%, niebieski%) - wartości procentowe 0%-100%.

.tekst-glowny {
  color: rgb(51, 51, 51); /* Odpowiednik #333 */
}

.akcent {
  background-color: rgb(255, 99, 71); /* Odpowiednik #ff6347 (Tomato) */
}

.zielony-procentowo {
  color: rgb(0%, 100%, 0%); /* Czysty zielony */
}Kopiuj

Zalety: Bardziej czytelny niż HEX dla niektórych osób. Pozwala na użycie wartości procentowych.

Wady: Domyślnie nie obsługuje przezroczystości.

4. Funkcja rgba() - Dodanie przezroczystości

Funkcja rgba() działa identycznie jak rgb(), ale dodaje czwarty parametr: **kanał alfa (alpha)**, który określa poziom przezroczystości (krycia) koloru.

Składnia:

• rgba(czerwony, zielony, niebieski, alfa)

Wartość alfa jest liczbą z zakresu od 0.0 (całkowicie przezroczysty) do 1.0 (całkowicie nieprzezroczysty). Można używać wartości ułamkowych, np. 0.5 oznacza 50% przezroczystości.

.nakladka {
  /* Półprzezroczyste czarne tło */
  background-color: rgba(0, 0, 0, 0.5); 
}

.tekst-z-cieniem {
  /* Czerwony tekst z lekkim przezroczystym cieniem */
  color: rgb(200, 0, 0);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
}

.przycisk-nieaktywny {
  /* Jasnoniebieski, ale w 70% przezroczysty */
  background-color: rgba(0, 123, 255, 0.7);
  color: rgba(255, 255, 255, 0.8); /* Lekko przezroczysty biały tekst */
}Kopiuj

Nowsza składnia (CSS Colors Level 4): Nowoczesne przeglądarki pozwalają również definiować kanał alfa bezpośrednio w funkcji rgb(), używając ukośnika:

• rgb(czerwony zielony niebieski / alfa)

.nakladka-nowa {
  /* Półprzezroczyste czarne tło - nowa składnia */
  background-color: rgb(0 0 0 / 0.5); 
  /* lub */
  background-color: rgb(0 0 0 / 50%); /* Alfa jako procent */
}Kopiuj

Zalety: Umożliwia tworzenie efektów przezroczystości, nakładek, cieni itp. Bardzo elastyczna.

Wady: Składnia może być nieco dłuższa niż HEX.