Próbnik kolorów z obrazu

Gdy potrzebujesz dokładnego koloru, a nie koloru, który jest bliski

Przebudowujesz markę, a jedynym punktem odniesienia jest stare logo. Dopasowujesz przycisk do zrzutu ekranu strony, którą lubisz. Wypatrzyłeś odcień na zdjęciu i chcesz użyć go we własnym projekcie. W każdym przypadku problem jest ten sam: Twoje oko nie odczyta kodu hex z ekranu. „Ten morski" to naprawdę tuzin nieco różnych morskich, a monitory przesuwają je dalej. Potrzebujesz liczby, którą piksel faktycznie zawiera.

To właśnie robi to narzędzie. Wczytaj obraz, przesuń się po nim, a lupa powiększająca podąża za kursorem, pokazując piksele pod spodem, powiększone, byś mógł wylądować na tym precyzyjnym, którego chcesz. Kliknij, a ten kolor jest zapisywany jako próbka. Każda próbka wypisuje swoją wartość HEX, RGB i HSL z przyciskiem kopiowania obok każdej, więc idziesz prosto od piksela w obrazie do kodu w schowku.

Obraz nigdy nie opuszcza Twojej maszyny. Piksele są odczytywane lokalnie w przeglądarce z płótna — nic nie jest wysyłane, nie ma konta, a gdy strona się wczyta, działa dalej z wyłączoną siecią. To jest sedno, gdy „obrazem" jest niewydana makieta, zasób marki klienta albo wewnętrzny zrzut ekranu, którego nie powinieneś oddawać przypadkowemu narzędziu webowemu.

Jak to działa w praktyce

• Lupa jest do precyzji. Logo i interfejsy mają twarde krawędzie, gdzie kolor zmienia się na przestrzeni pojedynczego piksela — antyaliasing oznacza, że sąsiedni piksel to mętna mieszanka. Powiększony widok pozwala zobaczyć dokładnie, na którym pikselu jesteś, zanim się zdecydujesz, więc wybierasz płaski kolor marki, a nie krawędź.
• Każde kliknięcie zachowuje próbkę. Próbkowanie nie jest jedno-naraz-i-znika. Klikaj po obrazie, a każdy kolor układa się w listę, więc możesz wyciągnąć kolor podstawowy logo, jego akcent i kolor tekstu w jednym przejściu i porównać je obok siebie.
• Trzy formaty, jeden wybór. Każda próbka pokazuje HEX, RGB i HSL naraz. Nie próbkujesz od nowa, by zmienić format — ten sam kolor już tam siedzi we wszystkich trzech, każdy z własnym przyciskiem kopiowania.

HEX, RGB, HSL — który skopiować

To trzy sposoby zapisania tego samego koloru, a właściwy zależy od tego, dokąd idzie.

• HEX (#3A7BD5) to domyślny dla sieci — CSS, większość narzędzi projektowych, dokumenty marki. Zwięzły i uniwersalnie wklejalny. Kopiuj ten, chyba że masz powód, by nie.
• RGB (rgb(58, 123, 213)) wypisuje kanały czerwony, zielony i niebieski. Przydatny, gdy narzędzie chce wartości kanałów, gdy potrzebujesz kanału alfa (rgba) albo gdy rozważasz, jak kolor jest zmieszany.
• HSL (hsl(215, 65%, 53%)) opisuje barwę, nasycenie i jasność. To ten, po który sięgasz, gdy chcesz dostroić kolor, a nie tylko go ponownie użyć — podbij jasność dla stanu najechania, ściągnij nasycenie dla stonowanego wariantu, zachowaj barwę i zbuduj skalę.

Jedno uczciwe ograniczenie i narzędzie siostrzane

To próbnik punktowy: każde kliknięcie odczytuje pojedynczy piksel. Na czystym logo lub płaskim interfejsie to dokładnie to, czego chcesz. Na zaszumionym zdjęciu — ziarno, gradienty, artefakty JPEG — dwa sąsiednie piksele mogą się różnić, więc wybieraj z płaskiego obszaru i użyj lupy, by uniknąć wylądowania na wartości odstającej. Nie ma tu pędzla uśredniającego obszar.

A jeśli w ogóle nie chcesz wybierać ręcznie, img.diy ma osobne narzędzie palety, które skanuje cały obraz i podaje jego dominujące kolory automatycznie. Oba odpowiadają na różne pytania. Narzędzie palety mówi Ci, z jakich kolorów ten obraz jest zbudowany; próbnik koloru pozwala wskazać jeden konkretny piksel — to dokładne miejsce na logo, ten jeden przycisk — i wziąć jego wartość. Sięgaj po narzędzie palety, by podsumować obraz, a po to, gdy już znasz punkt, którego chcesz.

Wczytaj obraz, najedź, by znaleźć piksel, kliknij, by go zachować, skopiuj format, którego potrzebujesz.