CSS daje bardzo dużo kontroli nad kolorami. Warto znać alternatywy dla #hex – zwłaszcza w 2026.

Dlaczego to ważne?

Nowoczesne formaty kolorów (HSL, oklch) ułatwiają tematyczne zmiany i dostępność (kontrast). Zmienne CSS to podstawa skalowalnego designu.

Formaty kolorów

color: #ff6347;                /* hex – szybki */
color: rgb(255, 99, 71);       /* rgb – precyzyjny */
color: rgba(255, 99, 71, 0.7); /* rgba – z alpha */
color: hsl(9, 100%, 64%);      /* hsl – intuicyjny (hue, saturation, lightness) */
color: hsla(9, 100%, 64%, 0.6);/* hsla */
color: oklch(65% 0.2 25);      /* oklch – nowy, najlepszy dla dostępności (2026) */
color: currentColor;           /* dziedziczy kolor rodzica */

Zmienne CSS (custom properties)

:root {
    --primary: hsl(210, 100%, 50%);
    --danger: #dc3545;
    --light: #f8f9fa;
}

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

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

Gradienty i color-mix()

.hero {
  background: linear-gradient(to right, var(--primary), color-mix(in srgb, var(--primary) 70%, black));
}

/* Mieszanie kolorów */
.mix { color: color-mix(in oklch, #0d6efd, #dc3545); }

Narzędzia

W DevTools (F12) kliknij kolor → picker z HSL/RGB/oklch i kontrastem.

• rgba() / hsla() – dodają kanał alpha (0–1)
• :root – najlepsze miejsce na zmienne
• var(--nazwa, fallback) – wartość domyślna
• opacity: 0.5; – przezroczystość całego elementu (w tym dzieci)
• currentColor – dziedziczy kolor tekstu
• linear-gradient() – płynne przejścia kolorów
• color-mix() – mieszanie kolorów (nowość 2025+)
• oklch() – najlepszy format dla kontrastu i ciemnych trybów

Zadanie

W pliku style.css:

• zdefiniuj 4 zmienne kolorów w :root (użyj hsl/oklch)
• użyj ich dla h1, linków i tła body
• zrób jeden element z rgba() i drugi z opacity: 0.8
• dodaj gradient tła sekcji z var() i color-mix()