Instrukcja obsługi
- Kliknij „Wybierz obraz”, upuść obraz lub wklej zrzut ekranu za pomocą Ctrl+V / Cmd+V.
- Przesuń wskaźnik lub palec nad obraz, aby wyświetlić podgląd na żywo wartości HEX,RGB,HSL i lupy.
- Kliknij punkt, który chcesz zachować; kolor zostaje zapisany w historii.
- Kliknij „Wyodrębnij paletę”, aby wygenerować paletę przyjazną dla projektu, a następnie skopiuj potrzebne wartości kolorów.
Przykład: wklej zrzut ekranu produktu, wybierz kolor głównego przycisku i skopiuj wartość HEX do CSS lub pliku projektu.
Główne funkcje
- Lokalne wybieranie kolorów obrazu: Obrazy są renderowane i próbkowane za pomocą przeglądarki Canvas, nigdy nie przesyłane na serwer.
- Poziom piksela HEX/RGB/HSL: Przesuń wskaźnik lub palec po obrazie, aby odczytać na żywo wartości HEX,RGB i HSL.
- Celownik lupy: powiększony podgląd pomaga wskazać krawędzie ikon, szczegóły zrzutów ekranu interfejsu użytkownika i małe bloki kolorów.
- Generator palet: Próbkowanie pikseli po stronie przeglądarki wyodrębnia do 5 dominujących kolorów w celu szybkiego odniesienia się do projektu.
- Zapisz i szybko skopiuj: Kliknij obraz, aby zapisać kolory w historii, a następnie kliknij dowolną próbkę, aby skopiować jej kod koloru.
Powiązane narzędzia
Konwertuj HEX,RGB,HSL i CMYK za pomocą wbudowanego modułu sprawdzania kontrastu WCAG. Prywatność tylko lokalna — bez przesyłania. Uzyskaj wartości CMYK gotowe do druku i skopiuj wyniki już teraz.
Wygeneruj Lorem Ipsum jako tekst, tablice HTML<p>lub JSON. Tylko lokalnie, bez przesyłania. Zawiera chiński tekst zastępczy i elementy sterujące o zmiennej długości. Wygeneruj teraz.
Szybko obliczaj współczynniki kształtu i brakujące wymiary. Działa lokalnie — bez przesyłania. Zawiera ustawienia wstępne TikTok/Reels 9:16 i fragmenty proporcji CSS. Oblicz teraz.
Logika obliczeń
To narzędzie dekoduje obraz lokalnie za pomocą HTML5 Canvas i odczytuje piksel RGBA pod bieżącą współrzędną selektora za pomocą getImageData. Wartości HEX,RGB i HSL są formatowane na podstawie tego piksela.
Próbki generowania palet Piksele Canvas grupują pobliskie kolory w proste segmenty i szeregują je według częstotliwości, aby uzyskać maksymalnie 5 dominujących kolorów. Jest to przydatne w przypadku szybkich palet internetowych i projektowych, ale nie gwarantuje profesjonalnego absolutnego zarządzania kolorami ICC / P3.
Najczęściej zadawane pytania (FAQ)
Czy moje obrazy zostały przesłane?
Nie. Ładowanie obrazu, wybieranie kolorów, podgląd w lupie i generowanie palety działają lokalnie w przeglądarce.
Jak uzyskać kolor HEX z obrazu?
Wybierz lub wklej obraz, a następnie przesuń wskaźnik lub palec do docelowego piksela. Żywy kolor pojawia się natychmiast. Kliknij obraz, aby zapisać go w historii, a następnie kliknij próbkę, aby skopiować wartość HEX.
Jakie formaty kolorów są obsługiwane?
Narzędzie wyświetla i kopiuje HEX,RGB i HSL, formaty najczęściej używane w projektowaniu stron internetowych i tworzeniu frontendów.
Dlaczego kolor może nieznacznie różnić się od koloru w Photoshopie?
Canvas odczytuje piksel renderowany przez Twoją przeglądarkę. Zachowanie przeglądarki, gama wyświetlania i osadzone profile kolorów obrazu mogą powodować niewielkie różnice.
Czy mogę wybierać kolory na telefonie komórkowym?
Tak. Na urządzeniach dotykowych przeciągnij palcem po obrazie, aby przesunąć celownik, a następnie dotknij lub zwolnij, aby zablokować kolor.