4 způsoby, jak definovat barvy v CSS

Klíčové věci

• Použití názvů barev: CSS poskytuje 145 názvů barev pro snadný a pro začátečníky přívětivý výběr barev, ale možnosti jsou omezené a nemusí splňovat přesné požadavky na design.
• Hexadecimální barevné kódy: Hexadecimální kódy nabízejí širokou škálu barevných možností a přesné přizpůsobení, i když jejich použití a zapamatování mohou být méně intuitivní.
• Hodnoty barev RGB a RGBA: RGB umožňuje přesné ovládání barev pomocí číselných hodnot, zatímco RGBA přidává průhlednost. Důležité je zajistit dostupné barevné kombinace.

Barvy patří mezi nejčastěji používané atributy CSS a hrají zásadní roli při utváření vizuální identity, nálady a uživatelského zážitku webu. CSS nabízí řadu možností pro použití barev, z nichž každá je přizpůsobena konkrétním potřebám a preferencím designu.

I když je snadné přehlédnout důležitost definice barev, vaše volby mohou výrazně ovlivnit vzhled a dojem z vašeho webu. Zkoumání rozdílů mezi různými metodami a toho, jak je prakticky aplikovat a kombinovat, zvýší vaši schopnost vytvářet vizuálně přitažlivé webové stránky.

1. Použití názvů barev

CSS poskytuje praktický způsob, jak definovat barvy pomocí názvů, a k dispozici je 145 možností. Tyto názvy barev se pohybují od jednoduchých „červená“, „zelená“ a „modrá“ až po konkrétnější odstíny, jako je „korál“ nebo „levandule“.

Použití pojmenovaných barev je přímočaré: vyberete název barvy jako „červená“ a použijete jej ve vlastnosti CSS, která podporuje hodnoty barev. Takový vlastnosti zahrnují zjevné barva a barva pozadí, ale také barva ohraničení, obrys-barva, a stín textu, mezi ostatními.

Názvy barev jsou užitečné, když potřebujete dočasnou barvu pro prototypování nebo chcete, aby byl váš kód snadno čitelný. Zde je syntaxe:

color_property: color_name;

V tomto případě stačí vyměnit název_barvy s konkrétní barvou, kterou chcete použít. Například pokud chcete nastavit text barva odstavce do Červené, napsat:

p {
color: red;
}

To dá vašim odstavcům červenou barvu textu:

Klady: Jsou snadno čitelné a srozumitelné ve vašem kódu CSS. Jsou vhodné pro začátečníky, fungují dobře ve všech prohlížečích a jsou užitečné pro rychlé nápady na design.

Nevýhody: Mají omezené možnosti a nemusí nabízet přesné odstíny, které potřebujete, což omezuje kreativitu designu. Navíc nemusí vždy splňovat přísné požadavky na přístupnost a podpora ve starších systémech se může lišit.

2. Hexadecimální barevné kódy

Hexadecimální barevné kódy, často označované jako „hexadecimální kódy“, jsou nejběžnějšími metodami určování barev ve webovém designu. Tyto kódy se skládají ze šestimístných kombinací čísel a písmen (0-9, A-F), které představují kombinaci červené, zelené a modré (RGB) složky v barvě.

I když se snadno používají, pochopit, jak fungují, může být náročné. Můžeš si vzít hluboký ponor do hexadecimálních kódů lépe rozumět. Zde je základní příklad toho, jak můžete použít hex kódy v CSS:

color: #RRGGBB;

V tomto formátu představují RR, GG a BB červenou, zelenou a modrou složku. Každá složka se může pohybovat od 00 (žádná intenzita) do FF (maximální intenzita). Pokud například chcete nastavit barvu pozadí záhlaví webu na určitý odstín modré, můžete použít hexadecimální kód, jako je tento:

header {
background-color: #336699;
}

Tím vznikne tmavě modrá barva:

​​​​​

Můžete také použít zkratku, pokud každá ze tří složek opakuje stejný znak dvakrát. Výše uvedený příklad můžete napsat jako:

header {
background-color: #369;
}

Klady: Hexadecimální barevné kódy poskytují širokou škálu barevných možností, které vám umožňují vytvářet podrobné a přizpůsobené odstíny. Nabízejí plynulou kontrolu nad výběrem barev, takže jsou ideální pro komplexní požadavky na design.

Nevýhody: Ačkoli jsou hexadecimální kódy výkonné, mohou být méně intuitivní než pojmenované barvy. Můžete se také setkat s problémem zapamatování konkrétních hodnot barev. Naštěstí, nástroje pro hledání hexadecimálních kódů barev jsou k dispozici, díky čemuž je proces lépe ovladatelný.

3. Hodnoty barev RGB a RGBA

Stejně jako hexadecimální kódy vám tento formát umožňuje určit barvy pomocí jejich červené, zelené a modré složky. Tentokrát však můžete použít přátelštější celá čísla.

Hodnoty barev RGB

Hodnoty barev RGB jsou druhou nejčastěji používanou metodou pro definování barev v CSS. „RGB“ představuje červenou, zelenou a modrou barvu, vyjádřenou jako funkce CSS se závorkami za nimi. Uvnitř závorek přiřadíte každému barevnému kanálu hodnoty v rozsahu od 0 do 255. To vám umožní ovládat intenzitu červené, zelené a modré barvy, kterou chcete použít.

Zde je syntaxe:

rgb(red_value, green_value, blue_value);

Nahradit červená_hodnota, zelená_hodnota, a modrá_hodnota s jejich příslušnými číselnými hodnotami. Můžete například dosáhnout bílé, černé a červené barvy jako na tomto obrázku:

Když nastavíte všechny tři barevné kanály (červenou, zelenou a modrou) na jejich maximální hodnotu 255, výsledkem je nejvyšší intenzita pro každý kanál, čímž se vytvoří bílá barva:

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

Když nastavíte všechny tři barevné kanály na jejich minimální hodnotu 0, představuje to nepřítomnost barvy v každém kanálu, výsledkem je černá.

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

Nastavením červeného kanálu na jeho maximální hodnotu 255 a zachováním ostatních kanálů na jejich minimální hodnotě 0 vznikne červená barva:

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

Hodnoty barev RGBA

RGBA funguje stejně jako RGB, jediným rozdílem je zahrnutí hodnoty alfa. „A“ v RGBA znamená alfa, která určuje úroveň průhlednosti nebo krytí pro vybranou barvu. Hodnota 0 představuje úplnou průhlednost, díky níž je barva zcela neviditelná, zatímco hodnota 1 představuje plnou neprůhlednost, díky níž je barva plně viditelná.

RGBA je zvláště užitečné, když chcete vytvořit prvky s různou úrovní průhlednosti, jako je průsvitné pozadí nebo vybledlý text. Úplná syntaxe je:

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

Tady, červená_hodnota, zelená_hodnota, a modrá_hodnota reprezentují barevné kanály jako v RGB a alfa_hodnota určuje úroveň průhlednosti.

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

V tomto příkladu hodnota alfa 0,5 přiřadí 50% průhlednosti zelené barvě, takže obsah pod ní bude prosvítat:

Klady: RGB a RGBA umožňují přesné ovládání barev, což usnadňuje výběr přesných odstínů a vytváření vizuálně atraktivních návrhů. Jsou kompatibilní s různými webovými prohlížeči a zajišťují konzistentní vzhled vámi vybraných barev.

Nevýhody: Výzva spočívá v zajištění dostupných barevných kombinací. Je důležité věnovat pozornost kontrastním poměrům, zejména při práci s průhledností v RGBA. Pomoci mohou pokyny WCAG zajistíte, aby byl váš návrh přístupný.

4. Hodnoty barev HSL a HSLA

HSL – zkratka pro Hue, Saturation a Lightness – je další CSS funkce, která definuje barvy. Podobně jako RGB i HSL používá k reprezentaci barev číselné hodnoty, ale dělá to jinak. Možná jste obeznámeni s Hodnoty HSL z komponent uživatelského rozhraní v aplikacích pro návrh a jinde.

Odstín: Představuje samotnou barvu pomocí stupňů na barevném kole v rozsahu od 0 do 360. Představte si to jako výběr bodu na kružnici, kde každý stupeň odpovídá jiné barvě. Například 0 a 360 stupňů pro červenou, 120 stupňů pro zelenou a 240 stupňů pro modrou.

Nasycení: Sytost určuje živost nebo intenzitu barvy. Definuje vztah barvy k šedé, přičemž 0 % je zcela ve stupních šedi (desaturovaná) a 100 % je plně sytá (živá a čistá).

Světlost: Světlost představuje, jak jasná nebo tmavá barva vypadá. Souvisí to s pozicí barvy ve spektru mezi černou (0 %) a bílou (100 %). Hodnota 50 % představuje normální barvu, zatímco hodnoty pod 50 % barvu ztmavují a hodnoty nad 50 % ji zesvětlují.

Kromě HSL existuje HSLA, kde „A“ znamená „alfa“. To je podobné „A“ v RGBA a znamená průhlednost.

Zde je syntaxe:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Pomocí této syntaxe nahraďte hue_value, saturace_procento, a světlost_procenta s konkrétními hodnotami, které chcete pro každou komponentu. Například:

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

V tomto příkladu je barva pozadí a div prvek je nastaven na zářivě zelenou pomocí hodnot HSL. 120 představuje odstín (zelený), 100 % znamená plnou sytost a 50 % nastavuje světlost na vyváženou úroveň.

Klady: HSL a HSLA nabízejí všestranné výpočty barev pomocí vlastních vlastností CSS. Jsou vysoce kompatibilní s moderními prohlížeči a umožňují snadné úpravy světlosti barev.

Nevýhody: Učení HSL zahrnuje pochopení vědy o barvách, jako jsou odstíny a sytosti, které mohou být náročnější než známé RGB barvy.

Přijetí síly barev CSS

Existuje více metod, které můžete zkontrolovat, a zatímco budete prozkoumávat různé formáty pro definování barev v CSS mějte na paměti, že máte moc utvářet vzhled, náladu a uživatelskou zkušenost svého webu.

Váš výběr barevného formátu – ať už jde o jednoduché názvy barev, hexadecimální kódy, RGB nebo HSL – může ovlivnit, jak vaše stránky vnímá vaše publikum. Takže experimentujte, učte se a najděte definice barev, které nejlépe vyhovují vašim návrhovým cílům.