Na webu má každá barva svůj úkol: pozadí, text, tlačítka, odkazy a upozornění. Těchto 12 palet je navržených přesně pro to, se světlým nebo tmavým pozadím, čitelnou barvou textu a akcentem pro tlačítka. Kódy HEX zkopíruj rovnou do CSS nebo do svého webového editoru.
Čistá modrá pro SaaS
Téměř bílé pozadí, velmi tmavě modrý text a tlačítka v živé modré.
Střídmá firemní
Pro advokátní kanceláře, poradenské firmy nebo průmyslové podniky.
Teplý e-shop
Oranžová zvýrazní tlačítka nákupu na teplém pozadí.
Tmavý režim se zelenou
Tmavá pozadí ve vrstvách, světlý text a zelený akcent pro akce.
Přírodní a organická
Pro obchody s přírodními produkty, zahradnictví nebo wellness.
Přátelské pastely
Vstřícná; tmavá modrošedá zajistí čitelný text.
Redakční s červenou
Pro blogy, magazíny a média; červená označuje odkazy a titulky.
Technologická purpurová
Častá u digitálních produktů, online kurzů a AI nástrojů.
Tyrkysová a korálová
Dva doplňkové akcenty: jeden pro tlačítka a druhý pro upozornění.
Tmavý luxus
Pro hotely, restaurace nebo prémiové značky, kde hlavní roli hrají fotky.
Zdraví a wellness
Čistá a klidná; dobrá pro kliniky a terapie.
Písková a modrozelená
Teplá a zároveň seriózní; pro cestovní ruch, realitky nebo kavárny.
Klepni na barvu a zkopíruj její kód HEX. Ikona tužky otevře paletu v editoru, kde ji můžeš upravit.
Použij pravidlo 60-30-10
Dominantní barvu (obvykle pozadí) použij asi na 60 % stránky, vedlejší barvu na 30 % (sekce, karty, záhlaví) a akcent na zbývajících 10 %. Akcent si nech pro tlačítka a odkazy, aby uživatel věděl, kam kliknout.
Zkontroluj kontrast textu
Pravidla přístupnosti WCAG vyžadují u běžného textu kontrast alespoň 4,5:1. Světle šedá na bílé vypadá elegantně, ale špatně se čte, hlavně na mobilu na slunci. Před zveřejněním použij nástroj na kontrolu kontrastu.
Urči barvy pro stavy a upozornění
Kromě barev značky potřebuje web barvy pro chyby (červená), úspěch (zelená) a varování (žlutá nebo oranžová). Vyber odstíny, které ladí s tvou paletou, a ve formulářích i hláškách je používej vždy stejně.