HedgieTools

Generátor palet

Vyjděte ze své hlavní barvy a získejte úplnou paletu pro rozhraní: sekundární, terciární, úspěch, varování, nebezpečí a neutrální barvy, včetně odstínů a kontroly kontrastu.

Vaše hlavní barva

Zadejte hodnotu nebo vyberte barvu: zbytek palety se vytvoří kolem ní.

Sekundární a terciární
Formát hodnot

Zadejte hodnotu HEX, například #2563EB, nebo klikněte na čtverec a vyberte barvu.

Vaše paleta

Hodnotu nebo odstín (50 až 950) zkopírujete kliknutím. Tužkou nahradíte navrženou barvu vlastní: zůstane pevně nastavená, i když změníte hlavní barvu.

  • —

    Primární

    vaše barva
  • —

    Sekundární

    komplementární
  • —

    Terciární

    téměř komplementární
  • —

    Info

    modrá
  • —

    Úspěch

    zelená
  • —

    Varování

    oranžová
  • —

    Nebezpečí

    červená
  • —

    Neutrální

    tónovaná šedá

Světlé a tmavé tokeny

Pracovní barvy vašeho rozhraní, připravené pro světlý i tmavý motiv. Každá odkazuje na odstín palety. Kliknutím ji zkopírujete.

  • --backgroundPozadí stránky
  • --surfaceKarty a panely
  • --surface-mutedVedlejší plochy
  • --borderOkraje a oddělovače
  • --textHlavní text
  • --text-mutedVedlejší text
  • --primaryTlačítka a odkazy
  • --primary-hoverStav při najetí
  • --on-primaryText na primární barvě
  • --focus-ringObrys zaměření
  • --secondarySekundární akcent
  • --tertiaryTerciární akcent
  • --infoInformace
  • --info-softPozadí informací
  • --successÚspěch
  • --success-softPozadí úspěchu
  • --warningVarování
  • --warning-softPozadí varování
  • --dangerNebezpečí, chyba
  • --danger-softPozadí chyby

Ladící barvy

Klasické harmonie kolem vaší hlavní barvy pro ilustrace, grafy nebo akcenty.

  • Komplementární

    opačná barva

  • Rozdělená komplementární

    jemnější než opačná barva

  • Analogické

    sousední barvy

  • Triáda

    tři vyvážené barvy

  • Tetráda

    čtyři barvy ve čtverci

  • Monochromatická

    jeden barevný tón, různé intenzity

Náhled a kontrast

Paleta použitá na několik prvků rozhraní a čitelnost každé dvojice barev podle pravidel WCAG.

Motiv náhledu
Nadpis stránkyVedlejší, méně důležitý text pod nadpisem.
Karta s odkazem a tlačítky.
PrimárníSekundárníTerciární
Info · Je k dispozici aktualizace.
Úspěch · Vaše změny jsou uložené.
Varování · Vaše předplatné brzy vyprší.
Chyba · Platba se nezdařila.
  • Text na pozadí
    Poměr—Běžný text—Velký text—AAA—
  • Vedlejší text na pozadí
    Poměr—Běžný text—Velký text—AAA—
  • Odkaz na pozadí
    Poměr—Běžný text—Velký text—AAA—
  • Primární tlačítko
    Poměr—Běžný text—Velký text—AAA—
  • Sekundární tlačítko
    Poměr—Běžný text—Velký text—AAA—
  • Terciární text na pozadí
    Poměr—Běžný text—Velký text—AAA—
  • Upozornění: informace
    Poměr—Běžný text—Velký text—AAA—
  • Upozornění: úspěch
    Poměr—Běžný text—Velký text—AAA—
  • Upozornění: varování
    Poměr—Běžný text—Velký text—AAA—
  • Upozornění: nebezpečí
    Poměr—Běžný text—Velký text—AAA—

Export

Získejte paletu ve formátu zvoleném výše (HEX).

Zadejte hlavní barvu a vygeneruje se kód.

Proměnné CSS pro paletu (--color-primary-500…). Tokeny odkazují na tyto proměnné; tmavý motiv zapnete atributem data-theme="dark" na elementu html.

O generátoru palety

Vyberte hlavní barvu své značky a získejte vše, co rozhraní kolem ní potřebuje: doprovodné barvy, stavové barvy, neutrální tóny, odstíny, světlé a tmavé tokeny, kontrolu kontrastu a kód k vložení – a to vše bez opuštění prohlížeče.

Celá paleta z jedné barvy

Nástroj z vaší hlavní barvy odvodí sekundární a terciární barvu, stavové barvy (informace, úspěch, varování, nebezpečí) sladěné s jejím stylem a lehce tónované šedé pro pozadí a text.

Odstíny připravené k použití

Každá barva má jedenáct odstínů, od nejsvětlejšího (50) po nejtmavší (950), pro pozadí, okraje, stavy při najetí a text. Pokud vám navržená barva nevyhovuje, nahraďte ji vlastní: její odstíny se přizpůsobí.

Světlé a tmavé tokeny

Pozadí, plochy, okraje, text, najetí, zaměření a pozadí upozornění: každá pracovní barva odkazuje na odstín palety, s jednou hodnotou pro světlý motiv a jednou pro tmavý.

Ověřený kontrast

Každá dvojice textu a pozadí je hodnocena podle pravidel WCAG: 4,5:1 pro běžný text, 3:1 pro velký text a 7:1 pro úroveň AAA.

Export do CSS, Tailwind, JSON

Zkopírujte každou hodnotu v HEX, RGB, HSL nebo OKLCH, nebo si stáhněte soubor s proměnnými CSS, motiv pro Tailwind v4, konfiguraci pro Tailwind v3, JSON nebo prostý seznam. Vše probíhá ve vašem prohlížeči: nic se neodesílá ani neukládá.

Související nástroje