Pobierz dokładne kolory z dowolnego zrzutu ekranu
Kolory powstają w plikach projektu, a lądują na zrzutach ekranu – i jedno nie zawsze zgadza się z drugim. To narzędzie odczytuje rzeczywiste piksele każdego dodanego obrazka, więc zamiast zgadywać, poznasz kod koloru z obrazka. Wszystko działa w przeglądarce dzięki API elementu canvas, które odczytuje kolory prosto ze zdekodowanych pikseli.
Jak korzystać z pipety
- Dodaj obrazek. Upuść plik, kliknij, aby go wybrać, albo wklej zrzut ekranu prosto ze schowka skrótem ⌘V. Na telefonie stuknij kartę i wybierz zdjęcie.
- Wyceluj lupą. Przesuń wskaźnik myszy nad obrazek albo – na telefonie – dotknij go i przytrzymaj: lupa powiększa siatkę 11×11 pikseli wokół tego punktu i na bieżąco pokazuje kod HEX, więc trafisz dokładnie w piksel, o który Ci chodzi.
- Pobierz kolor i dopasuj. Kliknij – albo unieś palec – aby pobrać kolor. Każdy pobrany kolor trafia do paska historii i pokazuje wartości HEX, RGB i HSL z przyciskami kopiowania jednym dotknięciem, a klawisze strzałek (lub strzałki na ekranie) przesuwają wybór o jeden piksel.
- Weź paletę. Sześć dominujących kolorów jest wyodrębnianych od razu po wczytaniu – to wbudowany generator palety kolorów z obrazka. Kliknij dowolną próbkę, aby skopiować jej kod HEX.
W przeglądarkach opartych na Chromium pojawia się też przycisk pobierania koloru z ekranu: pipeta online, która pobiera dowolny piksel widoczny na ekranie, nawet poza obrazkiem.
Kiedy pobranie koloru z obrazka wygrywa z otwieraniem pliku projektu
Najczęstszy przypadek to sprawdzenie, czy wyrenderowany efekt zgadza się ze specyfikacją. Projekt mówi, że przycisk ma kolor #2F6BFF; zrzut ekranu od testerów pokazuje, co faktycznie trafiło do produkcji, gdy motywy, krycie i mieszanie warstw zrobiły swoje. Pobranie koloru ze zrzutu rozstrzyga sprawę w kilka sekund. Drugi ważny przypadek to odtworzenie palety, gdy nie ma żadnego pliku źródłowego – stary projekt, którego plik w Figmie dawno przepadł, strona docelowa konkurencji, sfotografowany plakat. Automatyczna paleta daje rzetelne próbki na start, a lupa – dokładne wartości z jednolitych obszarów.
Sprawdzanie kolorów rzadko kończy się na samym sprawdzeniu. Jeśli ten sam zrzut ekranu trafi do zgłoszenia błędu, zaznacz niezgodność w naszym edytorze zrzutów ekranu; jeśli trafi do prezentacji, dodaj mu ładną oprawę w narzędziu Mockup zrzutu ekranu.
HEX, RGB i HSL w skrócie
HEX
Kod HEX to sześciocyfrowy, szesnastkowy zapis koloru – po dwie cyfry na czerwony, zielony i niebieski, więc #2F6BFF oznacza 47 dla czerwonego, 107 dla zielonego i 255 dla niebieskiego. To standard w CSS, narzędziach projektowych i księgach znaku – skopiuj go, aby przenieść kolor bez zmian z jednego narzędzia do drugiego.
RGB
rgb(47, 107, 255) zapisuje te same trzy kanały dziesiętnie, każdy w zakresie 0–255. Jest dokładnie tak samo precyzyjny jak HEX, tylko łatwiej go czytać i zmieniać kanał po kanale – a gdy w grę wchodzi przezroczystość, naturalnie przechodzi w rgba().
HSL
HSL opisuje kolor tak, jak myślą o nim ludzie: odcień jako kąt na kole barw, a nasycenie i jasność w procentach – hsl(223, 100%, 59%) to ten sam niebieski. Skopiuj go, gdy chcesz wyprowadzić z koloru stan hover albo jaśniejsze odcienie – zmień jasność, zachowaj odcień.
Dlaczego pobrany piksel może różnić się od wartości w CSS
Większość niespodzianek ma dwie przyczyny. Pierwsza to wygładzanie krawędzi (antyaliasing): na krawędzi tekstu lub zaokrąglonego narożnika renderer miesza kolor pierwszego planu z tłem, więc piksele krawędzi nie należą do żadnego z tych kolorów – lupa istnieje właśnie po to, żeby zejść z krawędzi i pobrać kolor z jednolitego wypełnienia. Druga to zarządzanie kolorem: zrzut ekranu zrobiony na wyświetlaczu o szerokiej gamie barw (nowsze komputery Mac oznaczają zrzuty profilem Display P3) przechodzi konwersję profilu, zanim jego piksele trafią na tę stronę, co może przesunąć kanał o jeden, dwa punkty. Żadne z tych zjawisk nie jest błędem – oba wiernie oddają to, co pokazywał ekran. Gdy liczy się dokładność, pobieraj kolor ze środka jednolitych obszarów, na zrzutach z tego samego komputera.
Najbardziej pomaga czysty materiał wyjściowy. Na Macu funkcja Pobierz kolor w Snapixie (⌃⌥C) w ogóle pomija plik: odczytuje dowolny piksel na ekranie pod powiększającą lupą i kopiuje jego kod HEX, bez eksportu i kompresji po drodze.