Vlastnosti barev CSS. Kódy barev

Jeden z nástrojů pro změnu stylů webových stránek je barva CSS. Existuje několik způsobů, jak změnit toto nastavení. Každý má výhody i nevýhody.

Název

Vlastnost barvy určuje barvu prvku. V CSS je zahrnuto 145 titulů. Mezi nimi jsou jednoduché (například černé, modré) a složité (například karmínové, zelené).

Protože je obtížně zapamatovatelný celý seznam, jména v listu stylů jsou zřídka používána.

RGB

Většina televizorů, smartphonů a monitorů pracuje s barevným modelem RGB. To znamená, že každý odstín může být nastaven kombinací primárních barev, mezi něž patří červená, zelená a modrá barva. Tento přístup se používá jak v zařízeních, tak v CSS. Barvy základního složení mají hodnoty od 0 do 255. A počet možných odstínů je 16777216.

Vzhledem k tomu, model RGB přímo souvisí s fyzikálními zákony barevného tisku, černá je v ní uvedeno jako RGB (0, 0, 0), bílé - RGB (255, 255, 255). Systém RGBA je zcela analogický s RGB, pouze s přidáním alfa kanálu. To ovlivňuje průhlednost, která spojuje odstín s pozadím. Vzhled prvku se bude lišit v závislosti na "substrátu".

HSL

Chcete-li pochopit, jak systém HLS funguje, musíte poskytnout barevné kolo. Ve středu je červená, pak (ve směru hodinových ručiček) všechny ostatní odstíny duhy. Definice v CSS barev pomocí systému HLS, musíte nastavit tři parametry:

• odstín (ve stupních) - směr od středu kruhu -
• saturace (v procentech) je kolik barvy je potřeba;
• jas (v procentech).

Například fialová může být definována takto: hsl (315, 100%, 45%). HSL je nejvhodnější pro experimenty. Po studiu barevné kolo, můžete zhruba představit, že při prohlížení listu stylů, která barva je přiřazena určitému prvku. HSLA - stejný HLS, pouze s alfa: HSL (0, 100%, 50, 0.6) - červené, transparentní o něco více než polovinu.

HEX

V CSS barvy lze zadat pomocí šestnáctkové reprezentace, například oranžová je určena hodnotou # FF4500.

Pro lepší pochopení toho, co je hexadecimální reprezentace, stojí za to podívat se hlouběji do desítkové soustavy. To je číslo od 0 do 9. Po, je přidán potřeba počítat čísla větší než 9 jeden bit, a ukazuje 10, potom 100, a tak dále. E. Všechny přesně stejný v hexadecimální soustavě, ale v něm po 9 A, pak B a tak dále na F je stejný jako 15 v desítkové soustavě. Pak je přidán jeden bit a my dostaneme 10, rovnající se 16 v obvyklém počtu.

Stejně jako v RGB, odstíny v HEXu ukazují, v jakých poměrech použijí primární barvy. Nejsou odděleny čárkami (barva: # FFD500). Každé dva znaky určují množství červené, zelené a modré barvy.

Systém HEX se zpravidla nepoužívá během experimentů, protože nelze najít správné barvy CSS. Tabulka může pomoci v této věci, ale pokud se s ní neustále zkontrolujete, práce bude zpožděna. Hexadecimální reprezentace je nejvhodnější při přenosu šablony z grafického editoru. Koneckonců, je mnohem jednodušší zkopírovat z něj pouze jedno číslo, než střídavě tři.

Která cesta je nejlepší?

Z tohoto důvodu nelze nic konkrétního říct. Pokud prvky rozhraní vyžadují průhlednost, vyberte mezi RGBA a HSLA. Pokud chcete experimentovat v prohlížeči, bude nejvhodnější barevný kruh HLS. Pokud použijete paletu nebo přesunete návrh z Photoshopu, měli byste preferovat hexadecimální kódy barev CSS.