Ekstraktor palety kolorów

Wyciągnij paletę kolorów z obrazu, sprawdź kontrast dowolnych dwóch kolorów i wyeksportuj ją jako CSS lub Tailwind — bezpośrednio w przeglądarce.

O narzędziu Ekstraktor palety kolorów

Co to jest

To narzędzie znajduje główne kolory obrazu — zdjęcia, logo, zrzutu ekranu — i układa je w paletę z kolorem dominującym na początku. Dodaj własne kolory pipetą prosto z obrazu, porównaj dowolne dwa pod kątem kontrastu WCAG i wyeksportuj paletę jako zmienne CSS, konfigurację Tailwind lub JSON.

Główne funkcje

  • Paleta głównych kolorów obrazu PNG, JPEG lub WebP, z dominującym na początku.
  • Liczba kolorów do wyboru.
  • Własne kolory pobrane z obrazu pipetą.
  • Sprawdzenie kontrastu WCAG dla dowolnych dwóch kolorów, dla zwykłego i dużego tekstu.
  • Eksport jako zmienne CSS, Tailwind lub JSON; kopiowanie każdego koloru jako HEX lub RGB.

Jak używać

  1. Upuść obraz na obszar, kliknij go, aby wybrać plik, lub kliknij „Przykład”.
  2. Ustaw liczbę kolorów.
  3. W razie potrzeby pobierz dodatkowe kolory z obrazu i zaznacz dwa, aby porównać ich kontrast.
  4. Skopiuj pojedyncze kolory lub wyeksportuj całą paletę.

Kiedy się przydaje

  • Zbudować schemat kolorów strony ze zdjęcia marki lub logo.
  • Sprawdzić, czy tekst w Twoich kolorach jest czytelny, zanim ich użyjesz.
  • Uzyskać dokładne kody kolorów ze zrzutu ekranu projektu.

Prywatność i ograniczenia

Twoje dane

Twój obraz jest przetwarzany w przeglądarce i nie trafia na serwer — witryna otrzymuje tylko anonimowe zdarzenie „otwarto narzędzie”, bez treści. Wynik wysłany do innego narzędzia zostaje na tym urządzeniu przez 24 godziny w „Ostatniej aktywności”.

Ograniczenia

  • Całkowicie przezroczyste piksele są pomijane; obraz bez widocznych kolorów nie da palety.
  • Paleta pokazuje główne grupy kolorów, a nie każdy odcień na obrazie.

Najczęstsze pytania

Jak wybierane są kolory?

Podobne kolory obrazu są grupowane, a każda grupa daje jeden kolor palety. Grupa zajmująca największą powierzchnię to kolor dominujący.

Co oznaczają AA i AAA w sprawdzaniu kontrastu?

To poziomy dostępności WCAG. AA wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego; AAA — 7:1 i 4,5:1.

Który format eksportu wybrać?

Zmienne CSS do zwykłego CSS, Tailwind do konfiguracji Tailwind, JSON do narzędzi projektowych lub własnych skryptów.