Description from extension meta
Pobierz dowolny kolor piksela z dowolnej strony internetowej i natychmiast skopiuj jego kod HEX.
Image from store
Description from store
Dokładność kolorów to nić, która spaja każdy piękny interfejs, zasób marki, panel wizualizacji danych i kampanię marketingową. Mimo to projektanci i inżynierowie front-end nadal marnują niezliczone minuty na mrużenie oczu na kody szesnastkowe w narzędziach programistycznych lub robienie zrzutów ekranu strony, aby wypróbować ją w Photoshopie. Eye Drop Tool — lekkie rozszerzenie przeglądarki zbudowane na Manifest V3 — zamienia to tarcie w jeden, elegancki gest: kliknij ikonę paska narzędzi, wybierz dowolny piksel w polu widzenia, a dokładna wartość #RRGGBB zostanie skopiowana do schowka. Subtelny toast potwierdza działanie i możesz wrócić do pracy, zanim Twój przepływ zostanie zakłócony.
Dlaczego to rozszerzenie jest ważne
Natywne dla przeglądarek selektory kolorów istnieją od lat, ale większość z nich jest głęboko zakopana w inspektorze, ograniczona do elementów w DOM lub zamknięta za prawym przyciskiem podmenu. Eye Drop Tool ukazuje tę samą moc w zawsze obecnym przycisku, który działa na wszystkim, co renderuje Twój monitor — obrazy, płótno, klatki wideo, pliki SVG, a nawet wtyczki innych firm.
Najważniejsze cechy
Aktywacja jednym kliknięciem – Brak wyskakującego okienka lub panelu ustawień. Pracownik usługi w tle natychmiast wstrzykuje skrypt zawartości selektora, utrzymując narzut pamięci bliski zeru w stanie bezczynności.
Universal Pixel Sampling – ponieważ rozszerzenie przechwytuje bufor ekranu, a nie drzewo DOM, działa równie dobrze na dynamicznie renderowanych scenach WebGL, grach i strumieniowanym wideo, jak na statycznym kodzie HTML.
Natychmiastowe kopiowanie do schowka – ciąg HEX jest automatycznie zapisywany w schowku. Można go wkleić bezpośrednio do Figmy, VS Code lub Slacka bez konieczności wywoływania pośredniego okna dialogowego.
Wizualne potwierdzenie – mikrointerakcja w rogu strony („#ffcc33 skopiowano!”) zapewnia, że akcja powiodła się i znika po 1,5 sekundy.
Korzyści dla użytkownika
Oszczędność czasu – Wyeliminuj objazdy do narzędzi deweloperskich lub zewnętrznych aplikacji. W trakcie sprintu projektowego te sekundy składają się na godziny.
Mniejsze obciążenie poznawcze – pozostawanie w tym samym kontekście umysłowym pozwala zachować twórczy przepływ; nie musisz żonglować oknami ani zmieniać skupienia.
Spójność na poziomie pikseli – szybka weryfikacja, czy kod produkcyjny jest zgodny z wytycznymi dotyczącymi stylu marki lub czy makiety marketingowe spełniają wymogi współczynnika kontrastu dostępności.
Zapobieganie błędom – ręczne wpisywanie kodów szesnastkowych grozi literówkami; kopiowanie do schowka eliminuje to ryzyko, co przekłada się na czystsze zatwierdzenia i mniejszą liczbę zgłoszeń błędów.
Grupy użytkowników docelowych
Projektanci UI/UX
Szybkie pobieranie próbek kolorów z prototypów na żywo w celu ponownego wykorzystania w systemach projektowych
Dopracowanie odcieni podczas sesji testowej Figmy
Programiści front-end
Sprawdź, czy zmienne CSS są poprawnie renderowane w różnych stanach
Najedź kursorem na przycisk w środowisku przygotowawczym i wybierz jego aktywny kolor
Inżynierowie ds. zapewnienia jakości
Potwierdź współczynniki kontrastu WCAG i zgodność marki
Podczas testów regresyjnych porównaj wersję produkcyjną ze specyfikacją
Marketingowcy cyfrowi i twórcy treści
Dopasuj grafikę ad-hoc do palety barw witryny
Przeciągnij niebieski baner bohatera, aby uzyskać kafelek społecznościowy na ostatnią chwilę