🎨 Barvy šablony

📌 Funkce v této sekci

  • Barvy pozadí webu, hlavičky, patičky a obsahu

  • Barvy textu (hlavní, sekundární, doplňkové)

  • Barvy odkazů a jejich pozadí (běžné i při najetí)

🔲 Barvy pozadí

PoložkaVýznam
Hlavní pozadí stránkyCelkové pozadí webu mimo obsahový blok
Pozadí obsahové částiKontejner pro texty, články a boxy
Pozadí hlavičkyBarva horní části webu
Pozadí patičkyBarva dolní části stránky
Pozadí obsahuBarva vnitřního obsahu sekcí (např. boxy, karty)

📝 Barvy textu

PoložkaVýznam
Hlavní barva textuStandardní odstavec a obecný obsah
Vedlejší barva textuPomocný text (metadata, datum, informace)
Vedlejší barva 1 a 2Jemnější odstíny pro méně důležité informace

🧠 Doporučeno zachovat kontrastní rozdíly mezi hlavním a sekundárním textem kvůli přístupnosti (WCAG).

🔗 Barvy odkazů

PoložkaVýznam
Hlavní barva odkazuBarva běžného odkazu
Barva odkazu po přejetí myšíHover efekt při interakci
Sekundární odkazOdkazy v boxech, kartách nebo méně důležitých částech
Sekundární hoverEfekt po přejetí u vedlejších odkazů

🎨 Barvy pozadí odkazů

PoložkaVýznam
Hlavní pozadí odkazuNapř. tlačítka a zvýrazněné boxy
Hover hlavního pozadíBarva pozadí při přejetí
Sekundární pozadí odkazuTlačítka v méně důležitých sekcích
Hover sekundárního pozadíPři přejetí myší

🧪 Příklad nastavení

Cíl: Vytvořit moderní vzhled s tmavým záhlavím, světlým obsahem a modrými akčními prvky.

PrvekBarva
Pozadí hlavičky#0d1117 (tmavá)
Text v hlavičce#ffffff (bílá)
Pozadí obsahu#ffffff
Hlavní barva odkazu#0069d9
Hover barva odkazu#0056b3
Hlavní text#212529
Vedlejší text#6c757d

Doporučení

  • Nepoužívejte příliš mnoho barev. Ideální je 2–3 hlavní barvy + 2 doplňkové.

  • Testujte kontrast. Text musí být dobře čitelný i pro slabozraké.

  • Zachovejte konzistenci. Hlavní CTA (Call-To-Action) prvky by měly mít stejnou barvu napříč webem.