Na webe má každá farba svoju úlohu: pozadie, text, tlačidlá, odkazy a upozornenia. Týchto 12 paliet je navrhnutých presne na to, so svetlým alebo tmavým pozadím, čitateľnou farbou textu a akcentom pre tlačidlá. HEX kódy skopíruj rovno do CSS alebo do svojho webového editora.
Čistá modrá pre SaaS
Takmer biele pozadie, veľmi tmavomodrý text a tlačidlá v živej modrej.
Striedma firemná
Pre advokátske kancelárie, poradenské firmy alebo priemyselné podniky.
Teplý e-shop
Oranžová zvýrazní tlačidlá nákupu na teplom pozadí.
Tmavý režim so zelenou
Tmavé pozadia vo vrstvách, svetlý text a zelený akcent pre akcie.
Prírodná a organická
Pre obchody s prírodnými produktmi, záhradníctva alebo wellness.
Priateľské pastely
Ústretová; tmavá modrosivá zaistí čitateľný text.
Redakčná s červenou
Pre blogy, magazíny a médiá; červená označuje odkazy a titulky.
Technologická purpurová
Častá pri digitálnych produktoch, online kurzoch a AI nástrojoch.
Tyrkysová a koralová
Dva doplnkové akcenty: jeden pre tlačidlá a druhý pre upozornenia.
Tmavý luxus
Pre hotely, reštaurácie alebo prémiové značky, kde hlavnú úlohu hrajú fotky.
Zdravie a wellness
Čistá a pokojná; dobrá pre kliniky a terapie.
Piesková a modrozelená
Teplá a zároveň seriózna; pre cestovný ruch, reality alebo kaviarne.
Ťukni na farbu a skopíruj jej HEX kód. Ikona ceruzky otvorí paletu v editore, kde ju môžeš upraviť.
Použi pravidlo 60-30-10
Dominantnú farbu (zvyčajne pozadie) použi asi na 60 % stránky, vedľajšiu farbu na 30 % (sekcie, karty, hlavička) a akcent na zvyšných 10 %. Akcent si nechaj pre tlačidlá a odkazy, aby používateľ vedel, kam kliknúť.
Skontroluj kontrast textu
Pravidlá prístupnosti WCAG vyžadujú pri bežnom texte kontrast aspoň 4,5:1. Svetlosivá na bielej vyzerá elegantne, no zle sa číta, hlavne na mobile na slnku. Pred zverejnením použi nástroj na kontrolu kontrastu.
Urči farby pre stavy a upozornenia
Okrem farieb značky potrebuje web farby pre chyby (červená), úspech (zelená) a varovania (žltá alebo oranžová). Vyber odtiene, ktoré ladia s tvojou paletou, a vo formulároch aj hláškach ich používaj vždy rovnako.
Zvyčajne stačia tri alebo štyri: pozadie, farba textu, hlavná farba a akcent, plus farby pre upozornenia.
Aká farba je najlepšia na tlačidlá na webe?
Jedna najlepšia farba neexistuje; dôležité je, aby tlačidlo kontrastovalo s pozadím a aby sa táto farba na stránke nepoužívala na nič iné.
Ako nastavím farebnú paletu na svojom webe?
Skopíruj HEX kódy do farebných premenných vo svojom CSS alebo do globálnych nastavení farieb vo svojom editore, napríklad vo WordPresse, Wixe alebo Shopify.