Všechny návody

Zápisy barev v CSS

Barvy lze definovat šesti způsoby. Ukážeme si o jaké se jedná, rozebereme si co daná čísla (písmena) vyjadřují a kdy zvolit kterou variantu.

Možnosti

Barvu odrážky, textu či čehokoli jiného na webu lze definovat čtyřmi způsoby a to: názvem barvy, rgb, rgba, hsl, hsla zápisem nebo hexadecimálním kódem.

1. Název barvy

Nejjednodušším zapsáním barvy je použití názvu barvy například color: blue;. Tento zápis je vhodný, pokud pracujete pouze se základními barvami a nepotřebujete konkrétní odstíny.

2. RGB

RGB je zkratkou pro red (červená), green (zelená) a blue (modrá). Tento zápis tedy kombinuje tyto tři základní barvy. Zápis vypadá takto: rgb(číslo, číslo, číslo). Pokud bychom chtěli definovat například černou, napíšeme rgb(0, 0, 0), pro bílou rgb(255, 255, 255). Rozsah čísel je tedy od 0 do 255. Kombinací tří číselných hodnot pak docílíme jakékoliv barvy.

3. RGBA

Drobným, avšak nepřehlédnutelným vylepšením je RGBA. Tento zápis přidává možnost definovat opacity (průhlednost) objektu jako čtvrté číslo v závorce. Nejedná se však o opacity, ale o alfa kanál, což nám značí písmeno A. Příklad: rgba(0, 0, 0, 0.5), objekt bude mít černou barvu a 50% alfa kanál (průhlednost).

4. HSL

Dalším způsobem jak zpsat barvu je HSL. Znovu se jedná o zkratku, tentokrát představují písmena hue (odstín), saturation (nasycení) a lightness (lehkost). Zápis vypadá takto: hsl(hue, saturation, lightness), přičemž hue představuje barvu od 0, což je červená po 360. Saturation je procentuální hodnota šedosti barvy, 0% je šedá, 100% je barva. Lightless udává světlost barvy. 0% je černá, 100% je bílá.

5. HSLA

Stejně jako u rgb je i u hsl zápisu možnost nastavit alfa kanál a to pomocí hsla. Zápis pak vypadá takto: hsla(0, 100%, 50%, 0.6) a dostaneme červený objekt s 60% průhledností.

6. HEXADECIMAL

Hexadecimální zápis tzv. HEX se značí křížkem # a obsahuje kombinaci šesti číslic a písmen. Zápisem definujeme intenzitu barev, konkrétně intenzitu červené, zelené a modré. Stupnice intenzity je vyjádřena od nejnižší 00 po nejvyšší FF. Například #00FF00 bude barva zelená, jelikož je hodnota zeleného odstínu na maximu, zatímco ostatní jsou na minimu. Pokud bychom chtěli bílou barvu, zápis bude vypadat takto:#FFFFFF, pro černou takto: #000000.

Zde je ukázka všech šesti způsobů jak definovat danou barvu.

Vybrat barvu a odstín dle vaši libosti můžete zde.