Tvorba vlastních barevných palet

Datum vydání: 2014-11-07 21:34:14

Paleta barev

V grafice se často používají tzv. opozitní barvy, které se vzájemně liší v barevném posunu o 180°, nebo triáda, podobné barevné odstíny apod. Lze si v tom trochu najít určitý systém a odhad. Myslela jsem si, že si na základě toho následně najdu vhodný způsob, jak si vytvářet vhodné palety barev pro návrh webu (např. tím, že si z palety vyberu konkrétních 4 až 5 barev různě odstupňovaných od sebe). Nakonec jsem stejně zjistila, že je lepší využívat generátor barev, kterým si vyberete vhodnou paletu. Nicméně zde přikládám vytvořené paletky základních odstínů pro barvu #ffaa01.

Příklady barevných palet

Paleta barev Paleta barev
Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev Paleta barev

Paletky jsem vytvářela tak, že jsem si z různých odstínů dané barvy (viz obrázek úplně nahoře) vybrala pouze 5 barev. Při tvorbě případné palety je dle mého názoru vhodné postupovat od nejsvětlejších odstínů (vpravo dole) a postupně jít k tmavým odstínům (vlevo lehce nahoru) s tím, že někde uprostřed mám základní barvu, do které chci celý web ladit. Při přechodu k tmavým odstínům si můžeme dovolit trochu přidávat na sytosti barvy (opíši lehký půlkruh s pomyslným středem cca v syté barvě v pravém horním rohu). Lze se pohybovat také čistě horizontálně, kdy neměníme sytost barvy. Zkoušela jsem různé způsoby výběru pěti barev, což je vidět na výsledných paletkách. Celkem se mi osvědčil základní odstup 20 % v podílu černé mezi jednotlivými barvami daného odstínu. Světlejší barvy musí být však jemněji odstupňovány. Po vytvoření základní paletky lze pomocí barevného posunu analogicky udělat barevnou paletku pro opozitní barvu apod.

Při praktické aplikaci se ukázalo, že je vhodné mít místo čistě bílé barvy v paletě zahrnutou světlounkou barvu daného odstínu. Také světlejších tónů člověk potřebuje více, než tmavších. Je vhodné se vyvarovat přílišnému zvětšování sytosti barvy, tj. je vhodnější se více pohybovat při tvorbě palety v horizontálním směru, aby barvy byly více vyvážené. Pokud rozdíly dvou barev jsou v určitém pravidelném řádu, např. skok koněm či čistá přímka, paleta působí vyrovnaně. Pokud už jsou barvy cik cak, výsledný dojem je nesourodý a rušivý. Přestože zdrojová paleta obsahuje 100 různých odstínů jedné barvy, pro tvorbu palety je to příliš hrubé rozdělení a je vhodnější využít generátor barev, který nabízí naprosto plynulé odstupňování jednotlivých barev. Zde je ukázka mého webu IT postaveného na této paletě barev.

Pokud si chceme hrát s vlastním nastavením palety a dalších barev, můžeme postupovat např. následujícím způsobem. Vytvoříme paletu pro hlavní barvu a další barvy si odvodíme barevným posunem. V Gimpu jde o příkaz Barvy » Odstín-sytost… » Odstín a zadáme pouze posun barevného spektra.

Protilehlá barva přesně o 180°

Paleta barev Paleta barev

Paletu vytvoříme barevným posunem o 180°. Původní paleta měla barevný posun 40°. Opozitní paleta bude mít barevný posun: 40° + 180° = 220°.

Triáda barva přesně o 180° ± 30°, tj. o 150° a 210°

Paletu vytvoříme barevným posunem o 180° ± 30°. Původní paleta měla barevný posun 40°. Jedna barva bude mít výsledný barevný posun: 40° + 180° + 30° = 40° + 210° = 250°. Druhá barva bude mít výsledný barevný posun: 40° + 180° - 30° = 40° + 150° = 190°.

Paleta barev Paleta barev Paleta barev

Na základě těchto několika barev lze následně postavit pomocí css skoro celou grafiku webu. Zde naposledy uvedené kombinace barev jsou docela ostré a hodně barevné barvy. Paletky sice vypadají dobře, ale po aplikaci na webu člověk zjistí, že bychom museli snížit saturaci (sytost), abychom docílili jemnějších tónů. Místo čistě bílé by byl vhodnější světlý odstín dané barvy. Kdybych chtěla postupovat stejným způsobem a na základě takto nabitých zkušeností získat lepší paletky, musela bych si udělat asi jemnější základní barevnou paletku. Generátor to dělá svým způsobem za nás víceméně lépe a vidíte hned výsledek. Bohužel tam jde zadat ručně pouze základní barva, což mi trochu vadí.