HedgieTools

Generator palet kolorów

Zacznij od koloru głównego i otrzymaj pełną paletę interfejsu: kolory drugorzędny, trzeciorzędny, sukcesu, ostrzeżenia, niebezpieczeństwa i neutralne, z odcieniami i kontrolą kontrastu.

Twój kolor główny

Wpisz wartość lub wybierz kolor: reszta palety powstanie wokół niego.

Drugorzędny i trzeciorzędny
Format wartości

Wpisz wartość HEX, np. #2563EB, lub kliknij kwadrat, aby wybrać kolor.

Twoja paleta kolorów

Kliknij wartość lub odcień (od 50 do 950), aby go skopiować. Ołówkiem zastąpisz proponowany kolor własnym: nie zmieni się, gdy zmienisz kolor główny.

  • —

    Podstawowy

    twój kolor
  • —

    Drugorzędny

    dopełniający
  • —

    Trzeciorzędny

    prawie dopełniający
  • —

    Informacja

    niebieski
  • —

    Sukces

    zielony
  • —

    Ostrzeżenie

    pomarańczowy
  • —

    Zagrożenie

    czerwony
  • —

    Neutralny

    zabarwiona szarość

Tokeny motywu jasnego i ciemnego

Kolory użytkowe twojego interfejsu, gotowe dla motywu jasnego i ciemnego. Każdy z nich wskazuje odcień z palety. Kliknij, aby skopiować.

  • --backgroundTło strony
  • --surfaceKarty i panele
  • --surface-mutedObszary drugorzędne
  • --borderObramowania i separatory
  • --textTekst główny
  • --text-mutedTekst drugorzędny
  • --primaryPrzyciski i linki
  • --primary-hoverStan najechania
  • --on-primaryTekst na kolorze podstawowym
  • --focus-ringObrys fokusu
  • --secondaryAkcent drugorzędny
  • --tertiaryAkcent trzeciorzędny
  • --infoInformacje
  • --info-softTło informacji
  • --successSukces
  • --success-softTło sukcesu
  • --warningOstrzeżenie
  • --warning-softTło ostrzeżenia
  • --dangerNiebezpieczeństwo, błąd
  • --danger-softTło błędu

Pasujące kolory

Klasyczne harmonie wokół twojego koloru głównego – do ilustracji, wykresów lub akcentów.

  • Dopełniające

    kolor przeciwny

  • Dopełniające rozdzielone

    łagodniejsze niż kolor przeciwny

  • Analogiczne

    kolory sąsiednie

  • Triada

    trzy zrównoważone kolory

  • Tetrada

    cztery kolory w kwadracie

  • Monochromatyczne

    jedna barwa, różne natężenia

Podgląd i kontrast

Paleta zastosowana do kilku elementów interfejsu oraz czytelność każdego zestawienia według zasad WCAG.

Motyw podglądu
Tytuł stronyTekst drugorzędny, mniej ważny, pod tytułem.
Karta z linkiem i przyciskami.
PodstawowyDrugorzędnyTrzeciorzędny
Informacja · Dostępna jest aktualizacja.
Sukces · Zmiany zostały zapisane.
Ostrzeżenie · Twoja subskrypcja wkrótce wygaśnie.
Błąd · Płatność nie powiodła się.
  • Tekst na tle
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Tekst drugorzędny na tle
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Link na tle
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Przycisk podstawowy
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Przycisk drugorzędny
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Tekst trzeciorzędny na tle
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Komunikat informacyjny
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Komunikat o sukcesie
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Komunikat ostrzegawczy
    Współczynnik—Zwykły tekst—Duży tekst—AAA—
  • Komunikat o niebezpieczeństwie
    Współczynnik—Zwykły tekst—Duży tekst—AAA—

Eksport

Pobierz paletę w formacie wybranym powyżej (HEX).

Wpisz kolor główny, aby wygenerować kod.

Zmienne CSS palety (--color-primary-500…). Tokeny wskazują na te zmienne; ciemny motyw włączysz atrybutem data-theme="dark" na elemencie html.

O generatorze palety kolorów

Wybierz główny kolor swojej marki i otrzymaj wszystko, czego interfejs potrzebuje wokół niego: kolory towarzyszące, kolory stanów, neutralne, odcienie, tokeny motywu jasnego i ciemnego, kontrolę kontrastu i kod do wklejenia – bez opuszczania przeglądarki.

Pełna paleta z jednego koloru

Narzędzie wyprowadza z koloru głównego kolor drugorzędny i trzeciorzędny, kolory stanów (informacja, sukces, ostrzeżenie, niebezpieczeństwo) dopasowane do jego stylu oraz lekko zabarwione szarości do tła i tekstu.

Odcienie gotowe do użycia

Każdy kolor ma jedenaście odcieni, od najjaśniejszego (50) do najciemniejszego (950), do tła, obramowań, stanów najechania i tekstu. Jeśli proponowany kolor ci nie odpowiada, zastąp go własnym: jego odcienie dopasują się same.

Tokeny motywu jasnego i ciemnego

Tło, powierzchnia, obramowanie, tekst, najechanie, fokus i tła komunikatów: każdy kolor użytkowy wskazuje odcień z palety, z jedną wartością dla motywu jasnego i jedną dla ciemnego.

Sprawdzony kontrast

Każde zestawienie tekstu i tła jest oceniane według zasad WCAG: 4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu i 7:1 dla poziomu AAA.

Eksport do CSS, Tailwind, JSON

Skopiuj każdą wartość w HEX, RGB, HSL lub OKLCH albo pobierz plik ze zmiennymi CSS, motyw Tailwind v4, konfigurację Tailwind v3, JSON lub zwykłą listę. Wszystko dzieje się w przeglądarce: nic nie jest wysyłane ani zapisywane.

Podobne narzędzia