Działanie narzędzia HEX Color from Image i jego interfejs
Narzędzie na stronie HEX Color from Image umożliwia pobranie próbki koloru z dowolnego piksela wczytanego obrazu. Po wybraniu pliku z urządzenia – obsługiwane formaty to PNG, JPG, WebP, GIF, AVIF oraz HEIC – obraz wyświetla się w oknie próbkowania. Od razu widoczne są jego wymiary (szerokość × wysokość) oraz dane kolorystyczne piksela znajdującego się w środku: kod szesnastkowy, wartości RGB i HSL. To daje punkt wyjścia do dalszej pracy bez konieczności wykonywania dodatkowych czynności.
Gdy obraz jest gotowy, na ekranie pojawia się komunikat „Image ready — move over it to sample, click to save a color.” Przesuwanie kursora nad obrazem próbkuje kolory piksel po pikselu, a współrzędne x, y aktywnego punktu są wyświetlane w czasie rzeczywistym. Kliknięcie w obraz zapisuje aktualnie próbkowany kolor do historii, a chwilę później pojawia się potwierdzenie: „Saved #AABBCC to your picks.” (gdzie AABBCC to konkretny kod szesnastkowy). Wszystkie trzy reprezentacje koloru – szesnastkowa, RGB i HSL – można skopiować jednym kliknięciem: kliknięcie na dowolną z wartości kopiuje ją do schowka.
Narzędzie udostępnia również nawigację klawiszową. Za pomocą strzałek można przesuwać celownik po obrazie. Przytrzymanie klawisza Shift podczas naciskania strzałki powoduje przesunięcie o 10 pikseli zamiast domyślnego 1 piksela. Naciśnięcie Enter lub Spacji zapisuje aktualnie wskazany kolor do historii – to samo, co kliknięcie myszą.
Dlaczego HEX, a nie RGB lub HSL?
Główną cechą odróżniającą tę stronę od siostrzanych narzędzi (skupiających się na notacji funkcyjnej RGB lub HSL) jest to, że podstawowym wynikiem jest sześcioznakowy kod szesnastkowy, np. #1E90FF. Jest to standardowa notacja w CSS i większości programów graficznych, używana do definiowania kolorów bez dodatkowych nawiasów i przecinków. Kod szesnastkowy składa się z trzech par cyfr szesnastkowych: po dwie na czerwony (RR), zielony (GG) i niebieski (BB). W odróżnieniu od notacji rgba() nie ma w nim miejsca na kanał alfa – przezroczystość jest raportowana osobno jako „Alpha n% – this pixel is partly transparent.” (gdzie n to wartość procentowa).
Format szesnastkowy jest preferowany w projektowaniu interfejsów, bo jest zwarty, nie wymaga dodatkowej składni i jest obsługiwany przez absolutnie wszystkie przeglądarki i narzędzia. Gdy projektant potrzebuje podać kolor tła w CSS, wystarczy wpisać background-color: #1E90FF; – bez żadnych nawiasów. Dla programistów front-endowych oznacza to mniej znaków do wpisania i mniejsze ryzyko pomyłki składniowej w porównaniu z rgb(30, 144, 255). Narzędzie jest więc naturalnym wyborem, gdy potrzebujesz gotowej wartości szesnastkowej do skopiowania i wklejenia bezpośrednio do arkusza stylów.
Precyzja próbkowania – myszka, klawiatura i lupa
Próbowanie koloru z obrazu nie zawsze jest trywialne. Obrazy skompresowane (np. JPEG) lub zawierające antyaliasing mają piksele, które mogą się różnić nawet w obrębie pozornie jednolitej powierzchni. Dlatego precyzyjne wskaźniki są tu kluczowe. Narzędzie wyposażono w powiększenie obszaru wokół kursora, które pomaga wycelować dokładnie w zamierzony piksel. Dzięki niemu widać granice między pikselami, co ma znaczenie przy próbkowaniu w miejscach o ostrych krawędziach lub gradientach.
Alternatywą dla myszy jest nawigacja klawiszowa opisaną wyżej. Strzałki przesuwają celownik o jeden piksel, a Shift + strzałka o dziesięć. To rozwiązanie docenią osoby, które potrzebują powtarzalności lub mają problemy z precyzją myszy. W połączeniu z lupą daje to pełną kontrolę nad wyborem pojedynczego piksela, nawet w obrazie o wysokiej rozdzielczości.
Ważnym ograniczeniem jest to, że narzędzie odczytuje wartość piksela dokładnie tak, jak jest zapisana w pliku. Jeśli obraz został poddany kompresji (zwłaszcza JPEG) lub antyaliasingowi, wartość pobranego koloru może się różnić od tego, co ludzkie oko postrzega jako „jednolity” kolor tła. W przypadku zdjęć i screenshotów są to częste zjawiska. To samo dotyczy przezroczystości: jeśli piksel jest półprzezroczysty, jego kolor jest odczytywany niezależnie od tego, co znajduje się za nim. Narzędzie nie symuluje mieszania kolorów z tłem – podaje surową wartość piksela z kanałem alfa.
Historia kolorów i operacje na schowku
Każdy kolor zapisany kliknięciem (lub klawiszem Enter/Space) trafia do historii wyświetlanej pod obrazem. Historia przechowuje maksymalnie 12 pozycji. Gdy osiągnie limit, nowe zapisane kolory będą wypierać najstarsze, ale nie ma informacji o tym w arkuszu faktów – to zachowanie jest domyślne dla wielu narzędzi tego typu, jednak opisujemy tylko to, co potwierdzono: limit 12. Kolory o identycznych wartościach RGB, ale różnych wartościach alfa są zapisywane jako osobne wpisy, co ma znaczenie przy próbkowaniu przezroczystych obszarów.
Każdy wpis w historii to miniatura (swatch) z kodem szesnastkowym. Kliknięcie w miniatury nie powoduje niczego poza załadowaniem koloru z powrotem do wyświetlacza (czyli jego wartości pojawiają się w polach HEX, RGB, HSL) – to przydatne, gdy chcesz ponownie skopiować starszy kolor. Kliknięcie na dowolną wartość koloru (HEX, RGB lub HSL) kopiuje ją do schowka. Jeśli przeglądarka zablokuje dostęp do schowka, wyświetli się komunikat „Could not copy – your browser blocked clipboard access.” W praktyce zdarza się to głównie w kontekście niezabezpieczonego połączenia HTTP lub w niektórych przeglądarkach z rygorystycznym blokowaniem API schowka.
Obsługa błędów i ograniczenia techniczne
Narzędzie ma kilka wyraźnych reguł na wypadek problemów. Jeśli użytkownik spróbuje wczytać plik o nieobsługiwanym formacie (np. BMP, TIFF, RAW), pojawi się komunikat: „That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Lista obsługiwanych typów MIME to: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Jeśli plik jest uszkodzony lub ma nieznany format, który nie może być otwarty przez przeglądarkę, pojawi się: „That image could not be opened. It may be corrupted or in an unsupported format.”
Istotnym ograniczeniem jest rozmiar obrazu. Jeśli dłuższy bok przekracza 4096 pikseli, obraz zostanie przeskalowany (proporcjonalnie) tak, aby najdłuższy bok miał dokładnie 4096 pikseli. W ten sposób narzędzie unika przeciążenia pamięci przeglądarki, a użytkownik nadal może próbkować kolory – choć z mniejszą liczbą pikseli. Skalowanie wpływa na dokładność, bo piksele są uśredniane, ale dla większości zastosowań (pobranie koloru z logo, zdjęcia, screenshotu) jest wystarczające.
Przycisk „Start over” resetuje narzędzie do stanu początkowego: usuwa obraz, czyści historię kolorów i przywraca początkowy ekran bez żadnych danych. To pozwala rozpocząć od nowa bez odświeżania strony.
Zastosowania w praktyce
Narzędzie jest projektowane przede wszystkim dla:
- Projektantów interfejsów – potrzebujących pobrać dokładny kolor z mockupu, zdjęcia referencyjnego lub istniejącej strony, aby odwzorować go w projekcie w Figmie, Sketchu czy Adobe XD.
- Programistów front-endowych – którzy szukają gotowej wartości szesnastkowej do użycia w CSS, np. do
color: #1E90FF;lubbackground-color: #1E90FF;. Dzięki zwykłemu kliknięciu w wyświetlony kod, trafia on bezpośrednio do schowka, gotowy do wklejenia w arkuszu stylów. - Twórców treści – którzy dobierają kolory do miniaturek, grafik w mediach społecznościowych, brandingu lub materiałów marketingowych na podstawie istniejących zdjęć.
- Wszystkich, którzy muszą skopiować kolor z obrazu – np. by dopasować się do logo firmy, ujednolicić paletę barw w projekcie lub po prostu sprawdzić, jaki odcień ma konkretny element na zdjęciu.
Kluczową zaletą jest praca całkowicie po stronie klienta – obraz nie jest wysyłany na serwer. To oznacza prywatność (dane nie opuszczają urządzenia) i szybkość działania, ponieważ nie ma opóźnień związanych z przesyłem pliku na zewnętrzny serwer. Narzędzie jest dostępne offline tylko wtedy, gdy strona została wcześniej załadowana (to zależy od konfiguracji przeglądarki, ale samo przetwarzanie nie wymaga połączenia).
FAQ
Jakie formaty obrazów są obsługiwane?
Obsługiwane formaty to PNG, JPG, WebP, GIF, AVIF oraz HEIC. Odpowiednie typy MIME to image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Pliki w innych formatach (np. BMP, TIFF) nie będą akceptowane.
Ile kolorów mogę zapisać w historii? Historia przechowuje maksymalnie 12 zapisanych kolorów. Jeśli zapiszesz więcej, najstarsze wpisy zostaną usunięte. Kolory o tych samych wartościach RGB, ale różnych wartościach alfa są traktowane jako osobne pozycje.
Co się dzieje, gdy obraz ma przezroczyste piksele? Narzędzie odczytuje surową wartość piksela, łącznie z kanałem alfa. Jeśli piksel jest półprzezroczysty, wyświetli się komunikat „Alpha n% – this pixel is partly transparent.” Kod szesnastkowy (sześcioznakowy) nie zawiera informacji o przezroczystości – ta jest podana osobno jako procent. Nie ma symulacji mieszania z tłem.
Czy mogę używać klawiatury zamiast myszy? Tak. Strzałki przesuwają celownik o 1 piksel, a Shift + strzałka o 10 pikseli. Naciśnięcie Enter lub Spacji zapisuje aktualnie wskazany kolor. To przydatne, gdy potrzebujesz większej precyzji lub masz ograniczoną sprawność manualną.
Dlaczego obraz został przeskalowany? Jeśli dłuższy bok obrazu przekracza 4096 pikseli, narzędzie automatycznie go zmniejsza tak, aby najdłuższy bok miał 4096 pikseli. To zapobiega przeciążeniu pamięci przeglądarki i zapewnia płynne działanie. Mimo skalowania, nadal możesz próbkować kolory – ale pamiętaj, że uśrednione piksele mogą nie odzwierciedlać dokładnie oryginalnych wartości.
Co zrobić, gdy pojawi się komunikat o błędzie wczytania obrazu? Sprawdź, czy plik nie jest uszkodzony i czy ma obsługiwany format. Jeśli obraz jest w formacie obsługiwanym (np. PNG), ale nie można go otworzyć, może być uszkodzony lub mieć nieprawidłową strukturę. Spróbuj zapisać go ponownie lub użyć innego pliku. W przypadku nieobsługiwanego formatu pojawi się wyraźny komunikat, aby użyć PNG, JPG, WebP, GIF, AVIF lub HEIC.