Paleta kolorów ze zdjęcia

Paleta kolorów ze zdjęcia pomaga utrzymać spójny wygląd profilu: dobierzesz kolor napisów na relacjach do zdjęcia, ustalisz barwy marki z logo albo sprawdzisz, jakie odcienie dominują w feedzie, który Ci się podoba. Dodaj zdjęcie, a narzędzie znajdzie 5-10 głównych kolorów i poda ich kody HEX, RGB i HSL. Kliknięcie w zdjęcie działa jak pipeta. Wszystko liczy się w przeglądarce, zdjęcie nie jest nigdzie wysyłane.

Jak wyciągnąć kolory ze zdjęcia

1. Wybierz zdjęcie, logo albo zrzut ekranu (możesz je też przeciągnąć na pole).
2. Ustaw liczbę kolorów w palecie - 5-6 wystarczy do większości zdjęć, 8-10 przyda się przy kolorowych grafikach.
3. Kliknij kod HEX w palecie, żeby go skopiować. Pod każdym kolorem widać też RGB, HSL i udział w zdjęciu.
4. Kliknij albo dotknij zdjęcia, żeby odczytać kolor w konkretnym miejscu (pipeta uśrednia 3 × 3 piksele, żeby szum nie przekłamał wyniku). Z klawiatury: zaznacz zdjęcie klawiszem Tab i przesuwaj pipetę strzałkami.
5. Pobierz paletę jako pasek PNG albo skopiuj ją jako zmienne CSS do strony.

Jak powstaje paleta kolorów ze zdjęcia

Zdjęcie ma setki tysięcy różnych odcieni, więc „najczęstszy piksel” niewiele mówi. Narzędzie zmniejsza obraz, grupuje podobne kolory i szuka metodą k-średnich (k-means) takich barw, które najlepiej reprezentują całość: każdy piksel przypisuje do najbliższego koloru palety, potem przesuwa kolor palety na średnią przypisanych pikseli i powtarza to kilkanaście razy. Start algorytmu ma stałe ziarno losowania, więc ten sam obraz daje zawsze tę samą paletę. Przezroczyste piksele (na przykład tło logo w PNG) są pomijane, a udział koloru mówi, jaką część zdjęcia zajmuje.

Paleta pokazuje kolory uśrednione, dlatego drobne, nasycone akcenty (czerwona kropka na szarym tle) mogą się w niej nie pojawić albo zlać z sąsiednim kolorem. Wtedy zwiększ liczbę kolorów albo odczytaj akcent pipetą.

HEX, RGB i HSL - czym się różnią

HEX i RGB to ten sam kolor zapisany inaczej: trzy liczby od 0 do 255 dla czerwieni, zieleni i niebieskiego, w HEX zapisane szesnastkowo (8B = 139). HSL opisuje kolor tak, jak myśli o nim człowiek: odcień na kole barw (0-360°), nasycenie i jasność w procentach. Jeśli chcesz jaśniejszą wersję koloru marki do tła, zostaw odcień i nasycenie, a podnieś jasność. Konwerter na dole narzędzia zamienia HEX na RGB i HSL w obie strony - wklej kod w dowolnym zapisie.

Jak użyć palety na Instagramie i w grafikach

• Spójny feed: wybierz 2-3 kolory z ulubionych zdjęć i używaj ich w napisach na relacjach, okładkach rolek i grafikach karuzeli. Ułożenie zdjęć sprawdzisz w planerze siatki Instagram.
• Kolory marki z logo: dodaj logo w PNG i skopiuj zmienne CSS albo kody HEX do Canvy lub Figmy.
• Napis na zdjęciu: kolor napisu musi odcinać się od tła. Kontrast wybranej pary sprawdzisz w narzędziu sprawdzanie kontrastu kolorów, także bezpośrednio na miniaturze.
• Miniatury YouTube: wyrazisty kolor z palety zdjęcia na tle napisu zwiększa czytelność w małym rozmiarze - podgląd zrobisz w podglądzie miniatury YouTube.

Najczęstsze pytania

Źródła

• W3C: CSS Color Module Level 4 - definicje zapisu HEX, rgb() i hsl().
• D. Arthur, S. Vassilvitskii, „k-means++: The Advantages of Careful Seeding”, SODA 2007.