Pokud si vzpomínáte na leden, jedním z mých cílů pro rok 2013 bylo naučit se více o barvách a podělit se s vámi o to, co jsem se naučila. Už dříve jsem mluvil o tom, že mám pocit, že mé dovednosti při práci s barvami jsou nedostatečné, a řekl jsem si, že někdy v tomto roce vezmu pár knih o barvách s nadějí, že to změním.
Jedny narozeniny, poněkud štědrý bratr a kvalitní služby od Amazonu později a sortiment knih (včetně několika speciálně o barvách) je tu a čeká na přečtení. Díky, Davide.
Dočetl jsem jednu z knih o barvách, Design Elements: Color Fundamentals, a napadlo mě, že bych se měl začít dělit. Chci začít tím, jak barvy popisujeme, zčásti proto, že je to začátek, a zčásti proto, že to vedlo k určitému vyjasnění toho, jak barvu chápu.
Jak popisujeme barvy
Existují 3 základní způsoby popisu barvy, a protože to kniha přidala, přidám i čtvrtý způsob popisu barvy.
- Odstín – jiný výraz pro barvu
- Sytost (chroma) – intenzita nebo čistota odstínu
- Světlost (hodnota) – relativní míra černé nebo bílé barvy smíšené s daným odstínem
- Teplota – vnímaná teplost nebo chladnost barvy
Podíváme se na každý z nich trochu hlouběji.
Odstíny jsou barvy a to, jaký odstín vidíme, závisí na vlnové délce odraženého nebo produkovaného světla. Pochybuji, že vám musím říkat, co je to barva, a protože barva a odstín jsou synonyma, měli byste také vědět, co je to odstín. Připomenu vám jednu věc: každý vnímáme barvy jinak. Odstín, který vidíte vy, nemusí být stejný jako odstín, který vidím já.
Nasycenost označuje, jak čistý nebo intenzivní je daný odstín. Stoprocentní sytost znamená, že k danému odstínu není přidána žádná šedá. Barva je zcela čistá. Na druhém pólu se odstín s 0% sytostí jeví jako středně šedý. Čím je barva sytější (blíže 100 %), tím se jeví živější nebo jasnější. Desaturované barvy naopak vypadají matněji.
Jak sytý se odstín jeví, závisí do jisté míry také na tom, vedle jakých barev se nachází. Odstín nasycený na 50 % umístěný vedle odstínu nasyceného na 25 % bude vypadat živěji, než kdyby byl stejný odstín umístěn vedle odstínu nasyceného na 75 %.
Světlost měří relativní míru černé nebo bílé, která byla smíchána s daným odstínem. Přidáním bílé se barva zesvětlí (vytvoří se odstíny) a přidáním černé se barva ztmaví (vytvoří se odstíny). Účinek světlosti nebo hodnoty je relativní vůči ostatním hodnotám v kompozici. Barvu můžete zesvětlit tím, že ji umístíte vedle tmavší barvy.
Čím větší je rozdíl hodnot mezi prvky, tím větší je mezi nimi kontrast. Z tohoto důvodu je světlost dobrým způsobem, jak ukázat kontrast a naznačit hierarchii mezi prvky. Přibližně 7 stupňů světlosti je maximální odchylka, kterou lidské oko dokáže rozeznat. Nad tuto hranici je již obtížné rozdíly rozlišit.
Teplota je vnímaná teplost nebo chladnost barvy. Teplé barvy jsou červená, oranžová a žlutá, zatímco chladné barvy jsou zelená, modrá a fialová. Někde v zeleném a fialovém spektru se teplota mění mezi teplou a studenou.
To, jak oko rozeznává teplotu barev, se může měnit v závislosti na zdroji světla. Například skutečná teplota počítačového monitoru může ovlivnit vnímanou teplotu barev.
Teplejší barvy mají tendenci postupovat do popředí kompozice, zatímco chladnější barvy ustupují do pozadí. Stejně jako sytost a světlost může být i teplota relativní. Umístěte teplou barvu proti teplejší a výchozí barva bude působit chladněji, než kdyby byla umístěna proti chladné barvě.
Harmonie barev
Při práci s barvami je naším cílem zvolit paletu příjemných barevných kombinací (s výjimkou případů, kdy nepříjemná kombinace lépe doplňuje sdělení). Snažíme se dosáhnout jakési barevné harmonie.
Barevná harmonie může být subjektivní. Co vyhovuje vašemu oku, nemusí vyhovovat mému. Principy teorie barev se snaží subjektivitu omezit tím, že nabízejí vodítka, která nám pomáhají najít dvojice a seskupení barev, u nichž je větší pravděpodobnost, že budou dobře fungovat.
Jeden z hlavních principů například tvrdí, že oko vždy hledá rovnováhu a vyváženost barev, které ho vedou k tomu, aby dospělo k neutrálním kombinacím, jako když je odstín kombinován se svým opakem nebo doplňkem. Je to jeden z důvodů, proč při příliš dlouhém pohledu na jakoukoli barvu často vidíme následné obrazy jiné barvy (ale se stejnou sytostí a světlostí).
Teorie barev nevede vždy k předvídatelným výsledkům. Někdy se teorie a praxe úplně neshodují, což znamená, že musíme rozvíjet svůj zrak pro barvy a experimentovat s různými kombinacemi odstínu, sytosti a světlosti.
Rozpor v teorii barev a barevné praxi
Jak jsem uvedl výše, při čtení Základů barev mi něco docvaklo. Barvy popisujeme pomocí odstínu, sytosti a světlosti (HSL), přesto na webu obvykle nastavujeme hodnoty barev pomocí hexadecimálních hodnot a v menší míře hodnot RGB. Nebylo by rozumnější pracovat se systémem, který lépe popisuje barvy?
Poznámka: HSL není totéž co HSB (odstín, sytost, jas) nebo HSV (odstín, sytost, hodnota), které najdete ve většině barevných nástrojů.
Hex a RGB jsou ve skutečnosti dvě verze téhož. Každá z nich poskytuje 256 možných hodnot pro to, kolik je v dané barvě červené, zelené nebo modré. HSL funguje jinak. Neexistuje snadný způsob, jak se podívat na něco jako rgb(63, 69, 146) nebo jeho hexadecimální ekvivalent #3f4592 a snadno zjistit, že je to 40 % nasycené nebo hsl(236, 40, 41).
Pokud se chcete podívat na matematiku spojenou s převodem, podívejte se na některý nebo všechny níže uvedené odkazy
- Barevné algoritmy
- Převod barev z RGB na HSL
- Převod barev z HSL na RGB
Proč? Proč existuje nesoulad v tom, jak se snažíme chápat barvy, a v tom, jak se je snažíme používat? Pokud je něco HSL intuitivnější systém, protože skutečně popisuje barvy, které vidíme, a odpovídá teorii barev.
Uvědomuji si, že dovednosti v oblasti barev vycházejí z rozvoje kritického pohledu na barvy a kladení otázek, proč něco funguje nebo nefunguje. A jde o zodpovězení těchto otázek při pozorování barev kolem sebe.
Jenom se mi zdá, že by bylo jednodušší, kdyby teorie i praxe mluvily stejným jazykem. Teď, když jsem si to uvědomil, jsem se rozhodl zavázat se k tomu, že budu ve svém kódu co nejvíce používat hodnoty HSL. Kamenem úrazu je IE8 a nižší, které neakceptují hsl() ani rgb(). Potřebují hexadecimální hodnoty. To ale nevadí, protože SASS umí převod provést. V SASS můžete použít funkci hsl() a nechat si na výstupu html zobrazit hexadecimální hodnotu.
Pro své odhodlání jsem začal vytvářet jednoduchý nástroj pro práci s barvami, který mi pomůže při učení a studiu. Není to něco, co byste v současném stavu chtěli používat k výběru barevné palety, ale umožňuje vám hrát si s hodnotami odstínu, sytosti a světlosti, abyste viděli, jak každá z nich ovlivňuje jednu konkrétní barvu a barvy kolem ní. O nástroj se podělím později v tomto týdnu.
Již delší dobu jsem měl podezření, že matematické vztahy mezi barvami by mohly nabídnout vodítko pro práci s nimi, a často jsem tyto vztahy hledal v hexadecimálních hodnotách barev. Doufám, že když budu více používat hsl() a hrát si s mým jednoduchým nástrojem pro barvy, pomohou mi propojit teorii s barvami, které používám v designu, o něco lépe, než je mám propojené teď.
Mějte na paměti tuto nespojitost v tom, jak se učíme o barvách a popisujeme je, a v tom, jak je používáme. Toto uvědomění mi poskytlo větší pochopení pro to, jak lépe studovat barvy, a proto jsem chtěl začít tento rozhovor se základy toho, jak barvy popisujeme. Brzy přibudou další příspěvky o barvách, začnu koncem týdne, kdy budu mluvit o jednoduchém nástroji, který jsem si vytvořil jako pomůcku.
Stáhněte si zdarma ukázku z mé knihy Základy designu.
.