Jak uzyskać paletę kolorów ze zdjęcia?

Upuść obraz na tę stronę. Dominujące kolory pojawią się od razu, uszeregowane według tego, jaką część obrazu zajmują. Możesz zmienić ich liczbę, skopiować każdy jako HEX, RGB lub HSL i wyeksportować zestaw jako CSS, Tailwind lub JSON.

Jak znaleźć kod HEX koloru na obrazku?

Wczytaj obraz i kliknij dokładnie to miejsce, które Cię interesuje. Pipeta pokaże wartości HEX, RGB i HSL tego piksela, a kliknięcie dowolnej wartości ją skopiuje.

Jak obliczane są dominujące kolory?

Obraz jest zmniejszany, a jego piksele grupowane metodą k-średnich w przestrzeni barw OKLab, która mierzy różnicę kolorów tak, jak postrzegają ją ludzie. Średni kolor każdej grupy staje się próbką, uszeregowaną według udziału pikseli, które zawiera.

Dlaczego dostaję trochę inne kolory niż w innym narzędziu?

Każde narzędzie inaczej grupuje podobne piksele, a próbki to średnie tych grup, a nie pojedyncze piksele. Punkty startowe są tu wybierane deterministycznie, więc ten sam obraz zawsze daje tutaj ten sam wynik. Gdy potrzebujesz dokładnej wartości piksela, użyj pipety.

Czy mogę wyeksportować paletę do Tailwind CSS?

Tak. Wybierz konfigurację Tailwind v3, aby dostać obiekt colors do wklejenia w tailwind.config.js, albo Tailwind v4 @theme dla konfiguracji opartej na CSS, a następnie skopiuj lub pobierz kod.

Czy działa z przezroczystymi PNG i logo?

Tak. Piksele w większości przezroczyste są pomijane, więc paleta odzwierciedla widoczną grafikę, a nie puste tło.

Czy mój obraz jest wysyłany?

Nie. Obraz jest dekodowany i analizowany w Twojej przeglądarce i nigdy nie opuszcza Twojego urządzenia.

Generator palety kolorów z obrazu

Wyciągnij dominujące kolory z dowolnego zdjęcia jako HEX, RGB i HSL. Wszystko działa lokalnie — nic nie jest wysyłane.

Wejście: PNG · JPEG · WebP · GIF · SVG
Wyjście: HEX · RGB · HSL · CSS · JSON

Upuść obraz

Zdjęcie, zrzut ekranu lub logo: PNG, JPEG, WebP, GIF lub SVG. Możesz też wkleić obraz.

Paleta kolorów z dowolnego zdjęcia

Upuść zdjęcie, zrzut ekranu lub logo, a ten generator palety kolorów wyciągnie z niego dominujące kolory, uszeregowane według tego, jaką część obrazu zajmuje każdy z nich. Wybierz od 3 do 12 próbek, skopiuj dowolną jako HEX, RGB lub HSL, kliknij w dowolnym miejscu obrazu, aby pobrać kolor konkretnego piksela, i wyeksportuj paletę jako zmienne CSS, SCSS, konfigurację Tailwind, JSON lub pasek PNG. Obraz jest analizowany na Twoim urządzeniu i nigdy nie jest wysyłany.

Jak wyciągnąć kolory z obrazu

Upuść obraz na stronę, wybierz go z plików lub wklej prosto ze schowka. Działają PNG, JPEG, WebP, GIF i SVG.
Ustaw w polu Kolory liczbę próbek, której potrzebujesz. Pasek nad listą pokazuje każdy kolor proporcjonalnie do jego udziału w obrazie.
Kliknij wartość, aby skopiować ją jako HEX, RGB lub HSL.
Potrzebujesz konkretnego miejsca, na przykład koloru przycisku na zrzucie ekranu? Kliknij ten punkt na obrazie, aby pobrać jego kolor, a potem dodaj go do palety przyciskiem plusa.
Wybierz format eksportu i skopiuj kod albo pobierz paletę jako pasek PNG.

Jak wyznaczane są dominujące kolory

Zdjęcie może z łatwością zawierać sto tysięcy różnych kolorów, z których większość to drobne odmiany siebie nawzajem. Aby znaleźć tych kilka, które się liczą, obraz jest zmniejszany, a każdy piksel trafia do grupy pikseli najbardziej do niego podobnych metodą zwaną klasteryzacją k-średnich (k-means). Każda grupa staje się jedną próbką: średnią swoich pikseli, uszeregowaną według liczby pikseli w grupie.

Dwa szczegóły sprawiają, że wynik jest lepszy niż w naiwnym próbniku. Po pierwsze, kolory są porównywane w OKLab, przestrzeni barw zaprojektowanej tak, by równe odległości wyglądały dla oka jak równe różnice. Klasteryzacja w zwykłym RGB ma tendencję do dzielenia zieleni na wiele niemal identycznych odcieni i łączenia wyraźnie różnych niebieskich. Po drugie, punkty startowe są wybierane deterministycznie, z preferencją dla kolorów zarówno częstych, jak i odległych od już wybranych, więc ten sam obraz zawsze daje tę samą paletę, a mały, ale wyrazisty akcent, jak czerwone logo na szarej ścianie, nie ginie w tle.

Przezroczyste piksele są pomijane, więc logo na przezroczystym PNG daje kolory logo, a nie czarną próbkę.

HEX, RGB czy HSL: co skopiować

Potrzebujesz OKLCH, CMYK lub HSV albo jaśniejszego odcienia jednej z próbek? Wklej wartość HEX do konwertera kolorów, który pokazuje każdy zapis wraz z rozjaśnieniami, przyciemnieniami i harmoniami kolorów.

HEX: #2a9d8f. Sześć cyfr szesnastkowych dla czerwieni, zieleni i niebieskiego. Najbardziej zwarty zapis, akceptowany przez każde narzędzie projektowe i przez CSS.
RGB: rgb(42, 157, 143). Te same trzy kanały jako liczby od 0 do 255. Przydatne w kodzie, który wykonuje obliczenia na kolorach, lub w narzędziach proszących o osobne wartości.
HSL: hsl(173 58% 39%). Odcień, nasycenie i jasność. Zapis najłatwiejszy do ręcznej korekty: zwiększ jasność dla stanu hover, zmniejsz nasycenie dla stonowanego wariantu.

Formaty eksportu

Zmienne CSS: blok :root z --palette-1, --palette-2 i kolejnymi, gotowy do dowolnego arkusza stylów.
SCSS: zmienne w stylu $palette-1 dla projektów Sass.
Konfiguracja Tailwind v3: obiekt theme.extend.colors do tailwind.config.js, dający klasy takie jak bg-palette-1.
Tailwind v4 @theme: właściwości --color-palette-1 dla konfiguracji Tailwind 4 opartej na CSS.
JSON: tablica z wartościami HEX, RGB i HSL każdego koloru, dla skryptów i design tokenów.
Pasek PNG: próbki obok siebie jako obraz, do moodboardu, briefu lub wiadomości na czacie.

Wskazówki dla przydatnej palety

Mniej kolorów do identyfikacji marki, więcej do ilustracji. Pięć lub sześć próbek zwykle oddaje nastrój zdjęcia; zwiększ liczbę do 10 lub 12, gdy potrzebujesz też tonów uzupełniających.
Najpierw przytnij. Duże niebo lub biała ramka strony dominują wynik. Przytnij obraz do interesującej Cię części, a paleta będzie ją odzwierciedlać.
Sprawdź kolory tekstu przed użyciem. Kolory wyciągnięte ze zdjęcia rzadko mają wystarczający kontrast dla tekstu. Każdą parę, na której ma się znaleźć tekst, sprawdź w narzędziu sprawdzania kontrastu.
Do dokładnych wartości używaj pipety. Dominujące kolory to średnie. Gdy potrzebujesz dokładnego koloru jednego piksela, na przykład logo lub elementu interfejsu na zrzucie ekranu, kliknij go.

Najczęstsze pytania

Jak uzyskać paletę kolorów ze zdjęcia?: Upuść obraz na tę stronę. Dominujące kolory pojawią się od razu, uszeregowane według tego, jaką część obrazu zajmują. Możesz zmienić ich liczbę, skopiować każdy jako HEX, RGB lub HSL i wyeksportować zestaw jako CSS, Tailwind lub JSON.
Jak znaleźć kod HEX koloru na obrazku?: Wczytaj obraz i kliknij dokładnie to miejsce, które Cię interesuje. Pipeta pokaże wartości HEX, RGB i HSL tego piksela, a kliknięcie dowolnej wartości ją skopiuje.
Jak obliczane są dominujące kolory?: Obraz jest zmniejszany, a jego piksele grupowane metodą k-średnich w przestrzeni barw OKLab, która mierzy różnicę kolorów tak, jak postrzegają ją ludzie. Średni kolor każdej grupy staje się próbką, uszeregowaną według udziału pikseli, które zawiera.
Dlaczego dostaję trochę inne kolory niż w innym narzędziu?: Każde narzędzie inaczej grupuje podobne piksele, a próbki to średnie tych grup, a nie pojedyncze piksele. Punkty startowe są tu wybierane deterministycznie, więc ten sam obraz zawsze daje tutaj ten sam wynik. Gdy potrzebujesz dokładnej wartości piksela, użyj pipety.
Czy mogę wyeksportować paletę do Tailwind CSS?: Tak. Wybierz konfigurację Tailwind v3, aby dostać obiekt colors do wklejenia w tailwind.config.js, albo Tailwind v4 @theme dla konfiguracji opartej na CSS, a następnie skopiuj lub pobierz kod.
Czy działa z przezroczystymi PNG i logo?: Tak. Piksele w większości przezroczyste są pomijane, więc paleta odzwierciedla widoczną grafikę, a nie puste tło.
Czy mój obraz jest wysyłany?: Nie. Obraz jest dekodowany i analizowany w Twojej przeglądarce i nigdy nie opuszcza Twojego urządzenia.

Powiązane narzędzia

Zobacz wszystkie narzędzia

Konwerter kolorówPrzeliczaj kolory między HEX, RGB, HSL, HSV, CMYK i OKLCH.Sprawdzanie kontrastu WCAGSprawdź kolory tekstu i tła pod kątem WCAG AA i AAA.Konwerter obrazówPrzekoduj, przeskaluj i zwektoryzuj obrazy z podglądem przed/po na żywo.Generator faviconWszystkie rozmiary favicon, prawdziwy wielorozmiarowy .ico i manifest aplikacji z jednego obrazu.Data StudioPrzenoś tekst strukturalny między JSON, YAML, TOML, CSV i Markdown.Kompresja i archiwaZmniejsz dowolny plik za pomocą gzip lub Brotli albo spakuj folder do ZIP-a.