Artykuł
Narzędzia kolorów dla sieci: hex, palety i dostępność
Dobór kolorów do strony wygląda na proste zadanie, dopóki nie napotkasz kodów hex, trójek RGB i kątów HSL, które na różne sposoby opisują to samo. Ten artykuł wyjaśnia, jak te formaty są ze sobą powiązane, jak zamienić pojedynczy kolor marki w użyteczną paletę oraz jak zadbać, by wynik pozostał czytelny dla osób widzących barwy inaczej.
Hex, RGB i HSL opisują ten sam kolor
Kolor na ekranie powstaje z mieszania światła czerwonego, zielonego i niebieskiego. Zapis hex przedstawia te trzy kanały jako sześcioznakowy kod, na przykład #2563eb, gdzie każda para znaków to jeden kanał od 00 do ff. RGB zapisuje te same trzy liczby w systemie dziesiętnym, od 0 do 255, co jest łatwiejsze do odczytania, ale nie niesie nic więcej. HSL podchodzi do tematu inaczej: opisuje kolor przez jego barwę (pozycję na kole barw od 0 do 360 stopni), nasycenie (jak żywy jest) oraz jasność (jak blisko bieli lub czerni). HSL to format, po który sięgają projektanci, gdy chcą lekko zmodyfikować kolor, ponieważ zwiększenie jasności lub przesunięcie barwy to jedna intuicyjna zmiana, a nie trzy powiązane liczby. Konwerter pozwala przechodzić między wszystkimi trzema formatami, więc możesz odczytać wartość w jednym z nich i użyć jej w innym.
Zamiana jednego koloru w paletę
Pojedynczy kolor marki rzadko wystarcza. Działająca paleta zwykle potrzebuje koloru głównego, jednego lub dwóch akcentów oraz zestawu neutralnych szarości na tekst i tła. Relacje między kolorami opierają się na prostych regułach koła barw: kolory dopełniające leżą naprzeciwko siebie, kolory analogiczne sąsiadują ze sobą i dają spokojny efekt, a układ triadyczny rozmieszcza trzy kolory równomiernie, zapewniając kontrast bez kłócenia się. Narzędzie do schematów kolorów stosuje te reguły do twojego koloru wyjściowego i podaje pasujące kody hex, więc nie musisz wyliczać kątów ręcznie. Jeśli masz już obraz, którego nastrój ci odpowiada, ekstraktor palety odczytuje z niego dominujące kolory, co jest szybkim sposobem na oparcie strony na zdjęciu lub logo.
Kontrast i daltonizm
Paleta, która dobrze wygląda na twoim ekranie, wciąż może zawieść czytelników. Mniej więcej jeden na dwunastu mężczyzn i jedna na dwieście kobiet ma jakąś postać zaburzenia widzenia barw, najczęściej trudność w odróżnianiu czerwieni od zieleni. Jeśli jedynym sygnałem błędu jest czerwony tekst na zielonym przycisku, ci czytelnicy go przeoczą. Rozwiązaniem nie jest unikanie koloru, lecz nieopieranie się wyłącznie na nim: połącz go z ikoną, etykietą lub kształtem i zachowaj dostateczny kontrast jasności między tekstem a tłem. Symulator daltonizmu pokazuje, jak twoja paleta wygląda przy typowych rodzajach widzenia barw, więc problem wychwycisz przed publikacją, a nie po skardze.
Robienie tego wszystkiego w przeglądarce
Żaden z tych kroków nie wymaga serwera. Konwersja kodu hex, generowanie schematu, odczytywanie kolorów z obrazu i symulowanie daltonizmu to drobne obliczenia, które przeglądarka wykonuje natychmiast. Ma to znaczenie, gdy obraz, z którego pobierasz próbki, to niewydany projekt lub logo klienta: dzięki tutejszym narzędziom plik zostaje na twoim urządzeniu i nic nie jest wysyłane. Otrzymujesz taki sam wynik jak z usługi online, bez oddawania grafiki. Konwerter kolorów, generator schematów kolorów, ekstraktor palety i symulator daltonizmu działają lokalnie i tak samo funkcjonują offline po wczytaniu strony.
OKLCH i szersze przestrzenie barw
Hex, RGB i HSL opisują kolory w gamut sRGB, którego ekrany używają od lat. Nowsze wyświetlacze pokazują więcej i CSS może teraz to wykorzystać za pomocą funkcji color() oraz przestrzeni Display P3, która dodaje nasycone zielenie i czerwienie niemożliwe do odwzorowania w sRGB. Większą zmianą jest OKLCH: sposób opisywania koloru przez jasność, chroma i odcień, który odpowiada temu, jak oko faktycznie postrzega jasność. W HSL żółty i niebieski przy tej samej wartości 50% lightness wyglądają zupełnie inaczej: żółty sprawia wrażenie jasnego, niebieski ciemnego. W OKLCH, przy stałej wartości jasności i zmieniającym się tylko odcieniu, postrzegana jasność pozostaje jednakowa. Dzięki temu można praktycznie zbudować paletę, w której każdy odcień trafia w ten sam cel kontrastowy przez zablokowanie jednej liczby, zamiast ręcznego dobierania każdego koloru.
Narzędzia w tym artykule
- Konwerter kolorówKonwertuj kolory między HEX, RGB, HSL, HSV i CMYK. Narzędzie sprawdzania kontrastu WCAG dołączone. Bez przesyłania.
- Generator schematów kolorówGeneruj palety komplementarne, analogiczne, triadyczne, tetradyczne i monochromatyczne z koloru bazowego. Bez przesyłania.
- Ekstraktor palety kolorówWyodrębnij dominujące kolory z obrazu jako próbki HEX. Kopiuj dowolny kolor. Bez przesyłania.
- Symulator ślepoty barwSymuluj protanopię, deuteranopię, tritanopię i achromatopsję na obrazie. Bez przesyłania.
Najczęściej zadawane pytania
Jaka jest różnica między hex a RGB?
To dwa sposoby zapisu tego samego koloru. Hex pakuje kanały czerwony, zielony i niebieski w sześcioznakowy kod w systemie szesnastkowym, podczas gdy RGB wymienia te same trzy kanały jako liczby dziesiętne od 0 do 255. #ff0000 i rgb(255, 0, 0) to identyczna czerwień. Hex jest zwięzły i powszechny w CSS oraz plikach projektowych, RGB łatwiej odczytać na pierwszy rzut oka, a przeliczanie między nimi niczego nie zmienia w samym kolorze.
Skąd mam wiedzieć, czy moje kolory są czytelne dla osób z daltonizmem?
Przepuść swoją paletę przez symulator daltonizmu, który przerysowuje twoje kolory tak, jak widziałaby je osoba z każdym typowym rodzajem widzenia barw. Wypatruj par, które zlewają się w ten sam odcień, zwłaszcza czerwieni i zieleni. Najbezpieczniejszym nawykiem jest nieużywanie koloru jako jedynej wskazówki: wspomóż go tekstem, ikoną lub wzorem i zachowaj wyraźną różnicę jasności między pierwszym planem a tłem, by znaczenie przetrwało nawet wtedy, gdy barwa się nie utrzyma.