Przejdź do treści

Próbnik Kolorów Obrazu i Paleta

Wybierz kolory z jednego obrazu w przeglądarce, skopiuj HEX/RGB/CSS, wyodrębnij reprezentatywną paletę 2-32 kolorów i wyeksportuj zmienne CSS lub JSON z obsługą HEIC/HEIF.

Przeciągnij i upuść obraz tutaj lub kliknij aby wybrać

Obsługuje PNG / JPEG / WebP / AVIF / HEIC / HEIF

Liczba plików

0 / 1

Łączny rozmiar

0 bytes / 25 MB

Limit na plik

25 MB

Próbnik Kolorów Obrazu i Paleta

Szybki start

1
Importuj jeden obraz
2
Kliknij podgląd i skopiuj HEX/RGB/CSS
3
Wybierz rozmiar palety (4/6/8/12/16/24/32)
4
Wyodrębnij reprezentatywne kolory
5
Eksportuj zmienne CSS lub JSON

Typowe scenariusze

Wybór kolorów projektu/plakatu

Wyodrębnij kolory podstawowe i akcentujące dla schematu kolorów

Motyw/system projektowy

Eksportuj zmienne CSS lub JSON dla projektu

Stylowanie komponentów

Wyodrębnij pasujące kolory dla przycisków, tagów, wykresów

Spójność marki

Wyodrębnij standardową paletę kolorów z zasobów marki

Opcje Próbnika Kolorów i Palety

Liczba kolorów: 2-32, zwykle 8/12; zdjęcia/gradienty sugerują 16-32
Przyciski presetów: 4/6/8/12/16/24/32 przełączanie jednym kliknięciem
Sortowanie: według skwantyzowanej liczby próbek od najwyższej do najniższej, najpierw najczęstsze kolory
Liczba obok koloru: pokazuje skwantowaną liczbę próbek z obrazu palety o zmniejszonej częstotliwości próbkowania
Kontrakt eksportowy: zmienne CSS wykorzystują:root --color-1 nazwy; JSON wyświetla indeks/hex/css/rgb/count dla każdego koloru palety.

Wskazówki użycia

Zacznij od 8/12 aby zobaczyć ogólny efekt, potem zwiększ do 16/24/32 w razie potrzeby
Przy użyciu w projekcie zmień --color-1 na semantyczne nazwy (np. --color-primary)
Utrzymuj stronę na pierwszym planie przy wyodrębnianiu dużych obrazów aby uniknąć ograniczania przez przeglądarkę

Ograniczenia i kompatybilność

Ekstrakcja palet automatycznie pobiera próbki w celu uzyskania wydajności, wyniki są reprezentatywnymi kolorami.
Precyzja: próbkowanie kliknięć wykorzystuje wyświetlane płótno o długości do 2048 pikseli na najdłuższym boku; ekstrakcja palety wykorzystuje próbkę o rozmiarze 256 pikseli.
HEIC/HEIF to tylko wejście; lokalne dekodowanie może się nie powieść, więc w razie potrzeby przekonwertuj je na PNG/JPEG.
Obsługa alfa: CSS może wyprowadzać sygnał rgba(...);HEX/RGB nie zawierają alfa; JSON utrzymuje alfa przez wartość css.
Granica wejściowa: brak importu URL, importu wklejania, zakraplacza ekranowego lub przepływu pracy rozszerzenia przeglądarki.
Granica kolorów: brak konwersji HSL/CMYK/Pantone/LAB/OKLCH, sprawdzania kontrastu lub matrycy WCAG.
Granica eksportu: brak eksportu próbek Tailwind/SCSS/ASE/Figma/Procreate.

Prywatność i bezpieczeństwo

Wybór koloru z obrazu i wyodrębnianie palety odbywają się w przeglądarce. Obraz źródłowy pozostaje w pamięci strony, dopóki to narzędzie jest otwarte. Ustawienie rozmiaru palety może pozostać w pamięci przeglądarki; jeśli synchronizacja WebDAV jest włączona, to ustawienie może synchronizować się zgodnie z Twoimi ustawieniami. Wybrany kolor, paleta, komunikat błędu oraz dane powiększenia / przesunięcia podglądu są stanem przeglądu w czasie działania i mogą też synchronizować się przez WebDAV state schema, dopóki istnieją. Plik obrazu domyślnie nie jest synchronizowany; trafia do synchronizacji załączników WebDAV tylko wtedy, gdy wyraźnie ją włączysz. Eksporty palety CSS/JSON są generowane przy pobieraniu i nie są zapisywane jako osobne wyniki. Na współdzielonym urządzeniu w razie potrzeby wyczyść obraz, wybrane kolory, paletę, zapisane ustawienia i dane witryny.

Najczęstsze pytania

5

Przejdź do kolejnego kroku z tymi powiązanymi narzędziami.

Całe przetwarzanie narzędzi odbywa się lokalnie w Twojej przeglądarce.