Jak Używać Pipety Kolorów do Znajdowania Kolorów z Pikseli
Szybka odpowiedź
Aby wybrać kolor: otwórz Color Picker, uploaduj obraz (lub użyj screen eyedropper), kliknij na piksel którego kolor chcesz i wartości HEX, RGB i HSL pojawiają się. Całe przetwarzanie odbywa się lokalnie.
Wstęp
Color picker (nazywany też eyedropper) pozwala znaleźć dokładny kolor piksela. Jest to istotne dla matchowania kolorów brand, samplowania kolorów z obrazów lub budowania palety z foto. Browser-based color pickery mogą czytać kolory z uploadowanych obrazów przez Canvas API, a wbudowane EyeDropper API może wybierać kolory z całego ekranu.
Krok po kroku
-
Otwórz narzędzie Próbnik kolorów
Przejdź do strony narzędzia Próbnik kolorów. Narzędzie umożliwia wybieranie kolorów z przesłanych obrazów oraz, w obsługiwanych przeglądarkach, z dowolnego miejsca na ekranie za pomocą zakraplacza API.
-
Wybierz swoje źródło
Aby wybrać obraz: prześlij lub przeciągnij i upuść obraz. Aby wybrać z ekranu (tylko Chrome/Edge): kliknij przycisk „Wybierz z ekranu”, a następnie kliknij dowolne miejsce na ekranie.
-
Kliknij piksel, aby pobrać próbkę
Aby wybrać obraz, przesuń kursor na obraz i kliknij piksel, którego kolor chcesz. Narzędzie odczytuje kolor piksela z płótna za pomocą metody getImageData(). W wybraniu dokładnego piksela może pomóc lupa.
-
Przeczytaj wartości kolorów
Narzędzie wyświetla wybrany kolor w formatach HEX, RGB i HSL wraz z próbką. Wartości aktualizują się natychmiast po przesunięciu kursora.
-
Skopiuj kolor
Kliknij opcję Kopiuj obok dowolnego formatu, aby skopiować wartość koloru do schowka. Użyj go w swoim CSS, narzędziu do projektowania lub aplikacji.
Przykłady
Wybierz kolor marki z logo
Wejście: logo.png, kliknij piksel koloru marki
Wyjście: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Próbka koloru ze zdjęcia
Wejście: photo.jpg kliknij piksel nieba
Wyjście: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Wybierz z ekranu (Chrome/Edge)
Wejście: Kliknij „Wybierz z ekranu”, a następnie kliknij dowolny piksel na ekranie
Wyjście: __ZACHOWAJ_35__ wartość tego piksela, np. #ff5733
Typowe problemy
- Wygładzanie łączy kolory na krawędziach — piksele na krawędziach pomiędzy dwoma kolorami stanowią mieszankę. Dla zapewnienia dokładności próbka pochodzi ze środka obszaru o jednolitym kolorze.
- EyeDropper API nie jest obsługiwany — selektor ekranu wymaga przeglądarki Chrome 95 lub nowszej lub Edge 95 lub nowszej. Firefox i Safari tego nie obsługują; zamiast tego użyj metody przesyłania obrazu.
- Kompresja JPEG zmienia kolory —JPEG kompresja stratna zmienia nieznacznie kolory pikseli. Aby uzyskać dokładne kolory marki, użyj PNG lub oryginalnego źródła wektorowego.
- Różnice w profilach kolorów — obrazy z osadzonymi profilami kolorów (ICC) mogą być wyświetlane inaczej, niż sugerują surowe wartości pikseli.
Porady
- Użyj lupy, aby wybrać dokładny piksel — przy dużym powiększeniu możesz wybrać pojedynczy, precyzyjny piksel, a nie mieszaną krawędź.
- Próbkuj wiele pikseli z jednolitego obszaru i uśredniaj je, jeśli kompresja wprowadziła szum — daje to bardziej reprezentatywny kolor.
- Użyj zakraplacza API (Chrome/Edge), aby wybrać kolory z dowolnej aplikacji, a nie tylko obrazów w przeglądarce.
- Skorzystaj z naszego Próbnika kolorów, aby uzyskać natychmiastowe, prywatne próbkowanie kolorów — Twoje obrazy nigdy nie opuszczą przeglądarki.