Kolor z obrazka (pipeta kolorów)
Kolor z obrazka odczytasz w kilka sekund: otwórz plik przez wybór pliku, przeciągnij go lub wklej skrótem Ctrl + V, a potem kliknij lub dotknij wybrane miejsce. Pipeta pokaże kolor piksela jako HEX, RGB i HSL oraz wyznaczy główne kolory obrazu. Obraz nigdy nie jest wysyłany.
Jak to obliczamy
Twój obraz zostaje na Twoim urządzeniu
Pipeta działa w całości w przeglądarce: obraz jest dekodowany lokalnie i rysowany na elemencie canvas, a wartość koloru jest odczytywana prosto z pamięci funkcją getImageData(). Nic nie jest wysyłane i żadne zapytanie sieciowe nie zawiera danych obrazu; po zamknięciu strony obraz znika. Tylko dla zdjęć HEIC, których przeglądarka nie otworzy sama, z tej strony jednorazowo pobierany jest dekoder – zdjęcie i tak pozostaje lokalnie.
Jak pobrać kolor z obrazka
- Wybierz obraz, przeciągnij go do pola lub wklej skrótem Ctrl + V (np. zrzut ekranu).
- Kliknij lub dotknij wybranego miejsca. Na klawiaturze strzałki przesuwają pipetę piksel po pikselu.
- Skopiuj wartość HEX, RGB lub HSL. Osiem ostatnio wybranych kolorów zostaje na ekranie jako próbki.
Jak wyznaczane są główne kolory
Do wyznaczenia głównych kolorów obraz jest zmniejszany tak, by dłuższy bok miał najwyżej 200 pikseli. Każdy nieprzezroczysty piksel trafia do jednego z 4096 przedziałów kolorów (16 poziomów na kanał). Najczęstsze przedziały, które wyraźnie się od siebie różnią, dają do sześciu głównych kolorów; procent to ich udział we wszystkich nieprzezroczystych pikselach. To prosta kwantyzacja – dobra do ogólnego podglądu, ale nie jest pomiarem koloru.
Dlaczego wartość może się różnić od oryginału
- Profile kolorów: przeglądarki przeliczają obrazy z osadzonym profilem (np. Display P3 ze smartfona) na sRGB. Pipeta pokazuje wartość sRGB, której użyjesz w CSS – program graficzny pracujący w P3 pokaże inne liczby.
- Kompresja: JPEG i WebP zapisują kolory stratnie, więc sąsiednie piksele w „jednolitym” obszarze mogą się różnić o kilka poziomów.
- Bardzo duże obrazy (ponad 4096 pikseli na boku) są zmniejszane do odczytu, co uśrednia sąsiednie piksele. Podana pozycja odnosi się do oryginalnego obrazu.
Najczęściej zadawane pytania
Czy mój obraz jest wysyłany lub zapisywany?
Nie. Obraz jest przetwarzany wyłącznie w pamięci przeglądarki i nigdzie nie jest wysyłany. Nic nie jest też zapisywane w pamięci przeglądarki (localStorage).
Jak pobrać kod koloru ze zrzutu ekranu?
Zrób zrzut ekranu (np. w Windows: Win + Shift + S; na Macu Cmd + Ctrl + Shift + 4 kopiuje go do schowka), kliknij tę stronę i naciśnij Ctrl + V (na Macu Cmd + V). Kliknij wybrane miejsce, a kod HEX pojawi się od razu.
Jakie formaty obrazów są obsługiwane?
JPG, PNG, WebP, GIF, BMP i AVIF, o ile przeglądarka potrafi je otworzyć, a także zdjęcia HEIC z iPhone’a. Przy obrazach z przezroczystością pipeta pokazuje też krycie piksela.
Co dalej zrobić z odczytanym kolorem?
Skopiuj wartość HEX i przelicz ją na inne formaty w konwerterze kolorów, dobierz pasujące barwy w generatorze palet albo sprawdź w narzędziu do kontrastu, czy tekst w tym kolorze będzie dobrze czytelny.
Źródła i podstawa prawna
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Stan na:
Podobne narzędzia
- Konwerter kolorów: HEX, RGB, HSL, HSV, CMYKKonwerter kolorów online: zamiana HEX na RGB, RGB na HEX, HSL, HSV, HWB i CMYK. Wpisz kolor w dowolnym formacie lub wybierz go z próbnika i skopiuj wynik.
- Generator palet kolorówGenerator palet kolorów: dobierz pasujące kolory do jednego koloru bazowego – dopełniające, analogiczne, triada, kwadrat, monochromatyczne – z HEX, RGB i HSL.
- Sprawdzanie kontrastu kolorów (WCAG 2.2)Sprawdź kontrast kolorów tekstu i tła: współczynnik kontrastu WCAG 2.2 z oceną AA/AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu.
- Ile wody dziennie? Kalkulator zapotrzebowania na wodęIle wody dziennie powinno się pić? Zapotrzebowanie na płyny i wodę całkowitą według wieku, płci, ciąży i karmienia piersią – na podstawie wartości EFSA i DGE.
- Kalendarz chiński – przelicznik dat i chiński znak zodiakuKalendarz chiński online: przelicz datę na kalendarz księżycowy i z powrotem, sprawdź chiński znak zodiaku, żywioł, rok w cyklu 60-letnim i Nowy Rok.
- Kalendarz muzułmański – przelicznik dat (hidżra)Kalendarz muzułmański: przelicz datę gregoriańską na datę hidżry i odwrotnie – według Umm al-Kura (Arabia Saudyjska) lub tabelarycznie, z długością miesiąca.