Pipeta kolorów z obrazu: kody HEX i RGB
Wykres z PDF-a trafił do ciebie jako zrzut ekranu, a ktoś pyta o jego dokładny niebieski. Pipeta kolorów z obrazu odpowiada jednym kliknięciem: pokazuje kolor piksela jako HEX i RGB. Dodatkowo narzędzie skanuje cały obraz i wypisuje do ośmiu częstych kolorów jako próbki. To dobry start, gdy przycisk ma pasować do logo ze zrzutu ekranu albo tekst do koloru nieba na zdjęciu.
Od pliku do schowka
- Kliknij pole wczytywania albo przeciągnij na nie obraz. Okno wyboru pliku przyjmuje każdy typ obrazu, który otworzy przeglądarka; PNG, JPG i WebP to bezpieczny wybór.
- Kliknij punkt na obrazie. Duże pole pokazuje kolor, a pola HEX i RGB się wypełniają.
- Przycisk kopiowania obok Kod HEX lub Kod RGB wkłada wartość do schowka.
- Kliknięcie próbki w palecie ustawia ją jako bieżący kolor i kopiuje jej kod HEX.
- Przycisk Inny obraz pozwala zacząć z nowym plikiem.
Skąd bierze się osiem próbek
Narzędzie pobiera około 10 000 pikseli, pomija te w większości przezroczyste i zaokrągla każdy kanał do kroków po 16. Potem liczy grupy i pokazuje osiem najczęstszych. Próbka może więc różnić się od prawdziwego piksela nawet o 8 na kanał. Dokładną wartość da kliknięcie w sam obraz.
Czego tu nie ma
- Podglądu po najechaniu myszą.
- Wartości HSL.
- Kanał alfa nie jest pokazywany, tylko HEX i RGB.
Duży plik, szumiące zdjęcie
Kliknięcie czyta jeden piksel w oryginalnym rozmiarze pliku, choć podgląd ma najwyżej 400 pikseli wysokości. W zdjęciu z szumem sąsiednie piksele potrafią różnić się o kilka stopni, więc przy dziwnej wartości kliknij drugi raz. Bardzo duży obraz analizuje się chwilę, bo do palety czytany jest w całości.
Co dzieje się z plikiem
Plik czyta FileReader, a rysuje go canvas w przeglądarce. Piksele odczytuje getImageData z tego canvasu. Otwarcie obrazu i kliknięcie koloru nie wysyłają żadnego żądania. Sprawdzisz to w zakładce sieci w narzędziach deweloperskich. Schowek jest używany tylko po kliknięciu przycisku kopiowania lub próbki.