Čísla webových barev: RGB a HEXA kódy

Když se bavíme o barvách na webu, nemluvíme o „červené“ nebo „modré“ jako v malířství. Počítače potřebují přesná čísla. Proto se používají barevné kódy – nejčastěji RGB a HEX. Díky nim má každá barva jasnou podobu a všude se zobrazí stejně. RGB a HEX pak můžete používat třeba na svém webu pro barvy textů, barvu menu, pozadí a dalších prvků.

Rozdíl mezi RGB a HEX

RGB a HEX jsou dva různé způsoby, jak zapsat stejnou barvu. Liší se jen zápisem, ne významem.

Co znamená RGB

RGB je zkratka pro Red, Green, Blue – červená, zelená, modrá. Tyto tři barvy se míchají v různém poměru.

K čemu je RGB

hodí se hlavně když:

• pracujete s průhledností
• ladíte barvu “ručně” podle čísel
• programujete, počítáte s barvami, měníte je dynamicky

RGB popisuje barvu pomocí tří čísel:

• R = red (červená)
• G = green (zelená)
• B = blue (modrá)

Každá složka má hodnotu 0–255.

Příklad:

rgb(255, 0, 0)
= hodně červené, žádná zelená, žádná modrá > červená.

To znamená 255 červené, 0 zelené, 0 modré – tedy čistá červená.

• 0 = žádná barva
• 255 = maximum barvy

Příklady:

• Bílá: rgb(255, 255, 255)
• Černá: rgb(0, 0, 0)
• Šedá: rgb(128, 128, 128)
• Modrá: rgb(0, 0, 255)
• Zelená: rgb(0, 255, 0)

Co je HEX kód

HEX kód je jiný zápis té samé barvy v šestnáctkové soustavě. Používá se hlavně v CSS.

HEX se hodí hlavně když:

• píšete CSS a chcete krátký zápis
• kopírujete barvy z grafických programů
• děláte design a ukládáte si paletu barev

Příklad:

#FF0000
= úplně stejná červená jako rgb(255,0,0).

To je opět červená barva.

• 1.–2. znak = červená
• 3.–4. znak = zelená
• 5.–6. znak = modrá

Převody:

• rgb(255,0,0) = #FF0000
• rgb(0,255,0) = #00FF00
• rgb(0,0,255) = #0000FF
• rgb(255,255,255) = #FFFFFF
• rgb(0,0,0) = #000000

Zkrácený HEX zápis

• #FFFFFF → #FFF
• #000000 → #000
• #FF0000 → #F00
• #00FF00 → #0F0
• #0000FF → #00F

Průhlednost: RGBA a HEX

rgba(255, 0, 0, 0.5)

Poslední číslo určuje průhlednost (0 = průhledné, 1 = neprůhledné).

HEX s průhledností:

#FF000080

Poslední dvě čísla určují průhlednost (00 = průhledné, FF = neprůhledné).

Proč jsou barevné kódy důležité

• barvy se zobrazují všude stejně
• design lze přesně opakovat
• všichni mluví „stejnou řečí“
• barvu lze snadno uložit a znovu použít

Místo „dejte tam světle modrou“ řeknete: použijte barvu #4DA3FF.

Shrnutí

• RGB = čísla pro červenou, zelenou a modrou
• HEX = stejná barva, jiný zápis
• Každá barva je kombinace čísel
• Díky nim je design přesný a opakovatelný