Przejdź do treści

piksel → HEX · RGB · HSL

Próbnik kolorów z obrazu

Kliknij piksel obrazu, aby odczytać jego kolor: piksel #0060fd to rgb(0, 96, 253) i hsl(217, 100%, 50%). Dodaj obraz, aby pobierać kolory z własnego.

Wybieraj kliknięciem, dotknięciem lub klawiszami strzałek. Twój obraz jest rysowany tylko w tej karcie i nigdy nie jest wysyłany.

Scanned by NortonTM Safe Web

W skrócie

Cena
Bez opłat
Konto
Niepotrzebne
Wysyłanie plików
Brak — obraz jest rysowany w karcie przeglądarki i nic nie jest nigdzie wysyłane
Formaty
PNG, JPEG, WebP, GIF, AVIF, BMP i SVG, o ile Twoja przeglądarka je dekoduje
Rozmiar obrazu
Rysowany do 1600 pikseli po dłuższym boku; pliki do 200 MB i 120 milionów pikseli
Paleta
Sześć dominujących kolorów metodą median cut z około 20,000 próbkowanych pikseli

Wybrane kolory i działanie palety

Te wiersze wygenerował ten sam kod co narzędzie. Tabela palety używa obrazu 4 × 4 piksele z dwunastoma niebieskimi i czterema białymi pikselami.

Kolory odczytane z pikseli
Kolor pikselaHEXRGBHSL
#0060fd#0060fdrgb(0, 96, 253)hsl(217, 100%, 50%)
#ff8000#ff8000rgb(255, 128, 0)hsl(30, 100%, 50%)
#00a86b#00a86brgb(0, 168, 107)hsl(158, 100%, 33%)
#767676#767676rgb(118, 118, 118)hsl(0, 0%, 46%)
#fdd835#fdd835rgb(253, 216, 53)hsl(49, 98%, 60%)
Paleta przykładu 4 × 4
Kolor paletyUdział pikseli
#0060fd75%
#ffffff25%

Jak pobrać kolor z obrazu

1

Dodaj obraz

Upuść plik PNG, JPEG, WebP, GIF, AVIF, BMP lub SVG na pole, wybierz go przyciskiem Wybierz obraz albo wklej obraz ze schowka. Do czasu dodania własnego widoczny jest obraz przykładowy.

2

Kliknij, dotknij lub użyj strzałek

Kliknij lub dotknij punktu albo przeciągnij po obrazie. Gdy obraz jest aktywny, strzałki przesuwają celownik o jeden piksel, a Shift ze strzałką o dziesięć pikseli. Kafelki pokazują kolor jako HEX, RGB i HSL.

3

Skopiuj kolor lub pozycję palety

Naciśnij Kopiuj na kafelku albo naciśnij próbkę palety, aby skopiować jej kod HEX. Paleta zawiera sześć dominujących kolorów całego obrazu wraz z udziałem, jaki każdy z nich zajmuje.

Jak odczytywane są kolory

Przeglądarka dekoduje Twój plik, a strona rysuje go na elemencie canvas w tej karcie. Obraz większy niż 1600 pikseli po dłuższym boku jest zmniejszany, żeby się zmieścił, więc kolor odczytany z bardzo dużego obrazu pochodzi z pomniejszonej kopii, w której sąsiednie piksele zostały uśrednione. Następnie strona pyta canvas o wartości czerwonego, zielonego, niebieskiego i alfa pojedynczego piksela pod celownikiem i wypisuje je jako HEX, RGB i HSL. Piksel z przezroczystością jest wypisywany wraz z wartością alfa. Canvas przechowuje kolory pomnożone przez alfa, więc kanał częściowo przezroczystego piksela może odczytać się o jednostkę inaczej: 200 odczytuje się jako 199 przy 50% krycia.

Paleta używa algorytmu median cut. Strona patrzy na co n-ty piksel, najwyżej około 20,000 z nich, i pomija piksele przezroczyste w ponad połowie. Umieszcza te kolory w jednym pudełku i wielokrotnie tnie pudełko o największym rozrzucie w jednym kanale w medianie tego kanału, aż będzie sześć pudełek lub żadne nie będzie zawierać dwóch różnych kolorów. Każde pudełko jest pokazane jako średnia jego pikseli, z udziałem próbkowanych pikseli, który zawiera, od największego. Wynik jest za każdym razem taki sam dla tego samego obrazu. Obraz z mniej niż sześcioma różnymi kolorami daje krótszą paletę, a obrazy animowane są odczytywane jako pojedynczy nieruchomy obraz.

Pytania o próbnik kolorów z obrazu

Jak uzyskać kod HEX koloru z obrazu?

Dodaj obraz, a potem kliknij wybrane miejsce. Kafelek HEX pokaże kod tego piksela, na przykład #0060fd, a Kopiuj wstawi go do schowka. Aby uzyskać główne kolory bez wybierania miejsca, naciśnij zamiast tego próbkę w palecie.

Jakie formaty obrazów działają?

PNG, JPEG, WebP, GIF, AVIF, BMP i SVG, o ile Twoja przeglądarka potrafi je zdekodować. AVIF zależy od wersji przeglądarki. Inne pliki, takie jak PDF lub TIFF, są odrzucane z komunikatem. Odrzucane są też pliki powyżej 200 MB lub powyżej 120 milionów pikseli.

Jak wybierana jest paleta sześciu kolorów?

Metodą median cut na próbce około 20,000 pikseli: kolory są dzielone na pudełka w medianie najszerszego kanału, aż będzie ich sześć, a każde pudełko staje się średnią swoich pikseli. Procent pod każdą próbką to udział próbkowanych pikseli w tym pudełku. Piksele w większości przezroczyste są pomijane.

Dlaczego dwa sąsiednie piksele dają nieco inne kolory?

Zdjęcia i obrazy skompresowane, takie jak JPEG, różnią się trochę od piksela do piksela, więc dwa punkty, które wyglądają tak samo, mogą różnić się o kilka jednostek na kanał. Kliknij kilka punktów albo użyj palety, która uśrednia wiele pikseli, gdy potrzebujesz koloru reprezentatywnego.

Czy mój obraz jest gdzieś wysyłany?

Nie. Plik jest dekodowany i rysowany przez Twoją przeglądarkę w tej karcie, kolory są odczytywane z tego rysunku i nic nie jest wysyłane na serwer. Zamknięcie lub odświeżenie strony usuwa obraz.

Co robi przycisk wyboru z ekranu?

W przeglądarkach z funkcją EyeDropper przycisk pozwala kliknąć dowolny punkt na ekranie, także w innych oknach, i pokazuje jego kolor. Przeglądarki bez tej funkcji nie pokazują przycisku; wybieranie z obrazu działa wszędzie.