4 spôsoby, ako definovať farby v CSS

Kľúčové informácie

• Používanie názvov farieb: CSS poskytuje 145 názvov farieb pre jednoduchý a pre začiatočníkov priateľský výber farieb, ale možnosti sú obmedzené a nemusia spĺňať presné požiadavky na dizajn.
• Hexadecimálne farebné kódy: Hexadecimálne kódy ponúkajú širokú škálu farebných možností a presné prispôsobenie, hoci ich používanie a zapamätanie môže byť menej intuitívne.
• Hodnoty farieb RGB a RGBA: RGB umožňuje presné ovládanie farieb pomocou číselných hodnôt, zatiaľ čo RGBA pridáva priehľadnosť. Dôležité je zabezpečiť dostupné farebné kombinácie.

Farby patria medzi najčastejšie používané atribúty CSS, ktoré zohrávajú dôležitú úlohu pri formovaní vizuálnej identity, nálady a používateľského zážitku webovej stránky. CSS ponúka celý rad možností použitia farieb, z ktorých každá je prispôsobená špecifickým potrebám a preferenciám dizajnu.

Aj keď je ľahké prehliadnuť dôležitosť definície farieb, váš výber môže výrazne ovplyvniť vzhľad a dojem z vášho webu. Skúmanie rozdielov medzi rôznymi metódami a ich praktického použitia a kombinácie zvýši vašu schopnosť vytvárať vizuálne príťažlivé webové stránky.

1. Používanie názvov farieb

CSS poskytuje praktický spôsob definovania farieb pomocou názvov a k dispozícii je 145 možností. Tieto názvy farieb siahajú od jednoduchých „červených“, „zelených“ a „modrých“ až po konkrétnejšie odtiene, ako sú „koral“ alebo „levanduľa“.

Používanie pomenovaných farieb je jednoduché: vyberiete názov farby ako „červená“ a použijete ho vo vlastnosti CSS, ktorá podporuje hodnoty farieb. Takéto vlastnosti zahŕňajú zrejmé farba a farba pozadia, ale tiež border-color, obrys-farba, a textový tieň, okrem iného.

Názvy farieb sú užitočné, keď potrebujete dočasnú farbu na prototypovanie alebo chcete, aby bol váš kód ľahko čitateľný. Tu je syntax:

color_property: color_name;

V tomto prípade stačí vymeniť názov_farby s konkrétnou farbou, ktorú chcete použiť. Napríklad, ak chcete nastaviť text farba odseku na červená, napíš:

p {
color: red;
}

To dá vašim odsekom červenú farbu textu:

Pros: Sú ľahko čitateľné a zrozumiteľné vo vašom kóde CSS. Sú vhodné pre začiatočníkov, fungujú dobre vo všetkých prehliadačoch a sú užitočné pre rýchle nápady na dizajn.

Zápory: Majú obmedzené možnosti a nemusia ponúkať presné odtiene, ktoré potrebujete, čo obmedzuje kreativitu dizajnu. Okrem toho nemusia vždy spĺňať prísne požiadavky na dostupnosť a podpora v starších systémoch sa môže líšiť.

2. Hexadecimálne farebné kódy

Hexadecimálne farebné kódy, často označované ako „hexadecimálne kódy“, sú najbežnejšími metódami špecifikovania farieb vo webovom dizajne. Tieto kódy pozostávajú zo šiestich kombinácií číslic a písmen (0-9, A-F), ktoré predstavujú kombináciu červenej, zelenej a modrej (RGB) zložiek vo farbe.

Aj keď sa ľahko používajú, pochopiť, ako fungujú, môže byť náročné. Môžeš vziať hlboký ponor do hexadecimálnych kódov lepšie pochopiť. Tu je základný príklad toho, ako môžete použiť hexadecimálne kódy v CSS:

color: #RRGGBB;

V tomto formáte RR, GG a BB predstavujú červenú, zelenú a modrú zložku. Každá zložka môže byť v rozsahu od 00 (žiadna intenzita) po FF (maximálna intenzita). Napríklad, ak chcete nastaviť farbu pozadia hlavičky webovej stránky na konkrétny odtieň modrej, môžete použiť hexadecimálny kód, ako je tento:

header {
background-color: #336699;
}

To vytvorí tmavomodrú farbu:

​​​​​

Môžete tiež použiť skratku, ak každá z troch zložiek opakuje rovnaký znak dvakrát. Vyššie uvedený príklad môžete napísať ako:

header {
background-color: #369;
}

Pros: Hexadecimálne farebné kódy poskytujú širokú škálu farebných možností, čo vám umožňuje vytvárať podrobné a prispôsobené odtiene. Ponúkajú plynulú kontrolu nad výberom farieb, vďaka čomu sú ideálne pre komplexné požiadavky na dizajn.

Zápory: Hoci sú hexadecimálne kódy výkonné, môžu byť menej intuitívne ako pomenované farby. Môžete sa tiež stretnúť s problémom zapamätania si konkrétnych hodnôt farieb. Našťastie nástroje na nájdenie hexadecimálnych kódov farieb sú k dispozícii, vďaka čomu je proces ľahšie zvládnuteľný.

3. Hodnoty farieb RGB a RGBA

Podobne ako hexadecimálne kódy, aj tento formát vám umožňuje špecifikovať farby podľa ich červenej, zelenej a modrej zložky. Tentokrát však môžete použiť priateľskejšie celé čísla.

Hodnoty farieb RGB

Hodnoty farieb RGB sú druhou najčastejšie používanou metódou na definovanie farieb v CSS. „RGB“ predstavuje červenú, zelenú a modrú, vyjadrené ako funkcia CSS so zátvorkami za nimi. V zátvorkách priraďujete hodnoty každému farebnému kanálu v rozsahu od 0 do 255. To vám umožní ovládať intenzitu červenej, zelenej a modrej farby, ktorú chcete použiť.

Tu je syntax:

rgb(red_value, green_value, blue_value);

Nahradiť červená_hodnota, zelená_hodnota, a modrá_hodnota s ich príslušnými číselnými hodnotami. Môžete napríklad dosiahnuť biele, čierne a červené farby, ako sú tie na tomto obrázku:

Keď nastavíte všetky tri farebné kanály (červený, zelený a modrý) na ich maximálnu hodnotu 255, výsledkom bude najvyššia intenzita pre každý kanál, čím sa vytvorí biela farba:

.white-box {
 color: rgb(255, 255, 255);
}

Keď nastavíte všetky tri farebné kanály na ich minimálnu hodnotu 0, predstavuje to absenciu farby v každom kanáli, výsledkom čoho je čierna.

.black-box {
color: rgb(0, 0, 0);
}

Nastavením červeného kanála na maximálnu hodnotu 255, zatiaľ čo ostatné kanály ponechajú na minimálnej hodnote 0, vytvorí červenú farbu:

.red-box {
color: rgb(255, 0, 0); 
}

Hodnoty farieb RGBA

RGBA funguje rovnako ako RGB, jediným rozdielom je zahrnutie hodnoty alfa. „A“ v RGBA znamená alfa, ktorá určuje úroveň priehľadnosti alebo nepriehľadnosti pre zvolenú farbu. Hodnota 0 predstavuje úplnú priehľadnosť, vďaka čomu je farba úplne neviditeľná, zatiaľ čo hodnota 1 predstavuje úplnú nepriehľadnosť, vďaka čomu je farba plne viditeľná.

RGBA je obzvlášť užitočné, keď chcete vytvárať prvky s rôznymi úrovňami priehľadnosti, ako sú priesvitné pozadie alebo vyblednutý text. Úplná syntax je:

color: rgba(red_value, green_value, blue_value, alpha_value);

Tu, červená_hodnota, zelená_hodnota, a modrá_hodnota predstavujú farebné kanály ako v RGB a alfa_hodnota určuje úroveň transparentnosti.

div {
background-color: rgba(0, 128, 0, 0.5);
}

V tomto príklade hodnota alfa 0,5 priraďuje zelenej farbe 50 % priehľadnosť, čo umožňuje, aby obsah pod ňou presvital:

Pros: RGB a RGBA vám umožňujú presne ovládať farby, čo uľahčuje výber presných odtieňov a vytváranie vizuálne atraktívnych návrhov. Sú kompatibilné s rôznymi webovými prehliadačmi, vďaka čomu budú vami zvolené farby vyzerať konzistentne.

Zápory: Výzva spočíva v zabezpečení dostupných farebných kombinácií. Je dôležité venovať pozornosť kontrastným pomerom, najmä pri práci s priehľadnosťou v RGBA. Pokyny WCAG vám môžu pomôcť zabezpečíte, aby bol váš dizajn prístupný.

4. Hodnoty farieb HSL a HSLA

HSL – skratka pre Hue, Saturation a Lightness – je ďalšia CSS funkcia, ktorá definuje farby. Podobne ako RGB, aj HSL používa číselné hodnoty na reprezentáciu farieb, ale robí to inak. Možno vám je známe Hodnoty HSL z komponentov používateľského rozhrania v aplikáciách pre návrh a inde.

Hue: Predstavuje samotnú farbu pomocou stupňov na farebnom koliesku v rozsahu od 0 do 360. Predstavte si to ako výber bodu na kruhu, kde každý stupeň zodpovedá inej farbe. Napríklad 0 a 360 stupňov pre červenú, 120 stupňov pre zelenú a 240 stupňov pre modrú.

Sýtosť: Sýtosť určuje živosť alebo intenzitu farby. Definuje vzťah farby so sivou, pričom 0 % je úplne v odtieňoch sivej (desaturovaná) a 100 % je úplne nasýtená (živá a čistá).

Ľahkosť: Svetlosť predstavuje, ako svetlá alebo tmavá farba vyzerá. Súvisí to s pozíciou farby v spektre medzi čiernou (0 %) a bielou (100 %). Hodnota 50 % predstavuje normálnu farbu, kým hodnoty pod 50 % stmavia farbu a hodnoty nad 50 % ju zosvetlia.

Okrem HSL existuje HSLA, kde „A“ znamená „alfa“. Je to podobné ako „A“ v RGBA a znamená transparentnosť.

Tu je syntax:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Pomocou tejto syntaxe nahraďte hue_value, saturačné_percento, a svetlosť_percento so špecifickými hodnotami, ktoré chcete pre každý komponent. Napríklad:

div {
background-color: hsl(120, 100%, 50%);
}

V tomto príklade je farba pozadia a div prvok je nastavený na žiarivú zelenú pomocou hodnôt HSL. 120 predstavuje odtieň (zelenú), 100 % znamená plnú sýtosť a 50 % nastavuje svetlosť na vyváženú úroveň.

Pros: HSL a HSLA ponúkajú všestranné výpočty farieb pomocou vlastných vlastností CSS. Sú vysoko kompatibilné s modernými prehliadačmi a umožňujú jednoduché nastavenie svetlosti farieb.

Zápory: Učenie HSL zahŕňa pochopenie vedy o farbách, ako sú odtiene a sýtosti, ktoré môžu byť náročnejšie ako známe RGB farby.

Prijatie sily farieb CSS

Existuje viac metód, ktoré môžete skontrolovať, a keď budete skúmať rôzne formáty na definovanie farieb v CSS majte na pamäti, že máte možnosť formovať vzhľad, náladu a používateľskú skúsenosť svojho webu.

Vaša voľba formátu farieb – či už ide o jednoduché názvy farieb, hexadecimálne kódy, RGB alebo HSL – môže ovplyvniť to, ako vaše stránky vnímajú vaše publikum. Takže experimentujte, učte sa a nájdite definície farieb, ktoré najlepšie vyhovujú vašim cieľom dizajnu.