Jak pobrać dokładny kolor z obrazu (eyedropper)?
Eyedropper z obrazu online - wgraj zdjęcie, zjedź myszką po pikselu i widzisz dokładny kolor (HEX, RGB, OKLCH). Klik - kolor trafia do palety.
Idealne dla designerów: pobranie kolorów z brand assetów, screenshotów konkurencyjnych stron, zdjęć produktów.
Wszystko działa lokalnie - obrazek nie wychodzi z przeglądarki.
Zwracamy też OKLCH (perceptually uniform color space) - nowoczesny standard w CSS od 2023, używany przez Tailwind v4.
Jak korzystać
- Wgraj zdjęcie - PNG, JPG, WebP, AVIF, HEIC.
- Najedź myszką nad obrazem - pod nim aktualnie wskazywany pixel z kolorem HEX i RGB plus współrzędne.
- Klik gdziekolwiek żeby dodać kolor do palety po prawej. Max 12 kolorów - nowsze wypierają starsze.
- Klik na HEX / RGB / OKLCH w palecie kopiuje wartość do schowka.
Do czego się przydaje
Gdzie eyedropper się przydaje - typowe sytuacje:
- Brand assets - dostałeś logo PNG od klienta, potrzebujesz dokładnych kolorów do CSS.
- Konkurencja - screenshot z konkurencyjnej strony, chcesz znać dokładny odcień ich akcentowego niebieskiego.
- Zdjęcia produktów - pobierasz średni kolor sukienki ze zdjęcia produktowego, żeby skomponować kolory tła w sklepie.
- UI design - wyeksportowany screenshot z Figmy / Sketcha, sprawdzasz finalne kolory po renderze.
- OKLCH workflow - jeśli pracujesz z modern CSS color (Tailwind v4, OKLCH design tokens), nasz tool zwraca dokładne OKLCH coordinates gotowe do wklejenia.
Pytania i odpowiedzi
Nie. Cała operacja lokalnie - obrazek wczytywany przez Canvas API, sampling pixela przez `getImageData`. DevTools → Network = brak requestów.