Åadowanie...
Åadowanie...
Wrzuć zdjęcie lub zrzut ekranu, najedź kursorem na powiększoną lupę, kliknij, aby wybrać piksel — skopiuj HEX, RGB lub HSL i stwórz paletę do 20 kolorów jako gotowe do wklejenia zmienne CSS.
Wybieracz kolorów z obrazu odczytuje dokładną wartość RGB pojedynczego piksela z zdjęcia, zrzutu ekranu lub makiety projektu, abyś mógł użyć tego koloru gdzie indziej — w palecie marki, zmiennej CSS, tokenie motywu lub dopasowaniu farby. Projektanci używają go do wydobywania kolorów z tablic inspiracji. Programiści front-end używają go do dopasowywania zrzutów ekranu do motywu CSS. Marketerzy używają go do wydobywania kolorów marki z logo. Malarze i rzemieślnicy używają go do dopasowywania rzeczywistego zdjęcia do próbki farby lub nici. W przeciwieństwie do detektora 'dominującego koloru', to narzędzie daje Ci kontrolę na poziomie piksela: najedź, aby podglądać, kliknij, aby uchwycić. Powiększona lupa pokazuje dokładny piksel pod Twoim kursorem przy powiększeniu 8×, więc wybór pojedynczego podświetlenia lub 1-pikselowej krawędzi jest prosty. Wszystko działa w Twojej przeglądarce — Twój obraz nigdy nie opuszcza strony.
Przeciągnij plik JPG, PNG, WebP, GIF lub BMP na obszar przesyłania lub kliknij, aby wybrać z urządzenia. Obraz renderuje się w obszarze roboczym w skali podglądu, ale próbkowanie pikseli odbywa się na kopii o oryginalnej rozdzielczości.
Przesuń kursor nad obrazem. Powiększona lupa pojawia się nad kursorem, pokazując dokładny piksel pod nim przy powiększeniu 8×, z 1-pikselowym wskaźnikiem w centrum. Karta koloru kursora poniżej płótna aktualizuje się na żywo z HEX, RGB i HSL.
Kliknij dowolny piksel, aby dodać jego kolor do palety. Duplikaty są automatycznie pomijane, więc możesz bezpiecznie klikać, nie powiększając listy. Do 20 kolorów mieści się w jednej palecie.
Kliknij dowolny HEX, RGB lub HSL w palecie, aby skopiować go do schowka. Kliknij samą próbkę, aby skopiować jej HEX. Cała paleta eksportuje się również jako blok niestandardowych właściwości CSS (--color-1, --color-2, …).
Kliknij Nowy obraz, aby wyczyścić obszar roboczy i załadować inny plik. Użyj Wyczyść wewnątrz karty palety, aby zachować obraz, ale rozpocząć paletę od nowa.
1. Zdekoduj plik źródłowy za pomocą new Image() — przeglądarka obsługuje JPG/PNG/WebP/GIF/BMP natywnie. 2. Narysuj obraz o oryginalnej rozdzielczości na off-screen canvas. 3. Renderuj zmniejszony podgląd na widocznym płótnie (maks. 900 px po dłuższym boku). 4. Po najechaniu, przekształć współrzędne kursora (x,y) z przestrzeni podglądu z powrotem na współrzędne przestrzeni źródłowej. 5. Odczytaj piksel za pomocą getImageData(sx, sy, 1, 1).data → [R, G, B, A]. 6. Przekształć na HEX (R/G/B jako 2-cyfrowy hex) i HSL (rgbToHsl).
Próbkowanie na pełno-rozdzielczym płótnie (zamiast na podglądzie) ma znaczenie, ponieważ zmniejszanie rozmiaru uśrednia sąsiednie piksele — to, co wygląda na czysty czerwony na 100px wysokim podglądzie, może być (240, 30, 30) zamiast dokładnego (255, 0, 0) źródła. Przekształcenie współrzędnych kursora z powrotem do rozdzielczości źródłowej i próbkowanie tam utrzymuje wybrany kolor wierny oryginalnemu plikowi. Lupa stosuje to samo podejście: chwyta mały kwadrat oryginalnego płótna o pełnej rozdzielczości wokół kursora i renderuje go w 8× w 120-pikselowym okręgu, z imageSmoothingEnabled = false, aby poszczególne piksele pozostały ostre.
Referencja: MDN — CanvasRenderingContext2D.getImageData
| Źródło | Najlepszy workflow |
|---|---|
Logo marki PNG z przezroczystym tłem | Najeżdżaj lupą na jednolity kolor, kliknij raz. Skopiuj HEX. Gotowe w dwóch kliknięciach. Przezroczystość PNG renderuje się w tle strony — próbkuj wewnątrz logo, a nie na krawędzi. |
Zrzut ekranu inspiracji z witryny projektowej | Wybierz tło, główny kolor akcji, drugi akcent i kolor tekstu. Skopiuj zmienne CSS. Palety czterokolorowe są zazwyczaj wystarczające do odtworzenia systemu projektowego. |
Zdjęcie do odniesienia artystycznego (gradient nieba, dopasowanie farby) | Użyj lupy, aby wybrać dokładne piksele wzdłuż gradientu. Zbuduj paletę 5-7 kolorów, aby odtworzyć wygląd. Gradienty zdjęć mają szumy — wybieraj z obszarów wyglądających na jednolite, a nie z krawędzi. |
Zrzut ekranu zgłoszenia błędu z niewłaściwym odcieniem czerwieni | Najeżdżaj lupą na zły czerwony, skopiuj HEX, wklej do zgłoszenia z oczekiwanym HEX obok. Lupa sprawia, że 1-pikselowe krawędzie i linie włosów są wybieralne bez powiększania przeglądarki. |
Wytnij obiekt z dowolnego zdjęcia za pomocą AI na urządzeniu — bez potrzeby przesyłania.
Zmniejsz pliki JPG, PNG lub WebP w swojej przeglądarce za pomocą interaktywnego suwaka jakości.
Dostosuj, filtruj, obracaj i przycinaj zdjęcia w przeglądarce — bez przesyłania, bez znaku wodnego.
Twórz memy i kolaże zrzutów ekranu z prawdziwymi warstwami — wklejaj, przeciągaj, przycinaj, podpisuj, eksportuj.
Ostatnia aktualizacja