Selektor kolorów

Selektor kolorów to bezpłatne narzędzie, które pozwala wybrać kolor w przeglądarce i uzyskać jego wartość w potrzebnym formacie.

Co zwraca selektor kolorów?

Selektor kolorów zwraca liczbowy zapis koloru wybranego na kole barw. Ten sam widoczny kolor można przedstawić w kilku formatach, najczęściej jako wartość szesnastkową, RGB, RGBA, HSL lub HSLA.

Każdy z tych formatów opisuje kolor w inny sposób. Zapis szesnastkowy i RGB określają wartości kanałów czerwonego, zielonego i niebieskiego. HSL wykorzystuje odcień, nasycenie i jasność, co może ułatwiać systematyczne modyfikowanie kolorów. Formaty z kanałem alfa opisują również przezroczystość.

• Wartości szesnastkowe zaczynają się od znaku kratki, po którym występują cyfry szesnastkowe, na przykład #336699.
• Wartości RGB zwykle określają każdy kanał liczbą od 0 do 255, na przykład rgb(51, 102, 153).
• Wartości HSL opisują kąt odcienia oraz podane w procentach nasycenie i jasność, na przykład hsl(210, 50%, 40%).
• Formaty RGBA i HSLA uwzględniają przezroczystość. Wartość alfa 0 oznacza pełną przezroczystość, a 1 pełną nieprzezroczystość.

CSS obsługuje także nazwy kolorów, ale obejmują one tylko określony zestaw i gorzej nadają się do definiowania precyzyjnych tokenów projektowych. Wygenerowane wartości liczbowe zwykle łatwiej przenosić między systemami projektowymi, arkuszami stylów i kodem aplikacji.

Jak korzystać z selektora kolorów?

Wybierz pole Kolor, wskaż odpowiednie miejsce na kole barw, a następnie użyj otrzymanej wartości w formacie wymaganym przez aplikację. Wszystkie operacje odbywają się w przeglądarce, a wybrany kolor nigdy nie jest przesyłany na serwer.

Jeśli pracujesz nad istniejącym interfejsem, zacznij od formatu używanego już w kodzie. Unikniesz w ten sposób zbędnych konwersji kolorów, a przeglądanie pull requestów będzie łatwiejsze. Podczas analizowania danych zewnętrznych sprawdź, czy wartości uwzględniają przezroczystość, zanim zastąpisz je pozornie równoważnym kolorem.

Przed wdrożeniem wybierz lub odtwórz zamierzony kolor, skopiuj właściwy zapis i sprawdź go w rzeczywistym stanie komponentu. Osobno przetestuj stan normalny, najechanie kursorem, fokus i wyłączenie, ponieważ przezroczystość oraz dziedziczone style mogą zmienić ostateczny wygląd.

Jak odczytać wynik?

Odczytuj wynik zgodnie z użytym modelem kolorów i przed skopiowaniem go do kodu sprawdź ewentualny składnik alfa. W RGB wartość każdego kanału określa intensywność odpowiadającej mu składowej czerwonej, zielonej lub niebieskiej. W HSL odcień jest położeniem na kole barw, nasycenie określa intensywność koloru, a jasność wpływa na proporcję między czernią a bielą.

Składnia kolorów używanych w CSS lub danych strukturalnych musi być precyzyjna. Podczas ręcznej edycji często zdarzają się następujące błędy:

• pominięcie początkowego znaku kratki w szesnastkowej wartości CSS;
• użycie pięciu lub siedmiu cyfr szesnastkowych, co nie odpowiada żadnej standardowej długości zapisu hex;
• podanie wartości procentowych tam, gdzie implementacja RGB oczekuje liczbowych wartości kanałów;
• pominięcie przecinków w starszej składni RGB albo połączenie niezgodnej składni starszego i nowoczesnego typu;
• skopiowanie wartości z kanałem alfa do oprogramowania, które obsługuje wyłącznie sześciocyfrowy zapis hex;
• użycie przecinka dziesiętnego, na przykład 0,5, gdy CSS wymaga kropki dziesiętnej, na przykład 0.5.

Selektor generuje wartości kolorów, ale nie jest uniwersalnym walidatorem CSS. Nie potwierdza poprawności całej deklaracji, dokumentu JSON ani pliku motywu. Błędy składni znajdujące się poza wartością koloru trzeba więc sprawdzić odpowiednim parserem lub narzędziem programistycznym.

Przykłady konwersji kolorów

W sześciocyfrowym zapisie szesnastkowym kolejne pary cyfr odpowiadają kanałom czerwonemu, zielonemu i niebieskiemu. Poniższe zapisy opisują ten sam nieprzezroczysty kolor.

Wartość hex #336699

Odpowiednik RGB rgb(51, 102, 153)

Odpowiednik HSL hsl(210, 50%, 40%)

Trzycyfrowy zapis hex jest skrótem. Każdą cyfrę powtarza się, aby uzyskać wartość sześciocyfrową.

Skrócona wartość hex #fff

Rozwinięta wartość hex #ffffff

Odpowiednik RGB rgb(255, 255, 255)

Ośmiocyfrowy zapis hex zawiera kanał alfa po parach określających czerwony, zielony i niebieski. Zachowaj ostrożność w systemach, które stosują inną kolejność kanałów lub nie obsługują zapisu ośmiocyfrowego. Identycznie wyglądający jednolity kolor może też dać inny efekt, gdy przezroczystość zostanie zastosowana na innym tle.

Który format koloru wybrać?

Wybierz zapis koloru obsługiwany przez miejsce docelowe, chyba że istnieje wyraźny powód, aby go zmienić. Sześciocyfrowy zapis hex jest zwięzły i często stosowany w zmiennych CSS oraz plikach tokenów projektowych. RGB jest wygodny, gdy oprogramowanie bezpośrednio udostępnia wartości kanałów. HSL przydaje się natomiast podczas tworzenia powiązanych kolorów przez zmianę jasności lub nasycenia.

• Użyj sześciocyfrowego zapisu hex dla nieprzezroczystego koloru internetowego, jeśli liczą się zwięzłość i powszechna czytelność.
• Użyj ośmiocyfrowego zapisu hex tylko wtedy, gdy środowisko docelowe wyraźnie obsługuje w nim kanał alfa.
• Użyj RGB lub RGBA, gdy pracujesz z osobnymi kanałami czerwonym, zielonym i niebieskim.
• Użyj HSL lub HSLA do programowego tworzenia wariantów motywu na podstawie odcienia, nasycenia lub jasności.
• Użyj narzędzia Konwerter kolorów, jeśli masz już wartość i chcesz ją przeliczyć, zamiast wybierać nowy kolor wizualnie.

Nie traktuj wartości RGB wyświetlanej na ekranie jako specyfikacji do druku. Druk komercyjny może wymagać wartości CMYK, profilu kolorów ICC, wykonania odbitki próbnej i uzgodnień z drukarnią. Sama konwersja matematyczna nie gwarantuje, że wydrukowany kolor będzie odpowiadać obrazowi na podświetlanym ekranie.

Kiedy wybieranie lub konwertowanie koloru nie jest potrzebne?

Nie trzeba wybierać ani konwertować koloru, jeśli istniejąca wartość ma już format wymagany w miejscu docelowym. Wielokrotne konwersje mogą powodować różnice wynikające z zaokrągleń, niespójną wielkość liter lub niepotrzebne zmiany w plikach źródłowych.

Czasem lepiej też zachować nazwany token projektowy, na przykład zmienną motywu, zamiast zastępować go wartością zapisaną bezpośrednio. Tokeny utrzymują zależności między komponentami i pozwalają centralnie zmieniać kolor. Podobnie kolor używany wyłącznie przez maszynę nie potrzebuje zapisu czytelniejszego dla człowieka, chyba że ktoś musi go sprawdzać lub utrzymywać.

Sam selektor kolorów nie określi, czy wybrany kolor zapewnia odpowiedni kontrast, jest zgodny ze specyfikacją marki ani pozostaje rozróżnialny dla osób z zaburzeniami widzenia barw. Sprawdź połączenie koloru pierwszego planu i tła za pomocą osobnego narzędzia do badania kontrastu oraz oceń interfejs w rzeczywistym kontekście.

Najczęściej zadawane pytania

Czy mogę użyć wyniku w zmiennych CSS?

Tak, pod warunkiem że wybrany zapis jest prawidłową składnią CSS w obsługiwanych przeglądarkach i narzędziach do budowania projektu. Zapisz pełną wartość we właściwości niestandardowej, a następnie odwołuj się do niej za pomocą funkcji var(). Jeśli projekt operuje na osobnych kanałach, wygodniejsze może być zapisanie ich zgodnie z konwencją już stosowaną w projekcie.

Dlaczego ten sam kolor wygląda inaczej na innym ekranie?

Ekrany różnią się kalibracją, jasnością, technologią matrycy i obsługiwanym gamutem kolorów. Na sposób wyświetlania mogą też wpływać zarządzanie kolorami w przeglądarce oraz profil ekranu ustawiony w systemie operacyjnym. Zgodność wartości liczbowych nie gwarantuje więc identycznego wyglądu na każdym urządzeniu.

Czy wielkie i małe litery w zapisie hex zmieniają kolor?

Nie. Wielkość liter od A do F w zapisie szesnastkowym nie ma znaczenia, dlatego #AABBCC i #aabbcc oznaczają ten sam kolor. Stosuj konwencję przyjętą w repozytorium, aby uniknąć zmian dotyczących wyłącznie formatowania.

Czy wartość koloru może zawierać znaki diakrytyczne lub znaki spoza alfabetu łacińskiego?

Standardowy zapis szesnastkowy, RGB i HSL używa cyfr, liter oraz znaków interpunkcyjnych ASCII. Znaki diakrytyczne i znaki spoza alfabetu łacińskiego nie należą do składni tych liczbowych zapisów kolorów. Mogą występować w otaczających je nazwach zmiennych lub metadanych, jeśli pozwalają na to dany język i kodowanie pliku.

Czy przezroczysty kolor oznacza brak koloru?

Nie. Całkowicie przezroczysty kolor nadal ma wartości kanałów, choć same nie są widoczne. Te ukryte kanały mogą mieć znaczenie podczas animacji, interpolacji, komponowania obrazu lub późniejszych zmian przezroczystości. Zachowaj je, jeśli aplikacja korzysta z takiego działania.

Czy zaokrąglać dziesiętne wartości kanałów?

Dziesiętne wartości kanałów kolorów i kanału alfa zaokrąglaj tylko do precyzji obsługiwanej przez miejsce docelowe i potrzebnej do uzyskania spójnego wyniku. Nadmierna precyzja utrudnia przeglądanie wartości, natomiast zbyt mocne zaokrąglenie może spowodować niewielką różnicę koloru. Po zaokrągleniu sprawdź wygląd komponentu na docelowym tle i w poszczególnych stanach interakcji.