Oranžový kód. HTML výukový program. RGB barvy. Bezpečná paleta barev

pomocí atributu style pomocí vlastnosti pozadí a přiřazením hodnot rgb(255, 0, 0) , rgb(0, 255, 0) a rgb(0, 0, 255) . To znamená, že střídavě děláme jeden kanál co nejvíce nasycený a zbývající kanály se nepoužívají pro syntézu, protože jejich hodnota je nula.

Zkuste upravit tento příklad tak, aby zahrnoval vaše vlastní hodnoty, jako je rgb(100, 100, 100) .

Nastavení barev pomocí RGBA

CSS3 představilo nový nástroj pro práci s barvami – formát RGBA. Lze to nazvat evolucí modelu RGB, ale s přidáním jednoho nového kanálu - A nebo alfa kanálu. Tento kanál nastavuje průhlednost barvy. Jeho hodnoty jsou nastaveny v rozsahu od 0 do 1. Hodnota rovna 0 odpovídá plné průhlednosti, 1 - plné neprůhlednosti (barva bude stejná, jako je nastavena v prvních třech kanálech RGB) a středním hodnotám , jako 0,4 nebo 0,6 - průsvitnost v různé míře.

Příklad kódu.

Bude to fungovat následovně:

Tento kód je vizuálně podobný následujícímu, který k nastavení hodnoty barvy používá model RGB:

Zde je jeho výsledek:

Hodnota alfa kanálu rovna nule činí jakoukoli barvu neviditelnou – absolutně transparentní, hodnota rovna jedné převádí barvu v kódu RGB beze změn. Vlastnost rgba(255,0,0,1.0) zobrazuje červenou barvu rgb(255, 0, 0) .

Podle hexadecimální hodnoty (HEX kód)

V běžném životě používáme desítkovou soustavu počítání. Jeho původ je velmi jednoduchý – na rukou máme deset prstů a v životě bylo pohodlné počítat na prstech. Pokud je v desítkové soustavě deset číslic: od 0 do 9 a číslo 10 je další číslice, pak je v šestnáctkové soustavě 16 číslic a další číslice bude číslo 16.

K označení barevných kódů se jako hexadecimální číslice používají běžné desetinné číslice od 0 do 9 a k označení čísel od 10 do 15 se používají latinská písmena od A do F, tedy (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Pro přehlednost si to shrňme do tabulky:

K zápisu hexadecimálních čísel větších než F (15 dekadických), stejně jako v desítkové soustavě, používají také sjednocení dvou číslic, ale již šestnáctkové, což je zřejmé. Pro zápis desetinného čísla 255 v šestnáctkové soustavě se tedy používá zápis FF.

Hexadecimální systém je pro počítač srozumitelnější, rychleji zpracovává hodnoty dané hexadecimální hodnotou.

Chcete-li zadat barvu v šestnáctkové soustavě, před číselnou hodnotu uveďte znak „#“, příklad: #FFC0CB . Samotná hodnota #FFC0CB se skládá ze tří hexadecimálních číslic FF , C0 a CB . Význam této položky je stejný jako nastavení barvy ve formátu RGB (rgb(r, g, b) ) - každá hexadecimální číslice v HEX kódu označuje sytost barev v kanálu modelu RGB.

Tento kód zobrazí následující prvky:

A zde je obrázek s výsledkem ze sekce "Nastavení barev pomocí RGB" na této stránce výše.

Obr. 1. Barvy v RGB.

Vidíme, že barvy jsou stejné.

Zkrácený zápis HEX kódu barvy je povolen: 6místné číslo lze zapsat jako 3místné číslo. To platí pouze v případě, že se dvě číslice v barevné hodnotě stejného kanálu opakují.

To znamená, že je přijatelná následující zkratka:

Například barvu #ff22aa lze zapsat jako #f2a nebo barvu #44aa22 zapsat jako #4a2 .

Nastavení barvy pomocí HSL

CSS3 má nový formát pro specifikaci barev.

Formát HSL je zkratkou anglických slov: Hue (odstín), Saturate (sytost) a Lightness (světlost).

Odstín v HSL je hodnota barvy na speciálním barevném kole (obrázek 2) a je specifikována ve stupních. Pokud nakreslíme analogii s modelem RGB, pak 0° odpovídá červené, 120° odpovídá zelené a 240° odpovídá modré.

Hodnota odstínu se změní z 0 na 359.

Obrázek 2. Barevné kolo HSL.

Druhá hodnota - sytost (Saturate) se nastavuje v procentech. Při 100% sytosti je barva co nejvíce "šťavnatá", jak se ukazatel sytosti pohybuje směrem k 0%, barva je stále matnější a roluje do šedi.

Třetí hodnota - světlost (Lightness) se nastavuje také v procentech. Čím vyšší procento, tím jasnější bude barva. Extrémní hodnoty 0 % a 100 % označují černou (nedostatek světla) a bílou (exponovanou) barvu a nezáleží na tom, která barva z barevného kruhu byla vybrána v prvním kanálu. Za optimální hodnotu lze považovat hodnotu jasu barev rovnou 50 %.

Nastavení barev pomocí HSLA

Formát HSLA souvisí s HSL, stejně jako RGB s RGBA. Ve formátu HSLA, stejně jako v RGBA, je přidán alfa kanál, který je zodpovědný za průhlednost barev.

Barva zadaná ve formátu HSL je snáze čitelná. Dá se říci, že je intuitivní. Například kód hsl(120,60%,50%) může představovat konečnou barvu, pokud je v paměti obrázek barevného kola HSL. To se o formátech RGB a HEX říci nedá, barevný kód uvedený v těchto formátech je jasný až po vykreslení na monitor.

Nové formáty v CSS3 (HSL, HSLA a RGBA) fungují v prohlížečích od verzí: IE 9.0, Opera 10.0 Firefox 3.0. Jak zajistit, aby styly fungovaly ve starších prohlížečích?

Someblock ( barva pozadí: rgb(255,50,50); barva pozadí: rgba(255,50,50,0,85) )

Při použití tohoto kódu ve starších prohlížečích se barva pozadí pro třídu .somebloсk, i když nepoužívá alfa kanál, zobrazí ve formátu RGB.

HEX/HTML

Barva v HEX formátu není nic jiného než hexadecimální reprezentace RGB.

Barvy jsou reprezentovány jako tři skupiny hexadecimálních číslic, kde každá skupina je zodpovědná za svou vlastní barvu: #112233, kde 11 je červená, 22 je zelená, 33 je modrá. Všechny hodnoty musí být mezi 00 a FF.

Mnoho aplikací přijímá zkrácený zápis pro hexadecimální barvy. Pokud každá ze tří skupin obsahuje stejné znaky, například #112233, lze je zapsat jako #123.

1. h1 ( barva: #ff0000; ) /* červená */
2. h2 ( barva: #00ff00; ) /* zelená */
3. h3 ( barva: #0000ff; ) /* modrá */
4. h4 ( barva: #00f; ) /* stejná modrá, těsnopis */

RGB

Barevný prostor RGB (červená, zelená, modrá) se skládá ze všech možných barev, které lze získat smícháním červené, zelené a modré. Tento model je oblíbený ve fotografii, televizi a počítačové grafice.

Hodnoty RGB jsou zadány jako celé číslo mezi 0 a 255. Například rgb(0,0,255) se zobrazí jako modré, protože modrý parametr je nastaven na nejvyšší hodnotu (255) a zbytek je nastaven na 0.

Některé aplikace (zejména webové prohlížeče) podporují procenta RGB (od 0 % do 100 %).

1. h1 ( barva: rgb(255, 0, 0); ) /* červená */
2. h2 ( barva: rgb(0, 255, 0); ) /* zelená */
3. h3 ( barva: rgb(0, 0, 255); ) /* modrá */
4. h4 ( barva: rgb(0%, 0%, 100%); ) /* stejná modrá, procentuální zápis */

Hodnoty barev RGB jsou podporovány ve všech hlavních prohlížečích.

RGBA

V poslední době se moderní prohlížeče naučily pracovat s barevným modelem RGBA, což je rozšíření RGB s podporou alfa kanálu, který určuje neprůhlednost objektu.

Hodnota barvy RGBA je specifikována jako: rgba (červená, zelená, modrá, alfa). Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).

1. h1 ( barva: rgb(0, 0, 255); ) /* modrá v normálním RGB */
2. h2 ( barva: rgba(0, 0, 255, 1); ) /* stejná modrá v RGBA, protože neprůhlednost: 100 % */
3. h3 ( barva: rgba(0, 0, 255, 0,5); ) /* neprůhlednost: 50 % */
4. h4 ( barva: rgba(0, 0, 255, 0,155); ) /* neprůhlednost: 15,5 % */
5. h5 ( barva: rgba(0, 0, 255, 0); ) /* zcela průhledná */

RGBA je podporováno v IE9+, Firefox 3+, Chrome, Safari a Opera 10+.

HSL

Barevný model HSL je reprezentací modelu RGB ve válcovém souřadnicovém systému. HSL představuje barvy způsobem, který je intuitivnější a srozumitelnější než typické RGB. Model se často používá v grafických aplikacích, v paletách barev a pro analýzu obrazu.

HSL je zkratka pro Hue (barva / odstín), Saturation (saturace), Lightness / Luminance (světlost / světlost / svítivost, nezaměňovat s jasem).

Odstín nastavuje polohu barvy na barevném kole (od 0 do 360). Saturace je procentuální hodnota nasycení (od 0 % do 100 %). Světlost je procento lehkosti (od 0 % do 100 %).

1. h1 ( barva: hsl(120, 100 %, 50 %); ) /* zelená */
2. h2 ( barva: hsl(120, 100 %, 75 %); ) /* světle zelená */
3. h3 ( barva: hsl(120, 100 %, 25 %); ) /* tmavě zelená */
4. h4 ( barva: hsl(120, 60%, 70%); ) /* pastelově zelená */

HSL je podporováno v prohlížečích IE9+, Firefox, Chrome, Safari a Opera 10+.

HSLA

Podobně jako RGB/RGBA má HSL režim HSLA s podporou alfa kanálu pro určení krytí objektu.

Hodnota barvy HSLA je specifikována jako: hsla(odstín, sytost, světlost, alfa). Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).

1. h1 ( barva: hsl(120, 100 %, 50 %); ) /* zelená v běžném HSL */
2. h2 ( barva: hsla(120, 100 %, 50 %, 1); ) /* stejná zelená v HSLA, protože neprůhlednost: 100 % */
3. h3 ( barva: hsla(120, 100 %, 50 %, 0,5); ) /* neprůhlednost: 50 % */
4. h4 ( barva: hsla(120, 100 %, 50 %, 0,155); ) /* neprůhlednost: 15,5 % */
5. h5 ( barva: hsla(120, 100 %, 50 %, 0); ) /* plně průhledná */

CMYK

Barevný model CMYK je často spojován s barevným tiskem, s tiskem. CMYK (na rozdíl od RGB) je subtraktivní model, což znamená, že vyšší hodnoty jsou spojeny s tmavšími barvami.

Barvy jsou určeny poměrem azurové (Cyan), purpurové (Magenta), žluté (Yellow), s přídavkem černé (Key / blackK).

Každé z čísel, které definují barvu v CMYK, představuje procento inkoustu dané barvy, které tvoří barevnou kombinaci, respektive velikost rastrového bodu zobrazeného na sazeči na filmu této barvy (nebo přímo na tisková deska v případě CTP).

Například, abyste získali barvu „PANTONE 7526“, smíchali byste 9 dílů azurové, 83 dílů purpurové, 100 žluté a 46 černé. To lze označit následovně: (9,83,100,46). Někdy používají taková označení: C9M83Y100K46, nebo (9 %, 83 %, 100 %, 46 %), nebo (0,09 / 0,83 / 1,0 / 0,46).

HSB/HSV

HSB (také známý jako HSV) je podobný HSL, ale jsou to dva různé barevné modely. Oba jsou založeny na cylindrické geometrii, ale HSB/HSV je založen na modelu „hexcone“, zatímco HSL je založen na modelu „bi-hexcone“. Umělci často preferují použití tohoto modelu, obecně se uznává, že zařízení HSB / HSV se blíží přirozenému vnímání barev. V Adobe Photoshopu se používá zejména barevný model HSB.

HSB / HSV je zkratka pro Hue (barva / odstín), Saturation (saturace), Brightness / Value (jas / hodnota).

Odstín nastavuje polohu barvy na barevném kole (od 0 do 360). Saturace je procentuální hodnota nasycení (od 0 % do 100 %). Jas je procento jasu (od 0 % do 100 %).

XYZ

Barevný model XYZ (CIE 1931 XYZ) je čistě matematický prostor. Na rozdíl od RGB, CMYK a dalších modelů jsou v XYZ primární komponenty „imaginární“, což znamená, že nemůžete mapovat X, Y a Z na žádnou sadu barev. XYZ je hlavní model pro téměř všechny ostatní barevné modely používané v technických oborech.

LABORATOŘ

Barevný model LAB (CIELAB, "CIE 1976 L*a*b*") je vypočítán z prostoru CIE XYZ. Cílem Lab bylo vytvořit barevný prostor, ve kterém by změna barev byla z hlediska lidského vnímání lineárnější (ve srovnání s XYZ), to znamená, že by produkovala stejná změna hodnot barevných souřadnic v různých oblastech barevného prostoru. stejný pocit změny barvy.

Vlad Merževič

V HTML se barva určuje jedním ze dvou způsobů: pomocí hexadecimálního kódu a názvem některých barev. Nejčastěji používaná metoda je založena na hexadecimální soustavě, jako nejuniverzálnější.

Hexadecimální barvy

HTML používá k určení barev hexadecimální čísla. Hexadecimální soustava je na rozdíl od desítkové soustavy založena, jak již název napovídá, na čísle 16. Čísla budou následující: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 jsou nahrazena latinkou. V tabulce. 6.1 ukazuje shodu mezi desetinnými a šestnáctkovými čísly.

Čísla větší než 15 v šestnáctkové soustavě se tvoří spojením dvou čísel do jednoho (tab. 6.2). Například číslo 255 v desítkové soustavě odpovídá číslu FF v šestnáctkové soustavě.

Aby se předešlo zmatkům v definici číselné soustavy, před hexadecimálním číslem je znak libry #, například #aa69cc. V tomto případě nezáleží na velikosti písmen, takže je přípustné psát #F0F0F0 nebo #f0f0f0.

Typická barva používaná v HTML je následující.

Zde je barva pozadí webové stránky nastavena na #FA8E47. Znak libry # před číslem znamená, že je v šestnáctkové soustavě. První dvě číslice (FA) definují červenou složku barvy, třetí až čtvrtá číslice (8E) zelenou složku a poslední dvě číslice (47) modrou složku. Konečným výsledkem je tato barva.

FA

+

8E

+

47

=

FA8E47

Každá ze tří barev – červená, zelená a modrá – může nabývat hodnot od 00 do FF, což nakonec tvoří 256 odstínů. Celkový počet barev tedy může být 256x256x256 = 16 777 216 kombinací. Barevný model založený na červené, zelené a modré složce se nazývá RGB (červená, zelená, modrá; červená, zelená, modrá). Tento model je aditivní (od add - add), ve kterém přidáním všech tří složek vznikne bílá.

Chcete-li usnadnit navigaci v hexadecimálních barvách, vezměte v úvahu některá pravidla.

• Pokud jsou hodnoty barevných složek stejné (například: #D6D6D6), získá se šedý odstín. Čím vyšší číslo, tím světlejší barva a hodnoty se mění z #000000 (černá) na #FFFFFF (bílá).
• Jasně červená barva se vytvoří, pokud je červená složka nastavena na maximum (FF) a zbytek složek je nastaven na nulu. Barva s hodnotou #FF0000 je nejčervenější možný červený odstín. Totéž platí pro zelenou (#00FF00) a modrou (#0000FF).
• Žlutá (#FFFF00) se získá smícháním červené se zelenou. To je dobře vidět na barevném kolečku (obr. 6.1), které představuje primární barvy (červená, zelená, modrá) a doplňkové nebo doplňkové. Patří mezi ně žlutá, azurová a fialová (také nazývaná purpurová). Obecně lze jakoukoli barvu získat smícháním barev sousedících s ní. Takže azurová (#00FFFF) se získá kombinací modré a zelené.

Rýže. 6.1. Barevný kruh

Barvy založené na hexadecimálních hodnotách nemusí být vybrány empiricky. K tomuto účelu se hodí grafický editor, který umí pracovat s různými barevnými modely, např. Adobe Photoshop. Na Obr. 6.2 ukazuje okno pro výběr barvy v tomto programu, čára zakroužkuje výslednou hexadecimální hodnotu aktuální barvy. Můžete jej zkopírovat a vložit do kódu.

Rýže. 6.2. Výběr barvy ve Photoshopu

Webové barvy

Pokud nastavíte kvalitu barev monitoru na 8 bitů (256 barev), pak se stejná barva může v různých prohlížečích zobrazovat různě. To souvisí se způsobem vykreslování grafiky, když prohlížeč pracuje se svou vlastní paletou a nemůže zobrazit barvu, která není v jeho paletě. Barva je v tomto případě nahrazena kombinací pixelů jiných, jemu blízkých barev, které danou imitují. Aby barva zůstala v různých prohlížečích stejná, byla představena paleta tzv. webových barev. Webové barvy jsou takové barvy, z nichž pro každou složku - červená, zelená a modrá - je nastavena jedna ze šesti hodnot - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Hexadecimální hodnota této složky je uvedena v závorce. Celkový počet barev ze všech možných kombinací dává 6x6x6 - 216 barev. Příklad webové barvy je #33FF66.

Hlavním rysem webové barvy je, že se ve všech prohlížečích zobrazuje stejně. V tuto chvíli je relevance webových barev velmi malá díky zkvalitnění monitorů a rozšíření jejich možností.

Barvy podle názvu

Abyste si nepamatovali sbírku čísel, můžete místo nich použít názvy běžně používaných barev. V tabulce. 6.3 zobrazuje názvy oblíbených názvů barev.

Tab. 6.3. Názvy některých barev

Název barvy	Barva	Popis	Hexadecimální hodnota
Černá		Černá	#000000
modrý		Modrý	#0000FF
fuchsie		Světle fialová	#FF00FF
šedá		Tmavošedý	#808080
zelená		Zelená	#008000
Limetka		světle zelená	#00FF00
kaštanové		Tmavě červená	#800000
námořnictvo		Tmavě modrá	#000080
olivový		Olivový	#808000
nachový		Tmavě fialová	#800080
Červené		Červené	#FF0000
stříbrný		světle šedá	#C0C0C0
modrozelená		modrá zelená	#008080
bílý		Bílý	#FFFFFF
žlutá		Žlutá	#FFFF00

Nezáleží na tom, jak barvu určíte - podle jejího názvu nebo pomocí hexadecimálních čísel. Ve svém účinku jsou tyto metody rovnocenné. Příklad 6-1 ukazuje, jak nastavit barvu pozadí a textu webové stránky.

Příklad 6.1. Barva pozadí a textu

Ukázka textu

V tomto příkladu je barva pozadí nastavena pomocí atributu bgcolor značky a barvu textu prostřednictvím atributu text. Pro zpestření je hodnota atributu text nastavena na hexadecimální číslo a bgcolor je nastaveno na vyhrazené klíčové slovo teal .

K určení barev se používají hexadecimální čísla. Hexadecimální soustava je na rozdíl od desítkové soustavy založena, jak již název napovídá, na čísle 16. Čísla budou následující: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 jsou nahrazena latinkou. Čísla větší než 15 v šestnáctkové soustavě se tvoří spojením dvou čísel do jednoho. Například číslo 255 v desítkové soustavě odpovídá číslu FF v šestnáctkové soustavě. Aby se předešlo nejasnostem v definici číselné soustavy, před hexadecimálním číslem je uveden symbol hash #, například #666999. Každá ze tří barev – červená, zelená a modrá – může nabývat hodnot od 00 do FF. Označení barvy je tedy rozděleno do tří složek #rrggbb, kdy první dva znaky označují červenou složku barvy, dva prostřední zelenou a poslední dva modrou. Je povoleno používat zkrácený tvar #rgb, kde by měl být každý znak zdvojen. Záznam #fe0 by tedy měl být považován za #ffee00.

podle jména

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Prohlížeče podporují některé barvy podle názvu. V tabulce. 1 zobrazuje názvy, hexadecimální kód, hodnoty v RGB, formát HSL a popis.

Tab. 1. Názvy barev

název	Barva	Kód	RGB	HSL	Popis
bílý		#ffff nebo #fff	rgb(255,255,255)	hsl(0,0%,100%)	Bílý
stříbrný		#c0c0c0	rgb(192,192,192)	hsl (0,0 %, 75 %)	Šedá
šedá		#808080	rgb(128,128,128)	hsl (0,0 %, 50 %)	Tmavošedý
Černá		#000000 nebo #000	rgb(0,0,0)	hsl(0,0%,0%)	Černá
kaštanové		#800000	rgb(128,0,0)	hsl(0,100%,25%)	Tmavě červená
Červené		#ff0000 nebo #f00	rgb(255,0,0)	hsl(0,100%,50%)	Červené
oranžový		#ffa500	rgb(255,165,0)	hsl (38,8,100%,50%)	oranžový
žlutá		#ffff00 nebo #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Žlutá
olivový		#808000	rgb(128,128,0)	hsl(60,100%,25%)	Olivový
Limetka		#00ff00 nebo #0f0	rgb(0,255,0)	hsl(120,100%,50%)	světle zelená
zelená		#008000	rgb(0,128,0)	hsl(120,100%,25%)	Zelená
aqua		#00ffff nebo #0ff	rgb(0,255,255)	hsl(180,100%,50%)	Modrý
modrý		#0000ff nebo #00f	rgb(0,0,255)	hsl(240,100%,50%)	Modrý
námořnictvo		#000080	rgb(0,0,128)	hsl(240,100%,25%)	Tmavě modrá
modrozelená		#008080	rgb(0,128,128)	hsl(180,100%,25%)	modrá zelená
fuchsie		#ff00ff nebo #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Růžový
nachový		#800080	rgb(128,0,128)	hsl(300,100%,25%)	fialový

S RGB

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Barvu můžete definovat pomocí hodnot červené, zelené a modré v desítkové soustavě. Každá ze tří barevných složek nabývá hodnoty od 0 do 255. Je také přijatelné nastavit barvu v procentech, přičemž 100 % bude odpovídat číslu 255. Nejprve je specifikováno klíčové slovo rgb a poté jsou barevné složky uvedeno v závorkách oddělených čárkami, například rgb(255 , 128, 128) nebo rgb(100 %, 50 %, 50 %).

RGBA

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Formát RGBA je syntaxí podobný RGB, ale obsahuje alfa kanál, který nastavuje průhlednost prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je průsvitná.

RGBA je přidán do CSS3, takže validace kódu CSS by měla být prováděna podle této verze. Je třeba poznamenat, že standard CSS3 je stále ve vývoji a některé jeho funkce se mohou změnit. Například barva RGB přidaná do vlastnosti background-color projde ověřením, ale barva přidaná do vlastnosti pozadí nikoli. Prohlížeče přitom celkem správně chápou barvu pro obě vlastnosti.

HSL

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

Název formátu HSL je tvořen kombinací prvních písmen Hue (odstín), Saturate (sytost) a Lightness (světlost). Odstín je hodnota barvy na barevném kolečku (obr. 1) a udává se ve stupních. 0° je červená, 120° je zelená a 240° je modrá. Hodnota odstínu se může lišit od 0 do 359.

Rýže. 1. Barevné kolečko

Sytost je intenzita barvy měřená v procentech od 0 % do 100 %. Hodnota 0 % znamená žádnou barvu a odstín šedé, 100 % je maximální hodnota sytosti.

Světlost nastavuje, jak jasná je barva, a je určena v procentech od 0 % do 100 %. Malé hodnoty ztmaví barvu, vysoké hodnoty ji zesvětlí, extrémní hodnoty 0 % a 100 % odpovídají černé a bílé.

HSLA

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Formát HSLA je syntaxí podobný jako HSL, ale obsahuje alfa kanál, který nastavuje průhlednost prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je průsvitná.

Hodnoty barev ve formátech RGBA, HSL a HSLA jsou přidány do CSS3, takže při použití těchto formátů zkontrolujte platnost kódu vůči verzi.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Varování

Všechny metody odchytu lva uvedené na stránce jsou teoretické a založené na výpočtových metodách. Autoři neručí za vaši bezpečnost při jejich používání a zříkají se jakékoli odpovědnosti za výsledek. Pamatujte, že lev je dravec a nebezpečné zvíře!

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Barvy na webové stránce