Vlastnosti barev CSS. Barevné kódy

Jedním 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. Do CSS bylo zařazeno 145 titulů CSS. Mezi nimi jsou jednoduché (jako je černá, modrá) a komplex (jako je purpurový, lawngreen).
Vzhledem k tomu, že je zapamatován celý seznam, jména v listu stylů jsou zřídka používána.

RGB

Většina televizorů, smartphony, monitory pracují s barevným modelem RGB. To znamená, že jakýkoliv odstín lze nastavit na kombinaci základních barev, mezi které patří červené, zelené a modré barvy. Tento přístup se používá v zařízeních, stejně jako v CSS. Barvy jsou první tým nabývat hodnot od 0 do 255. Počet možných odstínů stále 16777216.


Vzhledem k tomu, model RGB je přímo závislá na fyzikální zákony zobrazovací černou barvu je dána jako rgb (000) bílý - rgb (255255255). Systém RGBA je zcela analogický s RGB, pouze s přidáním alfa kanálu. To ovlivňuje průhlednost, která sladí odstín s backplane. V takovém případě se vzhled prvku bude lišit v závislosti na "substrátu".

HSL

Abychom pochopili, jak systém funguje HLS, je třeba poskytnout barevné kolečko. Ve středu je červená, pak (ve směru hodinových ručiček) všechny ostatní odstíny duhy. Pro určení barvy v CSS pomocí HLS je třeba zadat tři parametry:
  • odstín (ve stupních) - směr středového kruhu;
  • Saturace (v procentech),kolik barvy je potřeba;
  • jas (v procentech).
  • Například fialová může být definována následovně: hsl (315100%, 45%). HSL je nejvhodnější pro experimenty. Tím, že se učíte na barevném kolečku, můžete přibližně zobrazit barvu konkrétní položky při prohlížení stylu. # Hsla-color hsla - stejná HLS, pouze s alfa kanálem: hsl (0100%, 5006) - červená, průhledná trochu víc než polovina.


    HEX

    V CSS může být barva určena pomocí šestnáctkové reprezentace, například oranžová je nastavena na # FF4500. Pro lepší pochopení toho, co je hexadecimální reprezentace, je hlubší zvážení desítkové soustavy. Obsahuje čísla od 0 do 9. Je-li požadováno číslo, přidá se další číslo, pak 10 je pak 100 atd. V hexadecimálním systému je všechno přesně stejné, ale po 9 jde A a B a F - stejné jako 15 v desítkovém systému. Pak je přidána jedna číslice a výsledek je 10 v našem obvyklém počtu.
    Stejně jako v RGB, odstíny v HEXu udávají, které proporce používají hlavní barvy. V tomto případě nejsou odděleny čárkami (barva: # FFD500). Každé dva znaky určují počet červených, zelených a modrých. Systém HEX se zpravidla nepoužívá během experimentů, protože není možné vybrat požadované barvy CSS. Tabulka může v tomto případě pomoci, 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. Je mnohem jednodušší kopírovat pouze z nějjedna číslice než jedna v pořadí tři.

    Jaká je nejlepší cesta?

    O tom není nic konkrétního. Pokud prvky rozhraní vyžadují průhlednost, zvolte mezi RGBA a # hsla-color hsla. Chcete-li experimentovat v prohlížeči, bude nejvhodnější barevné kolo HLS. Pokud používáte paletu nebo přenášíte návrh aplikace Photoshop, měli byste preferovat hexadecimální barvy CSS.

    Související publikace