#1 Základ
Prvkům lze přiřadit dvě vlastnosti, které se týkají přímo barev – vlastnost color, která udává barvu textu, a vlastnost background-color, která udává barvu pozadí prvku.
Vedle toho, se v spolu s barvami pojí formáty, pomocí kterých lze barvy do CSS kódu vložit. V počátcích kódování se často používají pouze názvy základních barev, ale ve většině webů naleznete formáty RGB, HEX a HSL.
#2 CSS vlasnosti
Barva textu
Barva textu se definuje CSS vlastností color, která je doslovným anglickým překladem „barva“. V tomto příkladu se nachází definice pro prvek <p>, aby byl jeho text psán červenou barvou.
p {
color: red;
}
Barva pozadí
Podobnou vlastností je vlastnost background-color, která nedefinuje barvu textu, ale barvu pozadí. Funguje totožně jako vlastnost color.
div {
background-color: blue;
}
V tomto příkladu je prvku <div> definováno modré pozadí.
#3 Formáty barev
Barvy se kromě jejich relativních jmen většinou udávají skrze nějakou formu hodnoty. Nejčastěji se jedná o hodnotu RGB, HEX nebo HSL. Kromě barvení, lze nastavovat také průhlednost dané barvy.
RGB
RGB, neboli Red Green Blue, je jeden z nejpoužívanějších formátů nejen pro webové stránky. Spočívá v udávání množství červené, zelené a modré barvy, s jejichž pomocí lze vytvořit miliony barev. V CSS se zapisují do funkce rgb().
.barva {
color: rgb(154, 177, 0);
}
Variantou RGB je RGBA, která definuje nejen barvu, ale také průhlednost dané barvy. Ve funkci rgba() se průhlednost dává na poslední místo a je reprezentována hodnotami 0–1, kde 0 je 100% průhledná barva (tedy, nezobrazuje se) a 1 je nulová průhlednost.
.barva {
color: rgba(154, 177, 0, .5);
}
HEX
Dalším velmi populárním formátem je HEX, který staví na šestnáctkové (hexadecimální) soustavě. Pořadí barev je totožné s RGB, ale ve formátu HEX má každá hodnota 2 znaky (0–9 nebo A–F). Každý HEX kód začíná znakem #.
Podobně jako u RGB, existuje i pro HEX varianta, která ovládá i průhlednost barvy – a to přidáním dvou znaků na konci (00 je 100% průhlednost a FF je nulová průhlednost).
.barva {
color: #9AB100; /* Základní formát */
}
.barva {
color: #9AB100AA; /* Formát s průhledností */
}
HSL
Méně používaný formát je HSL, Hue Saturation Lightness, který nedefinuje barvy pouze podle modelu RGB, ale podle jejich odstínu, sytosti a světlosti.
Odstín má hodnoty od 0 do 360, přičemž hlavními body jsou – červená (0), zelená (120) a modrá (240). Saturace, neboli sytost, je procentuální hodnota, která definuje barevnost na šedé škále – 0 % je odstín šedé a 100 % je plná barva. Světlost je taktéž procentuální hodnota, kde 0 % je černá, 50 % je plná barva a 100 % je čistá bílá.
Stejně jako RGB a HEX, má i HSL průhlednost. Přidává se totožně jako pro RGBA.
.barva {
color: hsl(67.797, 100%, 35%); /* Základní formát */
}
.barva {
color: hsl(67.797, 100%, 35%, .5); /* Formát s průhledností */
}