Generátor barevných palet

Proč dobrá barevná paleta nese celý design

Zvolte špatné barvy a lidé to ucítí dřív, než to dokážou pojmenovat. Stránka pak působí lacině, logo vypadá kalně, graf se změní v šum. Zvolte ty správné a práce prostě zapadne na místo: působí záměrně, klidně, snadno se v ní orientuje oko. Barva odvádí spoustu tiché práce, nastavuje náladu, vede oko a říká čtenáři, co je nejdůležitější. Paleta tedy není dekorace, kterou přišroubujete na konec. Je to rozhodnutí, které uděláte hned na začátku, a téměř všechno ostatní se o něj opírá.

Dobrou zprávou je, že k solidnímu schématu nepotřebujete titul z výtvarné školy. Potřebujete hrstku pravidel z teorie barev a rychlý způsob, jak zkoušet nápady. Přesně k tomu slouží generátor: umožní vám projít desítky kombinací v čase, který dřív zabralo přemýšlení nad jednou jedinou.

Teorie barev bez odborného žargonu

Většina harmonií vychází z jedné jednoduché myšlenky: kde barvy leží na barevném kole vůči sobě navzájem. Naučte se čtyři vzory a dokážete přečíst nebo vytvořit téměř jakékoli schéma.

• Komplementární používá dvě barvy přímo naproti sobě, například modrou a oranžovou. Je vysoce energická a skvěle upoutá pozornost, i když příliš mnoho obou barev spolu soupeří o pozornost, takže nechte jednu vést a druhou použijte jako akcent.
• Analogická používá tři barvy, které leží vedle sebe, například červenou, oranžovou a žlutou. Je nízkokontrastní, klidná a jde o typ harmonie, který vidíte všude v přírodě. Šetrná k očím, ale možná budete potřebovat někde přidat kontrast, aby to nepůsobilo ploše.
• Triadická používá tři barvy rovnoměrně rozmístěné po kole, například červenou, žlutou a modrou. Je jasná a vyvážená a funguje nejlépe, když jedna barva dominuje a zbylé dvě hrají podpůrnou roli.
• Monochromatická se drží jednoho odstínu a mění jeho světlost a sytost. Je to nejspolehlivější schéma ze všech, čisté a soudržné, a dobrá záchranná varianta, když nic jiného nesedí.

Náhodný generátor je zábavný pro inspiraci, ale skutečná hodnota leží v harmonických režimech. Udržují barvy matematicky provázané, takže vypadají, že k sobě patří, ještě předtím, než na nich cokoliv upravíte.

HEX, RGB a HSL jednoduše

Každá barva, kterou zkopírujete, přichází v několika zápisech a všechny popisují tutéž věc jinak.

HEX je šestimístný kód, který vidíte nejčastěji, například #3A7BD5. Je to jen červená, zelená a modrá složka zabalené do jednoho řetězce, po dvou znacích na složku. Je kompaktní a je to to, co vložíte do CSS nebo designového nástroje.

RGB vypisuje tytéž tři kanály jako čísla od 0 do 255, například rgb(58, 123, 213). Stejná barva, přívětivější ke čtení, a šikovná, když potřebujete alfa kanál pro průhlednost.

HSL popisuje barvu tak, jak o ní lidé skutečně přemýšlejí: odstín (jaká barva, 0 až 360 stupňů po kole), sytost (jak živá) a světlost (jak jasná). Je to nejsnazší formát pro ruční úpravy, protože posun světlosti nebo sytosti dělá přesně to, co byste čekali, bez dohadování. Pokud někdy potřebujete přejít mezi formáty, rychlý převod HEX na RGB to zvládne bez potíží.

Nezapomeňte na kontrast a přístupnost

Paleta může vypadat nádherně a přesto selhat ve chvíli, kdy se v ní někdo pokusí přečíst text. Kontrast je místo, kde se hezké potkává s použitelným. Web Content Accessibility Guidelines stanovují jasnou hranici: běžný text by měl mít kontrastní poměr alespoň 4,5:1 vůči pozadí a velký text alespoň 3:1. Není to byrokracie, je to rozdíl mezi čtenářem, který stránkou proplouvá, a tím, kdo mhouří oči, vzdá to a odejde.

Praktickým krokem je testovat dvojice popředí a pozadí už při stavbě, ne až potom. Světle šedá na bílé může v návrhu vypadat elegantně a na telefonu na denním světle se stane neviditelnou. Když kombinace selže, obvykle stačí posunout jednu barvu tmavěji nebo světleji, ne zahodit celé schéma. Nechte si jasné akcentní barvy pro tlačítka, odkazy a zvýraznění, ne pro dlouhé úseky textu, a vyhnete se většině problémů s kontrastem, ještě než začnou.

Praktický pracovní postup

Tady je postup, který funguje napříč projekty. Začněte jednou kotevní barvou, kterou máte jistou, často jde o firemní barvu nebo odstín odpovídající náladě, kterou chcete navodit. Zamkněte ji a nechte generátor kolem ní postavit harmonii. Procházejte komplementární, analogickou a triadickou variantu a nepřemýšlejte příliš nad prvním pokusem; hledáte směr, ne finální odpověď.

Jakmile máte kandidáta, přiřaďte role. Vyberte dominantní barvu pro pozadí a velké plochy, sekundární pro strukturu a jeden výrazný akcent pro místa, která mají vyniknout. Volné rozdělení 60-30-10, dominantní k sekundární k akcentu, udrží věci vyvážené, aniž by to působilo rigidně. Pak zkontrolujte kontrast u každé textové dvojice, zkopírujte hex kódy a je hotovo. Uložte si to, co funguje, protože paleta, kterou jste trefili pro jeden projekt, bývá často zárodkem pro další. Až budete připraveni stavět dál, zbytek naší kolekce všech generátorů zvládne ostatní kusy.

Často kladené otázky