Próbnik Kolorów Obrazu i Paleta
Próbnik Kolorów Obrazu i Paleta
Kliknij aby wybrać kolory z obrazu, automatycznie wyodrębnij kolory dominujące i paletę, kopiuj HEX/RGB i eksportuj zmienne CSS. Obsługuje PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Przeciągnij i upuść obraz tutaj lub kliknij aby wybrać
Obsługuje PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Szybki start
- Importuj obraz: Przeciągnij i upuść lub kliknij aby wybrać
- Zmień panel: Desktop pokazuje panel boczny; Mobilnie dotknij dolny przycisk
- Kliknij aby wybrać: Kliknij gdziekolwiek na obrazie aby uzyskać kolor tego piksela
- Kopiuj kolor: Po wybraniu kopiuj format HEX/RGB/CSS
- Ustaw liczbę kolorów: Przeciągnij suwak lub kliknij preset (4/6/8/12/16/24/32)
- Wyodrębnij paletę: Kliknij przycisk wyodrębniania dla listy kolorów dominujących
- Eksportuj CSS: Po wyodrębnieniu eksportuj plik zmiennych CSS
- Eksportuj JSON: Po wyodrębnieniu eksportuj plik danych JSON
- Resetuj: Wyczyść bieżący obraz i wyniki
📌 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 procentu od wysokiego do niskiego, najczęstsze kolory pierwsze
- Liczba obok koloru: Pokazuje procent pikseli w obrazie
🧭 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ść
- Limit pojedynczego pliku 128MB, bardzo duże obrazy mogą powodować spowolnienie
- Wyodrębnianie palety automatycznie zmniejsza próbkowanie dla wydajności, wyniki to kolory reprezentatywne
- Dekodowanie HEIC/HEIF zależy od wsparcia przeglądarki, konwertuj do JPG/PNG jeśli się nie powiedzie
- Przezroczyste piksele są ignorowane lub przetwarzane jako rzeczywiste RGBA
🔒 Prywatność i bezpieczeństwo
- Całe przetwarzanie odbywa się w przeglądarce; dane nigdy nie opuszczają urządzenia
❓ Najczęstsze pytania
Jak używać wyeksportowanego pliku CSS?
Umieść wyeksportowany :root { --color-1: ... } w globalnym CSS, potem odwołuj się przez var(--color-1).
Do czego służy wyeksportowany JSON?
Do ponownego użycia w skryptach/systemie projektowym, np. generowanie Design Tokens lub konfiguracji motywu. Każdy kolor zawiera hex/css/rgb i count.
Jaka liczba kolorów jest zalecana?
Ogólny UI: 8 lub 12; minimalne ikony: 4–6; zdjęcia/gradienty: 16–32. Użyj presetów do szybkiego porównania.
Dlaczego kliknięte i paletowe kolory są różne?
Wybór kliknięciem dostaje pojedynczy piksel; paleta kwantyzuje cały obraz dla reprezentatywnych kolorów podkreślających ogólny trend.
Dlaczego przycisk eksportu jest szary?
Musisz najpierw kliknąć 'Wyodrębnij Paletę', eksport dostępny po zakończeniu wyodrębniania.
Jak jest generowana wyeksportowana nazwa pliku?
Domyślnie używa oryginalnej nazwy pliku (bez rozszerzenia) + .palette-liczba + .css/.json, z nielegalnymi znakami automatycznie oczyszczonymi.