Kolory w HTML i CSS najszybciej zdefiniujesz za pomocą właściwości color dla tekstu oraz background-color dla tła, przypisując im wartości w formacie kodów HEX, funkcji RGB lub predefiniowanych angielskich nazw barw. Wystarczy wpisać na przykład color: #ff0000; w arkuszu stylów, by natychmiast zmienić barwę czcionki na czerwoną. To absolutna podstawa projektowania stron internetowych.
Więc jak używać kolorów w HTML i CSS w codziennej pracy? Prawda jest zresztą absolutnie taka, że dobór odpowiedniego formatu zależy od konkretnego problemu do rozwiązania na produkcji. Kodowanie interfejsu to ciągłe podejmowanie decyzji o tym, jak przeglądarka ma wyrenderować piksele na ekranie użytkownika. Mamy do dyspozycji cztery główne metody deklaracji i każda z nich zachowuje się inaczej w silnikach renderujących.
Jak zdefiniować kolor tła i tekstu w HTML i CSS?
Zaczynamy od gołych podstaw. CSS daje nam wbudowane właściwości do zarządzania wyglądem każdego elementu drzewa DOM. Nie musisz zgadywać. Przeglądarka czyta reguły od góry do dołu. Jeśli zadeklarujesz kolor w złym miejscu, kaskada stylów po prostu go nadpisze. Często widzę, jak początkujący deweloperzy siłują się z wymuszaniem stylów przez !important. To błąd.
Oto cztery właściwości, których używamy non stop w kodzie:
background-colorokreśla barwę tła elementu blokowego lub liniowego. Działa na divach, sekcjach, formularzach i samym tagu body, wypełniając całkowicie przestrzeń wyznaczoną przez model pudełkowy (box model) aż do krawędzi borderu.colorodpowiada wyłącznie za renderowanie barwy fontu i dziedziczy się kaskadowo na elementy podrzędne, o ile nie zostanie zresetowany.border-colornarzuca kolor obramowania, ale wymaga wcześniejszego zadeklarowania grubości i stylu linii, bo inaczej ramka w ogóle nie pojawi się na ekranie.fillorazstroketo atrybuty zarezerwowane specjalnie dla wektorowych grafik SVG osadzonych bezpośrednio w kodzie dokumentu.
Kaskada CSS jest bezlitosna. Jeśli ustawisz kolor czcionki dla całego dokumentu na ciemnoszary, każdy nagłówek i akapit przejmie ten stan. A potem wchodzi klient i prosi o zmianę jednego guzika. Wtedy wkraczają specyficzne selektory. I tu zaczyna się zabawa z formatami zapisu wartości.
Czym są kody HEX i jak je czytać?
Kody szesnastkowe (HEX) to absolutny standard w branży web designu. Każdy grafik podsyła specyfikację w HEXach. Zapis zaczyna się od znaku krzyżyka (hash), po którym następuje sześć znaków. Liczby od 0 do 9 i litery od A do F. Składnia jest prosta. Pierwsze dwa znaki to nasycenie czerwieni, kolejne dwa to zieleń, a ostatnie dwa to błękit.
Format #000000 daje całkowitą czerń. Z kolei #FFFFFF to czysta biel. Wartość #FF0000 wygeneruje jaskrawą, wręcz rażącą w oczy czerwień, bo pierwszy kanał jest podkręcony do maksimum. Maszety CSS pozwalają też na skrócony zapis trzyznakowy. Zamiast pisać #FF0000, piszesz po prostu #F00. Przeglądarka sama podwoi każdy znak w locie podczas parsowania arkusza.
Pamiętam robienie motywu dla małej piekarni na wrocławskim Nadodrzu. Zrobiliśmy na wdrożeniu ciemny motyw, potem zawiesiło się całkowicie renderowanie zmiennych na starych urządzeniach, więc wprowadzono poprawkę na sztywno z HEXami przed poniedziałkiem. Prawda jest zresztą absolutnie taka, że systemy legacy nienawidzą nowoczesnych funkcji CSS. Szlag mnie trafiał, gdy stary Safari wypluwał błędy. Musieliśmy ręcznie wklepywać #e6a371 w trzydziestu różnych miejscach pliku. Brakowało nam twardych danych za wczoraj, więc wydawało się to jedyną bezpieczną opcją na weekend przed odbiorem projektu.
HEXy są świetne do kopiowania. Bardzo słabo sprawdzają się jednak, gdy musisz w locie przyciemnić kolor w kodzie bez użycia preprocesora typu SASS. Patrzysz na #3A8B22 i nie masz pojęcia, jak zrobić z tego wersję o dziesięć procent jaśniejszą na stan :hover. Musisz odpalić zewnętrzny próbnik.
Jak działa format RGB i RGBA w projektowaniu stron?
RGB to skrót od Red, Green, Blue. To model addytywny ściśle oparty na tym, jak emitują światło fizyczne matryce monitorów. Zamiast liter, używamy tu wartości dziesiętnych od 0 do 255. Kod rgb(255, 0, 0) to znowu czerwień. Zapis ten jest o wiele bardziej czytelny dla ludzi z zacięciem matematycznym.
A RGBA dodaje do tego kanał alfa. Przezroczystość. To całkowicie zmienia zasady pracy z tłem.
Czwarty parametr w funkcji rgba() przyjmuje wartości od 0.0 (pełna przezroczystość) do 1.0 (pełne krycie). Jeśli chcesz nałożyć delikatny czarny cień pod modalem, piszesz background-color: rgba(0, 0, 0, 0.5);. Uzyskujesz pięćdziesiąt procent krycia czerni. Elementy znajdujące się pod spodem warstwy będą widoczne. Prawie osiemdziesiąt procent starych projektów opierało się wyłącznie na tej metodzie budowania głębi interfejsu, zanim weszły filtry backdrop.
Kiedy lepiej wybrać RGB zamiast HEX?
Zawsze używaj RGBA, kiedy potrzebujesz kontroli nad przezroczystością samego tła, bez wpływania na teksty wewnątrz kontenera. Użycie właściwości opacity na głównym divie sprawi, że wyblaknie wszystko. Tekst też. RGBA pozwala zmienić krycie tylko tła. Zastanawiacie się zresztą, dlaczego to na produkcji tak wyje na testach po drodze? Sam się nad tym borykałem dzisiaj u siebie we wtorek. Graficy ustawiają krycie całych warstw w Figmie, a my musimy to rozbijać na osobne wartości RGBA na frontendzie, by tekst pozostał ostry jak brzytwa.
Czy warto stosować angielskie nazwy kolorów w kodzie?
HTML i CSS obsługują 140 predefiniowanych nazw kolorów. Możesz wpisać color: red;, background: tomato; albo border-color: papayawhip;. Przeglądarka to zrozumie. Specyfikacja W3C narzuca silnikom dokładne mapowanie tych słów na konkretne wartości szesnastkowe.
Dobrym pomysłem jest trzymanie się nazw tylko w fazie mockupu lub szybkiego prototypowania. Nie używaj ich na produkcji. Słowo gray wyrenderuje się poprawnie, ale brakuje tu jakiejkolwiek precyzji. Marki mają swoje ścisłe wytyczne wizualne. Brand book korporacji nie mówi „użyj koloru niebieskiego”. Mówi „użyj #0056b3„. Angielskie słowa są po prostu zbyt ogólnikowe do profesjonalnych zastosowań.
Zostaw je do pisania szybkich testów jednostkowych w Cypressie albo do wizualnego debugowania z-indexów, gdy musisz na szybko odróżnić od siebie pięć nakładających się warstw rzucając background: hotpink; na problematyczny kontener.
Co to jest HSL i dlaczego programiści go lubią?
HSL to Hue, Saturation, Lightness. Odcień, nasycenie, jasność. To format stworzony dla ludzkiego mózgu, a nie dla maszyn. W RGB zmiana jasności wymaga przeliczenia trzech osobnych kanałów. W HSL modyfikujesz tylko jeden parametr.
Funkcja hsl() przyjmuje trzy wartości. Pierwsza to stopnie na kole barw od 0 do 360. Zero to czerwień, 120 to zieleń, 240 to niebieski. Druga wartość to nasycenie w procentach. Trzecia to jasność, również w procentach. Zapis hsl(200, 100%, 50%) da nam idealny, czysty błękit.
Kiedy robisz hover state na buttonie, HSL to absolutny ratunek. Po prostu zjeżdżasz z lightness o dziesięć procent w dół. Koniec roboty. Piszesz hsl(200, 100%, 40%) i masz idealnie przyciemniony wariant głównego koloru. Wprowadziliśmy to podejście na ostatnim projekcie e-commerce. Zaoszczędziło nam to godziny żmudnego generowania HEXów. HSL również ma swój wariant z kanałem alfa: hsla(). Działa dokładnie tak samo jak RGBA.
Jak używać zmiennych CSS do zarządzania paletą barw na stronie?
Twarde kodowanie wartości w każdym pliku to koszmar utrzymaniowy. CSS Custom Properties (zmienne CSS) rozwiązują problem redundancji kodu. Deklarujesz paletę raz i odwołujesz się do niej z dowolnego miejsca w arkuszu stylów.
Zmienne zaczynamy od dwóch myślników. Tworzymy na przykład --primary-brand. Aby użyć zmiennej, wywołujemy funkcję var().
Gdzie zadeklarować zmienne kolorystyczne?
Najlepszą praktyką jest umieszczenie zmiennych w pseudoklasie :root. Gwarantuje to ich globalną dostępność w całym dokumencie HTML.
Oto prosty przykład wdrożenia:
:root {
--bg-color: #121212;
--text-main: #f0f0f0;
--accent: hsl(150, 80%, 40%);
}
body {
background-color: var(--bg-color);
color: var(--text-main);
}
a {
color: var(--accent);
}
Zmieniliśmy te zasady na robocie w zeszłym miesiącu. Zamiast biegać po plikach przy zmianie trybu na Dark Mode, modyfikujemy po prostu blok zmiennych za pomocą krótkiego skryptu JavaScript, który podmienia atrybut na tagu html. Cały interfejs przerysowuje się w ułamku sekundy. Funkcja var() przyjmuje też fallback. Możesz napisać var(--nieistniejąca-zmienna, red). Jeśli przeglądarka nie znajdzie definicji, wrzuci kolor czerwony. Bezpiecznik idealny.
Jak sprawdzić kontrast kolorów i spełnić normy WCAG?
Dostępność cyfrowa to wymóg prawny. Zignorowanie kontrastu to proszenie się o pozew. Dosłownie. Wytyczne Web Content Accessibility Guidelines (WCAG) określają matematyczny współczynnik różnicy jasności między tekstem a tłem.
Dla zwykłego tekstu minimalny współczynnik wynosi 4.5:1 (poziom AA). Dla dużych nagłówków wymóg spada do 3.0:1. Jasnoszary tekst na białym tle oblałby ten test z kretesem. Musisz używać narzędzi. Wbudowane w Chrome DevTools próbniki kolorów automatycznie pokazują linie odcięcia dla norm WCAG. Wystarczy otworzyć inspektora, kliknąć kwadracik koloru i spojrzeć na wykres.
W nowych specyfikacjach CSS pojawiają się przestrzenie barw takie jak oklch czy display-p3. Oklch oferuje perceptualną jednolitość jasności. Oznacza to, że każdy kolor o jasności 60% będzie wyglądał dla ludzkiego oka na tak samo jasny. Zmienia to reguły gry w budowaniu dostępnych palet. Chociaż prawdę mówiąc brakuje nam twardych danych na szerokie wsparcie w starych monitorach, więc wydaje się to opcją na najbliższe lata dla zaawansowanych aplikacji.
| Format | Składnia | Zastosowanie na froncie | Kanał Alfa |
| HEX | #2A9D8F |
Kopiowanie z programów graficznych, stałe palety. | Tak (8 znaków np. #2A9D8F80) |
| RGB | rgb(42, 157, 143) |
Precyzyjne manipulacje skryptowe. | Tak (poprzez RGBA) |
| HSL | hsl(173, 58%, 39%) |
Łatwe generowanie stanów hover i focus. | Tak (poprzez HSLA) |
| Nazwy | teal |
Prototypy, mockupy. | Nie |
Wywal z kodu wszystkie sztywne HEXy i przepisz to na zmienne CSS oparte o HSL. Zobaczysz różnicę przy pierwszym requeście od klienta o zmianę odcienia firmowego logo. Zostawiam cię z tym zadaniem. Otwórz edytor i zrób refaktor.
Najczęściej zadawane pytania (FAQ)
- Co robi właściwość background-color w CSS?
Służy do ustawiania barwy tła elementu HTML. Przyjmuje wartości HEX, RGB, HSL oraz nazwy angielskie. - Jak dodać przezroczystość do koloru w CSS?
Użyj formatu RGBA lub HSLA i ustaw czwarty parametr od 0 do 1. Alternatywnie możesz użyć 8-znakowego kodu HEX. - Czym różni się RGB od HEX?
To dwa sposoby zapisu tego samego koloru matrycy. RGB używa systemu dziesiętnego (0-255), a HEX systemu szesnastkowego. - Dlaczego zmienne CSS są lepsze od wpisywania kolorów na sztywno?
Pozwalają na zmianę palety barw całej witryny modyfikując tylko jedną linijkę w selektorze :root. Ułatwiają też wdrażanie Dark Mode. - Jakie są minimalne wymagania kontrastu WCAG?
Dla standardowego tekstu współczynnik kontrastu między tłem a czcionką musi wynosić co najmniej 4.5:1. - Czy można mieszać kolory bezpośrednio w CSS?
Tak. Nowa funkcja CSS color-mix() pozwala na łączenie dwóch barw w wyznaczonych proporcjach prosto w arkuszu stylów bez preprocesorów.
Bibliografia
1. World Wide Web Consortium (W3C) – https://www.w3.org
2. Mozilla Developer Network (MDN Web Docs) – https://developer.mozilla.org
3. WebAIM (Web Accessibility in Mind) – https://webaim.org
4. CSS-Tricks – https://css-tricks.com
