Odczytaj kod koloru z obrazu: Image Color Picker

Wczytaj obraz do Image Color Picker i kliknij miejsce, którego kolor chcesz sprawdzić. Narzędzie od razu pokaże kod HEX oraz wartości RGB i HSL tego piksela. Kliknij „Kopiuj”, aby skopiować wartość. Kliknięcie słońca na przykładowym obrazie da wynik #ffd166. W kodzie HEX każda para cyfr oznacza kolejno czerwony, zielony i niebieski (ff = 255, d1 = 209, 66 = 102), dlatego #ffd166 to rgb(255, 209, 102) i hsl(42, 100 %, 70 %).

Pipeta kolorów, zwana też próbnikiem kolorów lub Eyedropper, odczytuje kolor we wskazanym miejscu i podaje jego kod. Image Color Picker to internetowa pipeta do obrazów, działająca w przeglądarce także na telefonie — nie potrzebujesz aplikacji. Na telefonie dotknij wybranego miejsca i przesuń palec; lupa pokaże piksele pod nim. Za pomocą klawiatury możesz przesuwać zaznaczenie strzałkami o 1 piksel (z klawiszem Shift o 10) i zapisać kolor w historii klawiszem Enter.

Nie. Obraz trafia na obszar rysowania w Twojej przeglądarce i tam jest analizowany. Nie jest przesyłany ani zapisywany, a historia wybranych kolorów pozostaje tylko w tej karcie. Możesz to sprawdzić na karcie sieciowej narzędzi deweloperskich: wczytywanie obrazu i klikanie nie wysyłają żadnych żądań.

Zrób zrzut ekranu (Windows: Windows+Shift+S, Mac: Cmd+Shift+4 z klawiszem Ctrl, aby skopiować do schowka) i wklej go do narzędzia za pomocą Ctrl+V (Mac: Cmd+V). Następnie kliknij wybrane miejsce i skopiuj kod koloru. W ten sposób odczytasz kolory ze strony, aplikacji lub gry bez rozszerzenia przeglądarki.

Są cztery częste przyczyny. Po pierwsze, obrazy JPG zapisują kolory stratnie, więc sąsiednie piksele mogą się nieznacznie różnić. Po drugie, przeglądarka może przeliczać osadzone profile kolorów (np. Display P3) na sRGB, podczas gdy inne programy pokazują wartości źródłowe. Po trzecie, zrzut ekranu pokazuje kolor po przetworzeniu przez system zarządzania kolorami Twojego wyświetlacza. Po czwarte, narzędzie analizuje obrazy powyżej 36 megapikseli w zmniejszonej rozdzielczości. Dlatego przy zdjęciach ustaw uśrednianie na 3 × 3, 5 × 5 lub 11 × 11 pikseli: narzędzie obliczy średnią z 9, 25 lub 121 pikseli wokół wskaźnika, zamiast odczytywać pojedynczy piksel o nietypowym kolorze. W przypadku jednolitych kolorów, np. w logo, wybierz „1 piksel”.

Wczytaj obraz, a paleta pojawi się bezpośrednio pod nim. Możesz ustawić od 2 do 12 kolorów i zobaczyć kod HEX każdego z nich oraz jego udział w obrazie. Narzędzie analizuje co najmniej 90.000 równomiernie rozmieszczonych pikseli (mniejsze obrazy w całości), pomija przezroczyste piksele i grupuje kolory metodą median cut. W przypadku zdjęć paleta jest przybliżona. Kliknij „Kopiuj listę HEX”, aby otrzymać listę, lub „Kopiuj zmienne CSS”, aby otrzymać wiersze takie jak --color-1: #08203a; do bloku :root, których użyjesz przez var(--color-1).

Oprócz wartości koloru narzędzie pokazuje odpowiadającą mu nazwę koloru CSS lub, jeśli nie ma dokładnego dopasowania, najbliższą nazwę wraz z jej wartością HEX. Dla #ffd166 jest to khaki (#f0e68c), czyli tylko przybliżenie. Narzędzie nie podaje wartości RAL, Pantone, NCS ani CMYK. Kolor na ekranie zależy też od oświetlenia i aparatu, dlatego kolor farby ściennej lub lakieru zawsze sprawdzaj na rzeczywistym wzorniku. Wartości HSV i CMYK dla znanego koloru sprawdzisz w Color Picker.

Narzędzie oblicza współczynnik kontrastu WCAG koloru względem bieli i czerni. Zwykły tekst wymaga co najmniej 4,5:1 (poziom AA), bardzo dobry wynik to 7:1 (AAA), a dla dużego tekstu wystarczy 3:1. Na tle #ffd166 czarny tekst osiąga 14,56:1, a biały tylko 1,44:1. Kontrast dowolnych dwóch kolorów możesz sprawdzić w Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP i SVG — zależnie od tego, co obsługuje Twoja przeglądarka. W przypadku GIF analizowana jest pierwsza klatka. Pliki HEIC i HEIF, w których iPhone'y zapisują zdjęcia, otwiera tylko Safari. W innych przeglądarkach najpierw wyeksportuj zdjęcie jako JPG. Pliki mogą mieć maksymalnie 40 MB. Dla półprzezroczystych pikseli narzędzie pokazuje dodatkowo wartość HEX z kanałem alfa, np. #ff000080. Całkowicie przezroczyste piksele nie mają koloru — narzędzie Cię o tym poinformuje.