3. Kolory w CSS – RGB, HSL, opacity, zmienne

~12-15 min poziom: początkujący

CSS daje bardzo dużo kontroli nad kolorami. Warto znać alternatywy dla #hex.

Formaty kolorów

color: #ff6347;                /* hex */
color: rgb(255, 99, 71);       /* rgb */
color: rgba(255, 99, 71, 0.7); /* rgba – z przezroczystością */
color: hsl(9, 100%, 64%);      /* hsl */
color: hsla(9, 100%, 64%, 0.6);/* hsla */

Zmienne CSS (custom properties)

:root {
  --primary: #0d6efd;
  --danger: #dc3545;
  --light: #f8f9fa;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.alert-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}

…

index.html

https://example.com/

Zmienne to przyszłość

Ten blok ma kolor akcentu i lekką przezroczystość

rgba() / hsla() – dodają kanał alpha (0–1)
:root – najlepsze miejsce na zmienne
var(--nazwa, fallback) – wartość domyślna, gdy zmienna nie istnieje
opacity: 0.5; – przezroczystość całego elementu (w tym dzieci)

Do zapamiętania: Zdefiniuj kolory w :root jako --zmienna i używaj var().

Zadanie

W pliku style.css:

zdefiniuj 4 zmienne kolorów w :root
użyj ich dla h1, linków i tła body
zrób jeden element z rgba() i drugi z opacity: 0.8

Następna lekcja

4. Flexbox – pierwsze układy

[ Miejsce na reklamę ]