Dominujący kolor obrazu
Znajdź dominujący kolor dowolnego obrazu oraz paletę jego najczęściej występujących kolorów. Narzędzie przypisuje każdy widoczny piksel do jednego z 4096 przedziałów kolorów, wskazuje najliczniejszy przedział jako dominujący kolor, wyświetla do 12 kolorów palety wraz z ich udziałem w obrazie i podaje ogólny kolor średni, każdy w formacie hex, RGB i HSL. Przydatne dla projektantów, twórców motywów i programistów, którzy potrzebują kolorów zastępczych lub akcentowych.
Najczęściej zadawane pytania
Jak znajduje się dominujący kolor?
Każdy piksel trafia do jednego z 4096 przedziałów, po 16 poziomów dla czerwieni, zieleni i błękitu. Wygrywa przedział z największą liczbą pikseli, a jego kolor jest średnią kolorów pikseli w jego obrębie, dzięki czemu białe tło jest oznaczane jako czysta biel, a nie zaokrąglona wartość.
Czym jest paleta?
Paleta zawiera najczęściej występujące przedziały po dominującym kolorze, do wybranej liczby kolorów od 1 do 12; domyślnie jest ich 5. Każda pozycja zawiera wartości hex, RGB i HSL oraz udział widocznych pikseli, które obejmuje.
Czym różni się kolor średni?
Kolor średni to średnia wszystkich widocznych pikseli. Zdjęcie niebieskiego nieba nad czerwonym polem będzie miało dominujący kolor niebieski lub czerwony, ale jego kolor średni będzie mętną mieszanką obu. Kolor średni sprawdza się w rozmytych obrazach zastępczych, a dominujący kolor — w akcentach.
Jak obsługiwane są przezroczyste piksele?
Piksele o przezroczystości większej niż połowa są pomijane, więc logo na przezroczystym tle pokazuje kolory logo zamiast czerni. Wynik informuje, jaka część obrazu była przezroczysta. Obraz bez widocznych pikseli wyświetla komunikat zamiast koloru.
Jakie formaty mogę analizować?
Obsługiwane są obrazy JPEG, PNG, GIF, WebP, TIFF i AVIF o rozmiarze do 5 MB. Pliki animowane GIF i WebP są analizowane na podstawie pierwszej klatki, a obrazy CMYK są przed zliczaniem konwertowane do sRGB.
Czy duże obrazy są najpierw zmniejszane?
Obrazy, których bok ma więcej niż 4000 pikseli, są najpierw zmniejszane do 4000 pikseli, co najwyżej nieznacznie zmienia ich udziały. Mniejsze obrazy są zliczane piksel po pikselu.
Dlaczego podobne odcienie są wyświetlane jako osobne kolory?
Przedziały obejmują 16 poziomów, dlatego dwa odcienie leżące po przeciwnych stronach granicy przedziału są zliczane osobno. Z tego powodu na palecie gradienty i zdjęcia często zawierają sąsiadujące odcienie. Zwiększ rozmiar palety, aby zobaczyć więcej z nich.
Czy mogę użyć tych kolorów w CSS?
Tak. Każdy kolor jest dostępny jako kod hex, na przykład #3366cc, jako wartości rgb() oraz jako wartości hsl(), z odcieniem w stopniach oraz nasyceniem i jasnością w procentach. Możesz wkleić je do CSS, narzędzi projektowych lub ustawień motywu.
Do czego mogę użyć dominującego koloru?
Typowe zastosowania to kolory zastępcze tła na czas ładowania obrazów, kolory akcentowe kart i nagłówków dopasowane do obrazu okładki, sortowanie zdjęć produktów według kolorów oraz sprawdzanie, czy obrazy marki zachowują spójną paletę. Ustrukturyzowany wynik ułatwia też ponowne użycie wartości w skryptach i motywach.
Czy wynik jest zawsze taki sam?
Tak. Zliczanie jest deterministyczne, więc ten sam plik zawsze daje ten sam dominujący kolor, paletę i udziały. Gdy dwa przedziały mają dokładnie taką samą liczbę pikseli, ich kolejność zależy od tego, który kolor pojawił się pierwszy.