Próbnik kolorów

Każdy kolor na tej stronie jest zapisany w sRGB, domyślnej przestrzeni barw w internecie, odkąd przeglądarki przyjęły ją pod koniec lat 90. Ekran miesza światło czerwone, zielone i niebieskie, a każdy kanał ma 256 poziomów (0–255), co daje 16 777 216 możliwych kolorów. RGB zapisuje te trzy liczby wprost, a HEX zapisuje te same trzy liczby w systemie szesnastkowym, po dwie cyfry na każdą, więc #FF6600 to czerwony 255, zielony 102, niebieski 0. Skrócony zapis trzycyfrowy podwaja każdą cyfrę: #F60 to #FF6600.

HSL i HSB (zwane też HSV) opisują te same kolory w sposób łatwiejszy do ręcznej korekty. Odcień to kąt na kole barw: 0° czerwony, 120° zielony, 240° niebieski. Różnica tkwi w ostatniej liczbie. W HSL jasność 100% to zawsze biel, a 50% to najczystsza wersja odcienia; w HSB jasność 100% to czysty odcień, a biel wymaga nasycenia 0%. Programy graficzne, takie jak Photoshop i Figma, używają HSB w swoich próbnikach, a CSS natywnie rozumie hsl(), dlatego powyżej podano oba.

Ekrany dodają światło, a drukarki je odejmują za pomocą farb cyjan, magenta, żółtej i czarnej. Oba systemy obejmują różne zakresy kolorów, zwane gamutami. Bardzo nasycone kolory ekranowe, takie jak jaskrawa zieleń RGB, elektryczny niebieski czy neonowy pomarańczowy, leżą poza zakresem, który potrafią odtworzyć farby procesowe, więc w druku wyglądają matowiej niż na monitorze.

Wartości CMYK podane tutaj pochodzą z prostej konwersji matematycznej bez profilu ICC, co przydaje się do wstępnego zlecenia, ale nie do drukarni. Drukarnia konwertuje kolory z profilem dla swojego papieru i maszyny, takim jak FOGRA39 w Europie lub GRACoL w Stanach Zjednoczonych, a ten sam kolor RGB może dać w każdym z nich inne procenty farb. Do druku wyślij wartość RGB lub HEX razem z profilem, o który prosi drukarnia.

WCAG 2.1 porównuje luminancję względną dwóch kolorów: jaśniejszy plus 0,05 podzielony przez ciemniejszy plus 0,05. Wynik mieści się w zakresie od 1:1 (identyczne kolory) do 21:1 (czerń na bieli). Poziom AA wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego, czyli 18 punktów lub 14 punktów pogrubionego; poziom AAA podnosi to do 7:1 i 4,5:1. Elementy interfejsu, takie jak obramowania pól i ikony, wymagają 3:1 względem otoczenia według kryterium sukcesu 1.4.11.

Luminancja przypisuje zieleni znacznie większą wagę niż błękitowi, bo oko jest na nią najczulsze. Dlatego żółty tekst na białym tle wypada fatalnie, a ciemnoniebieski na białym przechodzi bez problemu, choć oba kolory wyglądają na w pełni nasycone. Logo i tekst czysto dekoracyjny są z tej reguły wyłączone.

Paleta z obrazu odczytuje plik za pomocą elementu canvas przeglądarki, zmniejsza go do najwyżej 200 pikseli na dłuższym boku i grupuje podobne piksele metodą median cut opisaną przez Paula Heckberta w 1982 roku: zakres kolorów jest wielokrotnie dzielony wzdłuż najszerszego kanału, aż zostanie sześć grup, a średnia z każdej grupy staje się próbką. Przezroczyste piksele są pomijane, więc logo na przezroczystym tle daje kolory samego logo.

Gdy masz już kolory, płaskie logo często lepiej sprawdza się jako grafika wektorowa. Konwerter obrazu do SVG zamienia je na kształty zachowujące dokładnie te kolory, a jeśli projektujesz nagłówek kanału, zmiana rozmiaru banera YouTube dopasuje grafikę do 2560 × 1440 z uwzględnieniem bezpiecznego obszaru.