Základy CSS

Barvy

Barvu textu nastavuje color, barvu pozadí background-color. Hodnotu jde zapsat několika způsoby.

Projdeme názvy, hex, rgb, hsl a průhlednost. V náhledu vidíte, kam se dostaneme.

Zápis · 1

Názvem

CSS zná přes 140 barev podle anglického názvu. Na rychlé zkoušení jsou ideální.

Přesný odstín z grafického návrhu ale názvem nezapíšete. K tomu jsou další způsoby.

Zápis · 2

Šestnáctkově: hex

Nejčastější zápis. Za mřížkou následují tři dvojice znaků: kolik je v barvě červené, zelené a modré. Každá dvojice jde od 00 (nic) po ff (naplno).

#d40000: hodně červené, žádná zelená ani modrá. To je Ferrari červená. Když jsou ve dvojicích stejné znaky, jde zápis zkrátit: #ffffff je #fff.

Zápis · 3

Desítkově: `rgb()`

Totéž co hex, jen v běžných číslech od 0 do 255. Zapíšeme naši druhou barvu, břidlicovou.

rgb(62 92 110) je stejná barva jako #3e5c6e. Ve starších návodech najdete zápis s čárkami rgb(62, 92, 110), funguje taky.

Zápis · 4

Po lidsku: `hsl()`

Tři čísla, kterým rozumí i člověk: odstín jako úhel na barevném kole (0 je červená, 120 zelená, 240 modrá), sytost a světlost v procentech.

Když měníme jen světlost, dostaneme řadu odstínů jedné barvy.

S hsl si snadno připravíte světlejší a tmavší verzi barvy, třeba pro pozadí a pro hover.

Průhlednost

Čtvrté číslo za lomítkem

Za lomítko v rgb() nebo hsl() napíšeme průhlednost: 1 je plná barva, 0 úplně průhledná. Popisek přes fotku má poloprůhledné černé pozadí, takže fotka prosvítá a text je čitelný.

Průhlednost jde připsat i do hexu jako čtvrtou dvojici: #0000008c. Čte se to ale hůř.

Čitelnost

Kontrast textu a pozadí

Světle šedý text na bílé vypadá elegantně, ale špatně se čte, hlavně na slunci nebo pro hůře vidící. Text musí být od pozadí dost odlišný.

Pravidlo: kontrast aspoň 4,5 : 1. Změřit ho umí DevTools prohlížeče, stačí v nich kliknout na barvu textu.

Shrnutí

Jak psát barvy

Ano

color pro text, background-color pro pozadí
hex nebo rgb() pro přesné barvy z návrhu
hsl() pro světlejší a tmavší odstíny
průhlednost za lomítkem: rgb(0 0 0 / 0.5)

Ne

slabý kontrast textu a pozadí
deset různých barev na jedné stránce

Barvy, které se na webu opakují, si uložte do proměnných. Pak je změníte na jednom místě. Víc v lekci o proměnných.

Další: Box model →