Tmavě šedá barva html. Barvu ve stylech lze specifikovat různými způsoby: hexadecimální hodnotou, jménem, ​​ve formátu RGB, RGBA, HSL, HSLA

Podívejte se pozorně na výkres. Pozadí rozbalovacího okna je průsvitné. Jedná se o poměrně běžnou konstrukční techniku. Pojďme se zamyslet nad tím, jak to lze implementovat.

Úkol

Udělejte barvu v prohlížeči průhlednou.

Řešení

První myšlenka v této situaci je použít obrázek png24 s přednastavenou průsvitností pro pozadí. Tento obrázek je ale zcela zbytečný. V pohodě se obejdete i bez něj (a tedy bez dalšího požadavku na server). Zkusme ještě najít optimální řešení.

Druhá myšlenka je použít . Ale v tomto případě to není příliš pohodlné. Koneckonců, pak se nejen pozadí, ale i nápisy zprůsvitní. Ano, vlastně celé okno najednou.

Samozřejmě můžete zkusit přidat další kontejner a aplikovat neprůhlednost pouze na něj, ale tento HTML prvek bude určen pouze pro okrasu a bude zjevně nadbytečný. Dá se bez toho obejít?

Samozřejmě můžete! Pokud používáte RGBA.

Formát popisu barev RGBA

CSS3 umožňuje určit barvu pomocí funkcí RGB a RGBA. V tomto případě musíme uvést podíl každé barevné složky, pro kterou je přidělen jeden bajt (od 0 do 255, pokud někdo neví).

Syntaxe pro tento případ je velmi jednoduchá:

Pozadí: rgb(0, 255, 0); /* čistě zelená */

Pro RGBA je přidán čtvrtý parametr – alfa průhlednost (od 0 do 1).

Pozadí: rgba(255, 0, 0, 0,5); /* čistě červená s 50% průhledností */

Tady je řešení našeho problému. Stačí nastavit barvu pozadí pomocí rgba a vše bude vypadat tak, jak chceme. Bez zbytečných obrázků a prvků!

Kde mohu získat tato čísla?

Na barevné složky se můžete podívat pomocí nástroje kapátko Photoshopu.

O kompatibilitě mezi prohlížeči

Protože funkce RGB je mnohem starší než RGBA a existuje již od dob standardu CSS2, můžete k ochraně před nejstaršími prohlížeči použít následující duplicitní konstrukci:

SomeBlock ( pozadí: rgb(255, 0, 0); pozadí: rgba(255, 0, 0, 0,5); )

S tímto přístupem nebudou mít pradědové moderních prohlížečů průsvitnost, ale samotná barva zůstane správná.

O IE se budete muset starat samostatně. Osli nerozumí RGBA až do verze 8 včetně.

Jako vždy: půda pro rolníky, továrny pro dělníky a osli berlička! Tak jako .

Samozřejmě v bojových podmínkách dáváme toto pravidlo do samostatného CSS, které propojíme.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Trik je určit počáteční a koncovou barvu jako stejnou (ff0000 - červená) a využít toho, že v tomto filtru lze nastavit alfa kanál pro gradient (v příkladu je to hodnota 80).

Pro informaci: filtr používá hexadecimální systém a kód pro zcela neprůhlednou barvu je FF (v desítkové soustavě je to 255). V souladu s tím je šestnáctkové číslo 80 desítkové číslo 128, tj. 50% průhlednost.

Testováno v:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome

Vyjadřuji nepřímý vděk Googlu za nápad a nabízím štafetu svým kolegům: je třeba se podělit se čtenáři o zahraniční zdroje o vývoji webu z mého RSS kanálu, které o této problematice píší věcně a zajímavě. Chcete-li omezit nečinné hovory, musíte dodržovat několik jednoduchých ustanovení:

1. Na svém blogu publikujte překlad (můžete volně, s komentáři a doplňky) článku z prezentovaného zdroje.
2. Překlady, stejně jako jejich zdroje, by se neměly opakovat, aby bylo zajištěno pokrytí a rozmanitost informací.
3. Důležité je zmínit blogera, od kterého se dobrá zpráva dostala a pokud možno předat štafetu dál.
4. Časování relé není nastaveno; Určitě se najde někdo, kdo tuhle bakchanálii zastaví.

Původním zdrojem tohoto příspěvku byl jeden z příspěvků Drewa McLellana na blogu kolektivního kalendáře 24ways. Jít!

Co je to barva RGBA?

Neprozradím tajemství, když řeknu, že požadovaný barevný odstín vzniká v CSS smícháním červené, zelené a modré v požadovaných poměrech. Je tu však jedna nuance - bez ohledu na to, jakou barvu zvolíme, vždy bude pevná a neprůhledná.

CSS3 nabízí několik nových způsobů, jak určit barvu, jedním z nich je použití barevného modelu RGBA. "A" ve zkratce znamená "Alfa"; jeho hodnota je zodpovědná za průhlednost barvy. Pomocí tohoto modelu můžeme stanovit nejen požadovanou kombinaci červené, zelené a modré, ale také určit, jak moc barva „prosvítá“. Něco podobného lze pozorovat při práci s vrstvami ve Photoshopu.

K čemu pak je vlastnost neprůhlednosti?

Jde o to, že definice průhlednosti pro barvu se liší od nastavení průhlednosti pro prvek, nastaveného pomocí vlastnosti CSS opacity. Podívejme se na příklad.

Máme hlavičku h1 se specifickými barvami pro text a pozadí, která se nachází na stránce s obrázkem na pozadí.

H1 ( barva: rgb(0, 0, 0); barva pozadí: rgb(255, 255, 255); )

Nastavením vlastnosti opacity můžete použít průhlednost na celý prvek:

H1 ( barva: rgb(0, 0, 0); barva pozadí: rgb(255, 255, 255); neprůhlednost: 0,5; )

Model RGBA nám poskytuje flexibilnější možnost – ovládat pouze průhlednost barev, nikoli celý prvek. Můžete například nastavit průhlednost pouze pro barvu pozadí:

H1 ( barva: rgb(0, 0, 0); barva pozadí: rgba(255, 255, 255, 0,5); )

Nebo ponechte pozadí beze změny a přiřaďte průhlednost pouze textu:

H1 ( barva: rgba(0, 0, 0, 0,5); barva pozadí: rgb(255, 255, 255); )

Je pravděpodobně méně obvyklé používat syntaxi rgb() k určení barvy než hexadecimální zápis (jako #fff), ale v tomto případě je to absolutní nutnost, protože je nemožné zapsat hodnotu RGBA v hexadecimálním zápisu. Proto nastavíme rgba() přesně takto:

Barva: rgba(255, 255, 255, 0,5);

Stejně jako v rgb() jsou první tři hodnoty zodpovědné za kombinaci červené, zelené a modré. Mohou nabývat jak celočíselných hodnot v rozsahu 0–255, tak procent v rozsahu 0 až 100 %. Čtvrtá hodnota určuje stupeň průhlednosti v rozsahu od 0 (zcela průhledná) do 1 (zcela neprůhledná).

Tuto metodu můžete bezpečně použít všude, kde běžně nastavujete barvy v CSS: barvy pozadí a textu, okraje, obrysy atd.

Podpora prohlížeče

Většina moderních prohlížečů (Firefox, Safari, Opera, Google Chrome) podporuje barvy RGBA, ale ne Internet Explorer.

Nezbývá nic jiného, ​​než specifikovat barvy RGBA pro prohlížeče, které je podporují, a pro zbytek přijít s vlastními „berličkami“.

CSS parsování funguje v prohlížečích tak, že pokud se při parsování pravidel objeví nějaká neznámá hodnota, bude ignorována. Využijme tyto znalosti k vykreslení normální neprůhledné barvy pro „nerozumné“ prohlížeče. K tomu stačí uvést barvu ve formátu jako první inzerát. RGB, a druhý nastaví barevný odstín ve formátu RGBA— pro prohlížeče, které podporují tento barevný model.

H1 ( barva: rgb(127, 127, 127); barva: rgba(0, 0, 0, 0,5); )

V případech, kdy chcete použít průhlednost na vlastnost barva pozadí, můžete se uchýlit k použití obrázku PNG s alfa kanálem, abyste dosáhli přesně stejného efektu. Samozřejmě je to dražší metoda, na rozdíl od „čistého“ CSS, protože budete muset vytvořit svůj vlastní PNG pro každou úroveň průhlednosti, ale žádná ryba, žádná ryba.

Použijeme stejný princip jako v předchozím příkladu: nejprve nastavíme pozadí pro všechny prohlížeče a poté přepíšeme řádek s ohledem na RGBA.

H1 ( pozadí: transparentní url(black50.png); pozadí: rgba(0, 0, 0, 0,5) žádné; )

Je třeba poznamenat, že tento návrh funguje, protože používáme zkrácenou formu pozadí, která nám umožňuje nastavit barvu pozadí i obrázek pozadí současně. Prohlížeče, které narazí na neznámou hodnotu rgba(), budou druhý řádek zcela ignorovat a zpracují první deklaraci.

Něco jiného

Hlavní výhodou RGBA je možnost vytvářet různá konstrukční řešení bez použití výkresů. Přínosem jsou zde nejen lehčí (a tedy rychlejší) stránky, ale také úspora času: stránky využívající zmíněnou technologii se snadněji vytvářejí a udržují. Pod vlivem Javascriptu nebo v reakci na akce uživatele se hodnoty v CSS mohou snadno změnit. V našem případě mohou kresby takové transformace ztížit.

Div ( barva: rgba(255, 255, 255, 0,8); barva pozadí: rgba(142, 213, 87, 0,3); ) div:hover ( barva: rgba(255, 255, 255, 1); pozadí- barva: rgba(142, 213, 87, 0,6); )

Rozumné použití průhlednosti pro barvy ohraničení pomůže některým prvkům na stránce vypadat organicky:

Div ( barva: rgb(0, 0, 0); barva pozadí: rgb(255, 255, 255); okraj: 10px solid rgba(255, 255, 255, 0,3); )

Konečně

Jak už to tak bývá, špičkové inovace CSS jsou podporovány předními prohlížeči. Doufejme, že si kluci z Redmondu v životě něco uvědomí a přidají se k většině.

V první části knihy jsme si již na některých příkladech ukázali, jak nastavit barvu textu v CSS. Není zde nic složitého: budete potřebovat vlastnost color a hodnotu barvy, kterou chcete text vybarvit.

P ( barva: #211C18; )

V našem příkladu představuje hodnota #211C18 hexadecimální kód barvy. Pokud jste již obeznámeni s hexadecimální číselnou soustavou, můžete čtení dalšího odstavce přeskočit. Dále si povíme i o dalších způsobech reprezentace barev na webu – pomocí barevných modelů (RGB, HSL) a klíčových slov. Tyto informace budou užitečné pro začátečníky a doporučujeme je přečíst.

Hexadecimální barvy (hexadecimální)

Hexadecimální číselná soustava ( hexadecimální, hex) vychází z čísla 16. K zápisu hexadecimální hodnoty se používá 16 znaků: arabské číslice od 0 do 9 a první písmena latinské abecedy (A, B, C, D, E, F). Barva v hexadecimálním formátu se zapisuje jako tři dvoumístná čísla od 00 do FF (musí jim předcházet znak hash #), který odpovídá třem složkám: Červená, Zelená, Modrá (barevný model RGB). Jinými slovy, barevný záznam může být reprezentován jako #RRGGBB, kde první pár znaků určuje úroveň červené, druhý - úroveň zelené a třetí - úroveň modré. Výsledná barva je kombinací těchto tří barev.

Těsnopisný zápis pro hexadecimální barvy

Některé hexadecimální hodnoty barev mohou být zapsány ve zkratkách. Chcete-li to provést, otočte položku jako #RRGGBB na #RGB. To lze provést, když hexadecimální číslo obsahuje tři páry identických znaků.

Zkrácená forma zápisu je poměrně běžná a pro vaši informaci uvedeme několik příkladů zkratek. Mimochodem, hexadecimální hodnoty barev nerozlišují velká a malá písmena - můžete použít velká i malá písmena, vše závisí na vaší touze a vkusu.

Příklady zkrácené notace pro hexadecimální barvy:

HEX kód	Těsnopisný zápis
#FFDD66	#FD6
#8833FF	#83F
#333333	#333
#cccccc	#ccc

RGB barevný model

Druhým způsobem, jak určit barvy v CSS, je použití desítkových hodnot RGB (červená, modrá, zelená). Chcete-li to provést, musíte za vlastnost color napsat klíčové slovo rgb a poté v závorce a oddělené čárkami - tři čísla v rozsahu od 0 do 255, z nichž každé znamená intenzitu červené, zelené a modré barvy (r , g, b). Čím vyšší číslo, tím intenzivnější barva. Chcete-li například získat jasně zelenou barvu, musíte napsat:

P ( barva: rgb(0, 255, 0); )

Ale nažloutlý hořčičný odstín má následující význam:

Barva: rgb(94, 81, 3); /* níže je stejná barva, zapsáno v šestnáctkové soustavě: */ barva: #5E5103;

Hodnota pro černou je zapsána jako (0, 0, 0) a pro bílou jako (255, 255, 255) . Tyto hodnoty je také možné uvést v procentech. Číslo 255 tedy odpovídá 100 %, proto lze bílou barvu nastavit následovně:

Barva: rgb (100 %, 100 %, 100 %);

Kde hledat barevné významy

Možná máte otázku: odkud berete všechny tyto barevné významy? Existuje mnoho grafických editorů a online služeb, pomocí kterých můžete vybírat barvy a vytvářet barevná schémata. Jedním z nejoblíbenějších programů, ve kterém si můžete vybrat vhodnou barvu a získat její RGB, hexadecimální hodnoty a další, je Adobe Photoshop. Alternativně existují speciální stránky, kde si snadno vyberete nejen barvu, ale i celé barevné schéma. Skvělým příkladem je služba Adobe Color CC.

Barevný model RGBA

Barvu ve formátu RGBA můžete nastavit v podstatě stejným způsobem jako v RGB. Rozdíl mezi RGBA a RGB je přítomnost alfa kanálu, který je zodpovědný za průhlednost barvy. Průhlednost se nastavuje pomocí čísla v rozsahu od 0 do 1, kde 0 znamená úplnou průhlednost a 1 naopak znamená zcela neprůhledné. Mezilehlé hodnoty jako 0,5 umožňují nastavit průsvitný vzhled (je povolen zkrácený zápis bez nuly, ale s tečkou – 0,5). Například, aby byl text barevný a mírně průhledný, musíte za vlastnost color napsat klíčové slovo rgba a hodnotu barvy:

P ( barva: rgba(94, 81, 3, .9); )

Nevýhodou RGBA je, že jej nepodporuje Internet Explorer verze 8 a starší. Speciálně pro IE8 můžete použít následující řešení:

P ( barva: rgb(94, 81, 3); barva: rgba(94, 81, 3, .9); )

První vlastnost v příkladu je určena pro prohlížeč IE8, který zobrazí text v požadované barvě, ale bez průhlednosti. A ty prohlížeče, které rozumí RGBA, aplikují na prvek druhou vlastnost s průhledností.

Barevné modely HSL (HSLA).

Barvu můžete také nastavit v CSS pomocí souřadnic barevného modelu HSL (Hue, Saturation, Lightness). Píše se to takto:

P ( barva: hsl(165, 100 %, 50 %); )

První číslo v závorce znamená odstín a udává se ve stupních (rozsah čísel od 0 do 359). Bude snadné pochopit, proč se používají stupně, pokud si pamatujete, jak vypadá barevné kolečko:

Druhé a třetí číslo v závorce znamená sytost a světlost. Jejich hodnoty jsou nastaveny v procentech od 0 do 100. Čím nižší je hodnota sytosti, tím je barva tlumenější. Hodnota sytosti nula bude mít za následek šedou barvu bez ohledu na to, jaká je hodnota odstínu. Hodnota světlosti umožňuje určit jas barvy. Nízké hodnoty mají za následek tmavé odstíny barev, vysoké hodnoty světlé odstíny. Hodnota 100 % pro světlost znamená bílou, 0 % znamená černou.

Barevný model HSLA funguje téměř stejně jako HSL, ale podobně jako RGBA má alfa kanál, pomocí kterého můžete nastavit průhlednost barvy a zadat požadovanou hodnotu v rozsahu od 0 do 1:

P ( barva: hsla(165, 100 %, 50 %, .6); )

HSL a HSLA jsou podporovány všemi prohlížeči kromě Internet Exploreru verze 8 a starší.

Standardní HTML barvy

Dalším způsobem reprezentace barev na webu jsou klíčová slova, která lze použít k určení barvy prvku. Příklad:

P(barva:černá;)

Existuje 16 standardních barev, které lze zapsat do hodnoty vlastnosti color:

Barva klíčového slova	HEX kód	RGB
Červené	#FF0000	255, 0, 0
kaštanové	#800000	128, 0, 0
žlutá	#FFFF00	255, 255, 0
olivový	#808000	128, 128, 0
Limetka	#00FF00	0, 255, 0
zelená	#008000	0, 128, 0
aqua	#00FFFF	0, 255, 255
modrozelená	#008080	0, 128, 128
modrý	#0000FF	0, 0, 255
námořnictvo	#000080	0, 0, 128
fuchsie	#FF00FF	255, 0, 255
nachový	#800080	128, 0, 128
bílý	#FFFFFF	255, 255, 255
stříbrný	#C0C0C0	192, 192, 192
šedá	#808080	128, 128, 128
Černá	#000000	0, 0, 0

Tyto barvy jsou podporovány všemi prohlížeči. Kromě nich existuje asi 130 dalších klíčových slov pro různé odstíny barev. Kompletní tabulku těchto barev lze vidět v referenční knize W3C.

Použití takových klíčových slov je přijatelné, ale existuje riziko, že některé slovo nebude prohlížečem přijato. Proto se doporučuje zapsat hexadecimální kód barvy místo klíčových slov.

Výsledek

V CSS se barva textu určuje pomocí vlastnosti color a její hodnotu lze zapsat více způsoby – v hexadecimálním (hexadecimálním) formátu, ve formátu RGB či HSL nebo zadáním klíčového slova. Aby se zabránilo nesprávnému zobrazení barvy zadané pomocí klíčového slova, je lepší zadat její hexadecimální hodnotu.

Je také možné nastavit průhlednost prvku pomocí alfa kanálu (formáty RGBA a HSLA). Stojí za zvážení, že prohlížeč IE8 a jeho dřívější verze nepodporují formáty RGBA, HSL a HSLA.

HEX/HTML

HEX barva 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í umožňuje zkrácenou formu hexadecimálního barevného zápisu. 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 vytvořit 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 od 0 do 255. Například rgb(0,0,255) se zobrazí jako modré, protože modrý parametr je nastaven na nejvyšší hodnotu (255) a ostatní jsou nastaveny na 0.

Některé aplikace (zejména webové prohlížeče) podporují procentuální záznam hodnot 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í zadání */

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 – rozšířením RGB o podporu 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 v rozsahu od 0,0 (plně průhledné) do 1,0 (plně neprůhledné).

1. h1 ( barva: rgb(0, 0, 255); ) /* modrá v běžné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 intuitivnějším a čitelnějším způsobem než typické RGB. Model se často používá v grafických aplikacích, barevných paletách a analýze obrazu.

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

Odstín určuje polohu barvy na barevném kole (od 0 do 360). Sytost je procentuální hodnota sytosti (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, který podporuje alfa kanál k označení neprůhlednosti objektu.

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

1. h1 ( barva: hsl(120, 100 %, 50 %); ) /* zelená v normální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); ) /* zcela průhledná */

CMYK

Barevný model CMYK je často spojován s barevným tiskem a 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/blacK).

Každé z čísel, které definují barvu v CMYK, představuje procento inkoustu dané barvy, které tvoří barevnou kombinaci, nebo přesněji velikost rastrového bodu, který se vytiskne na fotosázecí stroj na film dané barvy (resp. přímo na tiskovou desku v případě CTP).

Například pro získání barvy PANTONE 7526 byste smíchali 9 dílů azurové, 83 dílů purpurové, 100 dílů žluté a 46 dílů černé. To lze označit následovně: (9,83,100,46). Někdy se používají následující 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 určuje polohu barvy na barevném kole (od 0 do 360). Sytost je procentuální hodnota sytosti (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 hlavní komponenty „imaginární“, což znamená, že nemůžete přiřadit X, Y a Z k žádné sadě barev, které se mají míchat. 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 laboratoře bylo vytvořit barevný prostor, ve kterém by změny barev byly z hlediska lidského vnímání lineárnější (ve srovnání s XYZ), to znamená, aby stejná změna hodnot barevných souřadnic v různých oblastech barevného prostoru vyvolávají stejný pocit změny barvy.

Barevné kódy v CSS se používají k určení barev. Barevné kódy nebo hodnoty barev se obvykle používají k nastavení barvy buď pro barvu popředí prvku (např. barva textu, barva odkazu) nebo barvu pozadí prvku (barva pozadí, barva bloku). Lze je také použít ke změně barvy tlačítka, ohraničení, značky, vznášení a dalších dekorativních efektů.

Hodnoty barev můžete zadat v různých formátech. V následující tabulce jsou uvedeny všechny možné formáty:

Uvedené formáty jsou podrobněji popsány níže.

CSS barvy - Hex kódy

Hexadecimální kód barvy je šestimístná reprezentace barvy. První dvě číslice (RR) představují červenou hodnotu, další dvě představují zelenou hodnotu (GG) a poslední dvě představují modrou hodnotu (BB).

CSS barvy - krátké hexadecimální kódy

Krátký hexadecimální kód barvy je kratší forma šestiznakového zápisu. V tomto formátu se každá číslice opakuje, aby vznikla ekvivalentní šestimístná hodnota barvy. Například: #0F0 se změní na #00FF00.

Hexadecimální hodnotu lze převzít z libovolného grafického softwaru, jako je Adobe Photoshop, Core Draw atd.

Každému hexadecimálnímu barevnému kódu v CSS bude předcházet znak hash „#“. Níže jsou uvedeny příklady použití hexadecimálních zápisů.

CSS barvy – hodnoty RGB

hodnota RGB je kód barvy, který se nastavuje pomocí vlastnosti rgb(). Tato vlastnost má tři hodnoty: jednu pro červenou, zelenou a modrou. Hodnota může být celé číslo od 0 do 255 nebo procento.

Poznámka: Ne všechny prohlížeče podporují vlastnost barvy rgb(), proto se nedoporučuje ji používat.

Níže je uveden příklad ukazující více barev pomocí hodnot RGB.

Generátor barevných kódů

Pomocí naší služby můžete vytvořit miliony barevných kódů.

Bezpečné barvy pro prohlížeč

Níže je tabulka 216 barev, které jsou nejbezpečnější a nezávislé na počítači. Tyto barvy v CSS se pohybují od 000000 do FFFFFF hexadecimálního kódu. Jejich použití je bezpečné, protože zajišťují, že všechny počítače zobrazují barvy správně při práci s paletou 256 barev.

Tabulka "bezpečných" barev v CSS
#000000	#000033	#000066	#000099	#0000 CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300 CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600 CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900 CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF