Darmowe narzędzie, bez rejestracji

Wyodrębnij paletę kolorów z dowolnej strony

Wklej URL, aby pobrać kolory marki, tekstu, tła i akcentów strony z kodami hex, uszeregowane według częstości użycia. Za darmo, bez rejestracji. Zobacz pełne przykłady: DESIGN.md Stripe i DESIGN.md Linear, albo sprawdź, co dodaje DESIGN.md.

Wypróbuj

Użyj tej palety w swoim kodzie

Ekstraktor grupuje kolory według ról (tło, panel, tekst, marka, akcent i obramowanie) i szereguje je według tego, jaką część strony pokrywa każdy z nich. Aby ich użyć, nadaj każdej roli nazwę, zamiast wklejać kody hex w całych stylach; wtedy jedna zmiana zaktualizuje każde miejsce, w którym kolor występuje.

1. Nazywaj kolory według roli, nie odcienia. --color-text-muted nadal ma sens po redesignie; --gray-600 nie mówi, gdzie się go używa. Podmień kody hex na skopiowane.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. Użyj ich w Tailwind. Każda zmienna staje się zestawem klas, takich jak bg-surface, text-ink-muted i border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. Sprawdź pary, których używasz. Tekst główny potrzebuje kontrastu co najmniej 4,5:1 względem tła, a duży tekst 3:1. Ekstraktor pokazuje kontrast głównego koloru tekstu na tle strony; każdą inną parę sprawdź, zanim ją wdrożysz.

Kolory to jedna warstwa design systemu. DESIGN.md trzyma je obok skali typograficznej, odstępów i zasad komponentów, dzięki czemu twój agent AI do kodowania używa właściwego koloru we właściwym miejscu.

FAQ

Pytania o paletę kolorów

Krótkie odpowiedzi o darmowym narzędziu: Ekstraktor palety kolorów.

Strona jest wczytywana w prawdziwej przeglądarce, a kolory, które maluje, są mierzone według tego, jaką część strony pokrywają. Każdy kolor dostaje najbardziej prawdopodobną rolę: tło, panel, tekst, marka, akcent lub obramowanie.

Paleta wymienia kolory faktycznie używane przez stronę, uszeregowane według pokrycia i ograniczone do dwunastu. Kolory w obrazach lub filmach, kolory pojawiające się tylko po najechaniu kursorem i kolory używane na innych podstronach witryny nie są liczone.

Nie. Odczytuje stronę w motywie, który domyślnie widzi nowy odwiedzający, zwykle jasnym. Strony domyślnie ciemne wracają jako ciemne. Pełny DESIGN.md obejmuje tryb ciemny, jeśli strona go ma.

Nie jako plik. Możesz skopiować kody hex: wybierz próbkę, aby skopiować jeden, albo skopiuj wszystkie naraz, po jednym w linii.

Tak, piksel po pikselu. W Chrome lub Edge kliknij element prawym przyciskiem, wybierz Zbadaj (Inspect) i kliknij kwadracik koloru obok dowolnego koloru w panelu Style (Styles); jego selektor ma pipetę, która odczytuje dowolny punkt strony. Firefox ma taką samą pipetę na pasku narzędzi Inspektora.

To narzędzie wymienia tylko kolory. DESIGN.md obejmuje kolory wraz z ich rolami, skalę typograficzną, odstępy i zasady komponentów strony, w jednym pliku, którym może kierować się twój agent AI do kodowania.

Więcej darmowych narzędzi

Zobacz wszystkie darmowe narzędzia

  • Walidator DESIGN.md

    Wklej DESIGN.md, aby sprawdzić jego strukturę i tokeny oraz zobaczyć podgląd, prosto w przeglądarce.

    Otwórz: Walidator DESIGN.md

Potrzebujesz całego design systemu?

Wygeneruj DESIGN.md z kolorami, skalą typograficzną, odstępami i komponentami dowolnej strony, gotowy dla twojego agenta AI do kodowania.

Wygeneruj DESIGN.md