Kolory, tło i podstawy wizualnego stylu

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• ustawić kolor tekstu za pomocą właściwości color,
• odróżnić kolor tekstu od koloru tła,
• rozpoznać podstawowe formaty kolorów: nazwy, HEX, RGB/RGBA i HSL/HSLA,
• zastosować background-color w prostych komponentach,
• ocenić, czy tekst ma wystarczająco czytelny kontrast względem tła.

Kolor tekstu

W CSS kolor tekstu ustawiasz właściwością color. To jedna z najczęściej dziedziczonych właściwości, więc kolor ustawiony na rodzicu może przejść na tekst wewnątrz tego elementu.

body {
  color: #0f172a;
}

.text-muted {
  color: #475569;
}

Nazwane kolory, takie jak red, blue czy black, są wygodne do szybkich testów. W realnych projektach częściej spotkasz dokładniejsze wartości, np. HEX albo HSL.

Kolor tła

Kolor tła ustawiasz właściwością background-color. To ona decyduje, jak wygląda powierzchnia elementu: całej strony, sekcji, karty, przycisku albo etykiety.

.lesson-note {
  color: #0f172a;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
}

Kolor tekstu i kolor tła zawsze oceniaj razem. Jasnoszary tekst na białym tle może wyglądać subtelnie, ale często jest po prostu trudny do przeczytania.

Format HEX

HEX to popularny format zapisu kolorów w projektach frontendowych. Zaczyna się od znaku #, a potem używa sześciu znaków opisujących składowe czerwieni, zieleni i niebieskiego.

.button {
  background-color: #2563eb;
  color: #ffffff;
}

Nie musisz na początku liczyć wartości HEX ręcznie. Ważne, aby umieć je rozpoznać, skopiować z narzędzia projektowego i użyć konsekwentnie w CSS.

RGB i RGBA

rgb() opisuje kolor przez trzy liczby: czerwony, zielony i niebieski. Każda z nich zwykle mieści się w zakresie od 0 do 255.

.alert {
  background-color: rgb(254, 242, 242);
  color: rgb(127, 29, 29);
}

rgba() dodaje czwartą wartość: przezroczystość. Wartość 1 oznacza pełną widoczność, a 0 pełną przezroczystość.

.overlay {
  background-color: rgba(15, 23, 42, 0.72);
}

RGBA przydaje się, gdy chcesz stworzyć delikatne tło, nakładkę albo obramowanie, które nie dominuje nad resztą interfejsu.

HSL i HSLA

hsl() opisuje kolor przez odcień, nasycenie i jasność. To format, który pomaga myśleć bardziej wizualnie: jaki to kolor, jak intensywny jest i czy ma być jasny czy ciemny.

.success-badge {
  background-color: hsl(142, 76%, 94%);
  color: hsl(142, 72%, 29%);
}

hsla() działa podobnie, ale dodaje przezroczystość. Na tym etapie wystarczy wiedzieć, że HSL bywa wygodny, gdy chcesz tworzyć jaśniejsze lub ciemniejsze warianty tego samego koloru.

Kontrast i czytelność

Kontrast to różnica między kolorem tekstu a kolorem tła. Jeśli różnica jest zbyt mała, użytkownik musi się wysilać, nawet gdy treść jest poprawna. Dobra czytelność jest ważniejsza niż subtelny efekt wizualny.

• Ciemny tekst zwykle dobrze działa na jasnym tle.
• Jasny tekst może działać na ciemnym tle, jeśli tło jest naprawdę ciemne.
• Unikaj jasnoszarego tekstu na białym tle i intensywnych kolorów tekstu na intensywnym tle.

Dobre praktyki

• Wybierz mały zestaw kolorów i powtarzaj go konsekwentnie.
• Nie używaj wielu mocnych kolorów naraz. Jeden akcent zwykle wystarczy.
• Najpierw zadbaj o czytelny tekst, dopiero potem o dekoracyjne efekty.
• Do ważnych komunikatów dobieraj kolor tła, tekstu i obramowania jako spójny zestaw.
• W większych projektach powtarzane kolory warto później przenieść do CSS custom properties albo tokenów designu.

Prosty styl karty

Poniżej znajduje się mały przykład karty, która używa koloru tekstu, tła, obramowania i czytelnego kontrastu. To dobry punkt startowy do prostych komponentów edukacyjnych lub produktowych.

Kopiuj<article class="course-card">
  <p class="course-card__label">Nowa lekcja</p>
  <h2>Kolory w CSS</h2>
  <p>Naucz się dobierać tło i tekst tak, aby treść była wygodna do czytania.</p>
</article>

.course-card {
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #dbe2f1;
  padding: 1.5rem;
  border-radius: 12px;
}

.course-card__label {
  color: #1d4ed8;
  background-color: #dbeafe;
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

Zwróć uwagę, że kolor akcentu pojawia się w etykiecie, ale główny tekst pozostaje spokojny i łatwy do przeczytania.

Mini zadanie

Utwórz małą kartę z nagłówkiem, opisem i etykietą. Następnie w CSS:

• ustaw kolor głównego tekstu za pomocą color,
• dodaj jasne background-color dla karty,
• dodaj delikatny border, który pasuje do tła,
• ostyluj etykietę kolorem akcentu, ale zachowaj czytelny kontrast,
• porównaj wersję czytelną z wersją o zbyt jasnym tekście i zapisz, która jest wygodniejsza.

Na koniec sprawdź, czy kolory pomagają zrozumieć strukturę karty, a nie odciągają uwagi od treści.

Podsumowanie lekcji

Wiesz już, że color ustawia kolor tekstu, a background-color kolor powierzchni elementu. Poznałeś najczęstsze formaty kolorów: nazwy, HEX, RGB/RGBA i HSL/HSLA.

Rozumiesz też, że dobry styl wizualny zaczyna się od czytelności i konsekwencji. Kolor ma wspierać treść oraz hierarchię, a nie tworzyć chaos w interfejsie.

Kolejny krok: dopracuj tekst za pomocą typografii, czyli fontu, rozmiaru, grubości i wysokości linii.