W nowoczesnych stronach kolory definiuje się przede wszystkim za pomocą kodów HEX lub RGB. Nazwy kolorów są ograniczone, a profesjonalna paleta powinna wynikać z celu strony, spójnej proporcji barw i sprawdzonego kontrastu.
Dlaczego kody HEX i RGB są lepsze niż nazwy kolorów?
CSS pozwala zapisywać kolor między innymi za pomocą nazwy, kodu HEX oraz wartości RGB. Nazwy są wygodne przy szybkim teście, ale nie dają precyzyjnej kontroli nad odcieniem. W projektach komercyjnych i rozbudowanych interfejsach lepiej stosować zapis liczbowy, który można łatwo przekazać projektantowi, wdrożyć w arkuszu CSS i wykorzystać ponownie.
Sprawdź także: Różnica między RGB a CMYK – kiedy stosować który model?
Kody HEX i RGB są standardowo obsługiwane przez CSS. Pozwalają wskazać dokładną wartość czerwieni, zieleni i niebieskiego, dlatego nie trzeba polegać na interpretacji ogólnej nazwy. Lista nazwanych kolorów jest ograniczona, a rozbudowane zestawienia znalezione w internecie często mieszają nazwy standardowe z dodatkowymi odcieniami.
Czym różni się HEX od RGB?
HEX to skrócony zapis szesnastkowy koloru. Sześć znaków po symbolu # opisuje trzy składowe barwy: czerwony, zielony i niebieski. Każda para ma wartość od 00 do FF. Zapis #FF0000 oznacza maksymalny udział czerwieni i brak zieleni oraz niebieskiego.
RGB to model addytywny, w którym każda składowa ma wartość dziesiętną od 0 do 255. Ten format jest czytelny podczas regulowania intensywności poszczególnych kanałów. Oba zapisy opisują ten sam zakres kolorów i mogą być używane w CSS zamiennie.
| Format | Przykład zapisu | Zastosowanie |
|---|---|---|
| HEX | #FF0000 |
Najczęściej używany w arkuszach CSS, zmiennych i dokumentacji projektu |
| RGB | rgb(255, 0, 0) |
Wygodny przy pracy ze składowymi koloru i funkcjami CSS |
| Nazwa | red |
Szybkie testy, lecz ograniczona kontrola nad odcieniem |
Przykład użycia w CSS może wyglądać tak:
.przycisk {
background-color: #2563EB;
color: rgb(255, 255, 255);
}Krótki zapis HEX jest możliwy wtedy, gdy każda para znaków składa się z dwóch identycznych znaków. Przykładowo #FFFFFF można zapisać jako #FFF, a #FF0000 jako #F00.
Jak profesjonalnie dobrać paletę kolorów?
Dobór barw powinien wynikać z charakteru strony. Serwis firmowy, sklep internetowy, portfolio i strona artystyczna mogą korzystać z innych kontrastów oraz poziomu nasycenia. Nie zaczynaj od wybierania kilkunastu przypadkowych odcieni. Najpierw ustal kolor bazowy, a potem zbuduj wokół niego ograniczony zestaw.
Polecamy: Paleta kolorów – jak dobrać idealne zestawienie barw?
Pomocna jest zasada 60-30-10. Około 60% interfejsu zajmuje kolor dominujący, na przykład tło, 30% kolor drugoplanowy używany w sekcjach lub kartach, a 10% wyrazisty akcent przeznaczony dla przycisków i ważnych elementów. To wskazówka, nie sztywny wymóg, ale pomaga ograniczyć chaos wizualny.
Proces tworzenia palety może wyglądać następująco:
- Wybierz kolor bazowy – dopasuj go do charakteru marki, odbiorców i celu strony.
- Dodaj kolor drugoplanowy – użyj odcienia pokrewnego albo neutralnego, który nie konkuruje z treścią.
- Ustal kolor akcentu – przeznacz go na działania, które mają przyciągać uwagę, takie jak przyciski lub komunikaty.
- Sprawdź zestaw na makiecie – oceń go na nagłówkach, tekście, formularzach i elementach aktywnych.
- Zweryfikuj kontrast – sprawdź, czy tekst pozostaje czytelny na każdym użytym tle.
Zamiast ręcznie przeglądać setki kodów, skorzystaj z generatorów palet. Przydatne narzędzia to:
- Coolors – szybkie tworzenie i modyfikowanie zestawów kolorów.
- Adobe Color – dobieranie barw według relacji znanych z teorii koloru.
- Canva Color Palettes – inspiracje i gotowe zestawienia przydatne na etapie koncepcji.
- Narzędzia do sprawdzania kontrastu – ocena czytelności pary tekst–tło przed wdrożeniem.
Generator powinien wspierać decyzję, a nie zastępować ocenę projektu. Paleta może wyglądać atrakcyjnie na dużych próbkach, lecz sprawdzać się słabo w menu, formularzu albo długim tekście. Na początku projektu zapisz wybrane wartości jako zmienne CSS, aby późniejsze korekty nie wymagały przeszukiwania całego arkusza.
Na co uważać przy wyborze kolorów?
Niski kontrast jest błędem dostępności, nawet gdy zestaw wygląda estetycznie. Wytyczne WCAG określają wymagania dotyczące czytelności tekstu i elementów interfejsu. Jasnoszary tekst na białym tle może być trudny do odczytania, podobnie jak cienki biały tekst na jasnym, nasyconym kolorze.
Sprawdzaj kontrast osobno dla zwykłego tekstu, dużych nagłówków, przycisków i stanów aktywnych. Nie przekazuj informacji wyłącznie kolorem, ponieważ część użytkowników może nie rozróżniać barw. Status formularza powinien być wskazany także tekstem, ikoną lub innym oznaczeniem.
Przed publikacją przetestuj paletę na różnych ekranach i w rzeczywistych komponentach. Estetyka ma znaczenie, ale w interfejsie pierwszeństwo zachowują czytelność, przewidywalność i łatwa obsługa.
Przeczytaj również: Paleta kolorów – nazwy i znaczenie barw
