HSL až HEX

Porovnejte HSL s HEX

CSS 3 zavádí další způsob, jak definovat barvu pomocí HSL (z angličtiny. Odstín, Sytost, Světlost). je model, ve kterém je barva určena třemi parametry: odstín, sytost a světlost. Pojďme se podívat na každý parametr zvlášť. Klíčovou výhodou HSL je schopnost specifikovat barevné charakteristiky nezávisle na sobě. To vám otevírá obrovské příležitosti. Můžete snadno nastavit jasnější, tmavší, sytější nebo desaturovanou barvu. A při zachování jeho stínu. Nebo naopak - změňte odstíny beze změny jejich sytosti nebo jasu. K použití těchto funkcí se často používají preprocesory, ale bez nich je to možné. Funkce hsl () se používá k určení barev HSL. Funkce má tři hodnoty oddělené čárkou: Odstín, Sytost a Světlost. Změnou hodnot sytosti a jasu můžete získat přilehlé odstíny pro konkrétní barvu.

Ve většině případů je možné rozpoznat barvu pomocí hexadecimálního kódu, přičemž se berou v úvahu pouze první číslice párů. V níže uvedeném příkladu je jasné, že barva je smíchána s hodně červenou, trochu modrou a vůbec žádnou zelenou. Porozumění barvě pomocí hexadecimálního kódu umožňuje webovému designérovi rychleji se pohybovat v kódu stránky a kromě toho můžete vždy udělat dojem na kolegy nebo klienty tím, že řeknete Ah, jaký úžasný odstín vínové. Jas, odstín nebo sytost barvy můžete také snadno změnit úpravou pouze jejího šestnáctkového kódu. V prvním příkladu níže se jeden z párů mění v krocích po 10%, zatímco se zvyšuje jas barev. Ve druhém příkladu jas stoupá, ale sytost klesá. Hodnoty RGB lze také zadat pomocí hexadecimálních (HEX) barevných hodnot ve tvaru: #RRGGBB, kde RR (červená), GG (zelená) a BB (modrá) jsou hexadecimální hodnoty od 00 do FF (stejné jako desítkové 0-) 255). Hexadecimální systém je na rozdíl od desítkového systému založen, jak naznačuje jeho název, na čísle 16.