Utilia
Kategorie ▾
Język: pl ▾

Paleta kolorów ze zdjęcia

Wyodrębnij paletę kolorów z dowolnego obrazu. Wczytaj zdjęcie i otrzymaj dominujące kolory jako kody HEX z ich udziałem w obrazie, gotowe do skopiowania.

Jak wyodrębnić paletę kolorów z obrazu

  1. Upuść obraz w polu wczytywania albo kliknij je, aby wybrać plik. Zadziała JPG, PNG, WebP, GIF i każdy inny format, który potrafi wyświetlić twoja przeglądarka.
  2. Narzędzie od razu analizuje obraz i pokazuje jego Dominujące kolory, posortowane od najczęstszego do najrzadszego.
  3. Dostosuj Liczba kolorów (od 3 do 12), aby uzyskać szerszą lub węższą paletę. Odznacz Pomijaj białe i prawie białe piksele, jeśli biel jest ważnym kolorem twojego obrazu, np. przy białym produkcie lub śniegu.
  4. Skopiuj jeden kolor przyciskiem Kopiuj pod jego próbką albo wybierz format w polu Eksportuj jako (Lista HEX, Zmienne CSS, Zmienne SCSS, Tablica JSON lub Kolory Tailwind) i kliknij Kopiuj lub Pobierz dla całej palety. Wyodrębnij kolory uruchamia analizę ponownie.

Twój obraz jest odczytywany lokalnie przez przeglądarkę. Nigdy nie jest przesyłany na serwer.

Jak wyszukiwane są dominujące kolory

Obraz jest najpierw rysowany na niewidocznym elemencie canvas i zmniejszany tak, by jego dłuższy bok miał najwyżej 512 pikseli. Dzięki temu analiza jest szybka, a ogólne kolory się nie zmieniają. Następnie piksele są grupowane algorytmem kwantyzacji (zmodyfikowany median cut z otwartej biblioteki Color Thief) działającym w przestrzeni barw OKLCH, więc kolory, które dla oka wyglądają podobnie, trafiają do tej samej grupy.

Każda grupa staje się jednym kolorem palety, a procent pod każdą próbką to jej udział w próbkowanych pikselach. Pasek nad próbkami pokazuje te proporcje na pierwszy rzut oka. Przezroczyste piksele są pomijane, podobnie jak białe i prawie białe piksele, gdy opcja jest zaznaczona – w przeciwnym razie jednolite białe tła dominowałyby w większości zdjęć produktów i zrzutów ekranu.

Każda próbka pokazuje swój kod HEX czernią lub bielą – tym, co jest lepiej czytelne – więc etykieta pozostaje wyraźna zarówno na jasnych, jak i ciemnych kolorach.

Pomysły na wykorzystanie palety z obrazu

  • Branding i projektowanie stron: zbuduj motyw strony na podstawie głównego zdjęcia lub logo, aby interfejs pasował do obrazu.
  • Prezentacje i media społecznościowe: dobierz kolory tekstu i tła pasujące do zdjęcia na okładce.
  • Wnętrza, moda i sztuka: uchwyć nastrój zdjęcia, obrazu lub próbki tkaniny.
  • Wizualizacja danych: weź kolory wykresów z ilustracji użytej w tym samym raporcie.

Wyodrębnione kolory są średnimi wielu pikseli, więc mogą wyglądać na nieco mniej żywe niż najbardziej nasycony fragment zdjęcia. Jeśli potrzebujesz dokładnego koloru jednego konkretnego piksela, użyj próbnika kolorów z obrazu.

Najczęściej zadawane pytania

Ile kolorów wyodrębnić?

Pięć lub sześć kolorów zwykle oddaje główny nastrój zdjęcia. Wybierz 3 dla minimalistycznej palety albo 10–12 dla szczegółowych obrazów, np. ilustracji z wieloma wyraźnymi obszarami.

Dlaczego brakuje koloru z mojego obrazu?

Małe obszary to niewiele pikseli, więc mogą zostać połączone z większą grupą. Zwiększ Liczba kolorów albo przytnij obraz do interesującego cię fragmentu, zanim go tu upuścisz.

Dlaczego w mojej palecie nie ma bieli?

Opcja Pomijaj białe i prawie białe piksele jest domyślnie włączona. Odznacz ją, a paleta zostanie przeliczona z uwzględnieniem bieli.

Czy moje zdjęcie jest przesyłane?

Nie. Plik jest otwierany przez twoją przeglądarkę i analizowany na elemencie canvas na twoim urządzeniu. Nic nie jest wysyłane przez sieć, więc prywatne zdjęcia pozostają prywatne.

Jakie formaty obrazów są obsługiwane?

Każdy format, który potrafi wyświetlić twoja przeglądarka: JPG, PNG, WebP, GIF, AVIF, BMP i zwykle SVG. Zdjęcia HEIC z iPhone’ów otwierają się tylko w przeglądarkach, które je obsługują, np. w Safari; w innych najpierw przekonwertuj je na JPG.

Podobne narzędzia