Paleta kolorów z obrazu

Upuść obraz i otrzymaj jego główne kolory w HEX, RGB, HSL i OKLCH, posortowane według tego, ile obrazu zajmują – albo kliknij w dowolnym miejscu, aby pobrać kolor.

O tym narzędziu

Kolory Twojego obrazu, gotowe do kodu i projektów

Kolory marki z logo, moodboard ze zdjęcia albo dokładny odcień jednego piksela – obliczone w przeglądarce.

Dominujące kolory z udziałem

Od 3 do 16 kolorów, grupowanych w percepcyjnej przestrzeni OKLab, tak by podobne odcienie łączyły się tak, jak widzi je oko. Każdy pokazuje, jaką część obrazu zajmuje, a ten sam obraz zawsze daje tę samą paletę.

Każdy format, z kontrastem

HEX, RGB, HSL i OKLCH, każdy z przyciskiem kopiowania, plus współczynnik kontrastu WCAG na białym i czarnym oraz informacja, czy tekst spełnia AA lub AAA.

Eksport wszędzie

Zmienne CSS, motyw Tailwind, zmienne SCSS i JSON do kodu; Adobe Swatch Exchange (.ase) dla Photoshopa i Illustratora; paleta .gpl dla GIMP-a, Inkscape i Krity; oraz karta palety PNG do udostępnienia.

Jak to działa

  1. Upuść zdjęcie, zrzut ekranu lub logo (PNG, JPG, WebP, HEIC lub SVG) albo wklej je przez Ctrl + V.
  2. Suwakiem „Kolory” ustaw, ile kolorów chcesz. Paleta zmienia się od razu.
  3. Kliknij w dowolnym miejscu obrazu, aby dodać ten dokładny kolor do „Pobranych kolorów”.
  4. Skopiuj pojedyncze wartości albo wybierz format eksportu i skopiuj go lub pobierz – albo zapisz „Kartę palety (PNG)”.

Często zadawane pytania

Czy moje zdjęcia są wysyłane na serwer?

Nie. Każdy obraz jest odczytywany, przetwarzany i zapisywany w karcie przeglądarki za pomocą Canvas, Web Workers i WebAssembly. Nic nie jest wysyłane, przechowywane ani rejestrowane.

Jak wyszukiwane są dominujące kolory?

Obraz jest zmniejszany do 256 px, piksele grupowane według koloru, a klasteryzacja k-means w przestrzeni OKLab znajduje żądaną liczbę kolorów. Przezroczyste piksele są pomijane; udział to część widocznego obrazu najbliższa danemu kolorowi.

Co oznacza współczynnik kontrastu?

To kontrast WCAG 2 między kolorem a białym lub czarnym tekstem. 4,5:1 spełnia AA dla zwykłego tekstu, 3:1 AA dla dużego tekstu (24 px lub 19 px pogrubiony), a 7:1 spełnia AAA.

Czy mogę otworzyć paletę w Photoshopie lub GIMP-ie?

Tak. Plik .ase wczytasz do panelu Próbki w Photoshopie, Illustratorze i InDesignie; plik .gpl do GIMP-a, Inkscape i Krity.

Czy to jest darmowe i czy dodaje znak wodny?

Tak, możesz korzystać za darmo bez zakładania konta, a Toolula nigdy nie dodaje znaku wodnego. Darmowy plan ma limity uczciwego użytkowania; opcjonalny plan Toolula Pro je podnosi.