HSL až HEX

Porovnajte HSL s HEX

CSS 3 predstavuje ďalší spôsob, ako definovať farbu pomocou HSL (z angličtiny. Hue, Saturation, Lightness). je model, v ktorom je farba určená tromi parametrami: odtieň, sýtosť a svetlosť. Poďme sa pozrieť na každý parameter osobitne. Kľúčovou výhodou HSL je schopnosť špecifikovať farebné charakteristiky nezávisle na sebe. To vám otvára obrovské príležitosti. Ľahko urobíte farbu jasnejšou, tmavšou, sýtejšou alebo desaturovanou. A pri zachovaní jeho odtieňa. Alebo naopak - zmeňte farebné odtiene bez zmeny ich sýtosti alebo jasu. Na použitie takýchto funkcií sa často používajú preprocesory, ale je to možné aj bez nich. Funkcia hsl () sa používa na určenie farieb HSL. Funkcia nadobúda tri hodnoty oddelené čiarkou: odtieň, sýtosť a svetlosť. Zmenou hodnôt sýtosti a jasu môžete získať susedné odtiene pre konkrétnu farbu.

Vo väčšine prípadov je možné rozpoznať farbu podľa hexadecimálneho kódu, berúc do úvahy iba prvé číslice párov. V nižšie uvedenom príklade je zrejmé, že farba je zmiešaná s množstvom červenej, trochu modrej a vôbec nie zelenej. Pochopenie farby pomocou hexadecimálneho kódu umožňuje webovému dizajnérovi rýchlejšie sa pohybovať v kóde stránky a okrem toho môžete vždy urobiť dojem na kolegov alebo klientov tým, že poviete Ah, aký úžasný odtieň bordovej farby. Môžete tiež ľahko zmeniť jas, odtieň alebo sýtosť farby úpravou iba jej hexadecimálneho kódu. V prvom príklade nižšie sa jeden z párov mení v 10% krokoch, pričom sa zvyšuje jas farieb. V druhom príklade jas stúpa, ale sýtosť klesá. Hodnoty RGB je možné určiť aj pomocou hexadecimálnych (HEX) farebných hodnôt vo formáte: #RRGGBB, kde RR (červená), GG (zelená) a BB (modrá) sú hexadecimálne hodnoty od 00 do FF (rovnaké ako desatinné 0-) 255). Hexadecimálny systém je na rozdiel od desatinného systému založený, ako už naznačuje jeho názov, na čísle 16.