HEX, RGB, HSL: Pochopení webových barevných kódů

Upravujete web a vidíte #FF5733 v CSS. Nebo pracujete s designérem, který vám pošle rgb(255, 87, 51). Nebo designový nástroj zobrazí barvu jako hsl(11, 100%, 60%). Všechny popisují přesně tu samou barvu — živou červenooranžovou — ale ve třech různých formátech.

Pokud vás webové barevné kódy kdy mátly, tento průvodce vám vše objasní za pět minut.

Jak fungují digitální barvy

Každá barva na vašem monitoru vzniká míšením tří základních barev světla: červené, zelené a modré. To je barevný model RGB. Různou intenzitou každého kanálu od nuly (vypnuto) po maximum (plný jas) lze vytvořit kteroukoliv z přibližně 16,7 milionů barev, které standardní displej zobrazí.

• Červená 255, Zelená 0, Modrá 0 = čistá červená
• Červená 0, Zelená 255, Modrá 0 = čistá zelená
• Červená 0, Zelená 0, Modrá 255 = čistá modrá
• Červená 255, Zelená 255, Modrá 255 = bílá (všechny kanály naplno)
• Červená 0, Zelená 0, Modrá 0 = černá (všechny kanály vypnuty)
• Červená 255, Zelená 255, Modrá 0 = žlutá (červená + zelená)

Každý barevný formát používaný na webu je jen jiný způsob vyjádření těchto hodnot kanálů.

Barvy HEX

Jak vypadají

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Jak fungují

Barevný kód HEX je šestiznaková šňůra znaků předcházená mřížkou. Šest znaků je rozděleno do tří dvojic, z nichž každá v šestnáctkové soustavě (základ 16) reprezentuje barevný kanál:

Šestnáctková soustava používá číslice 0–9 a písmena A–F, kde A=10, B=11, C=12, D=13, E=14, F=15. Takže FF v šestnáctkové soustavě se rovná 255 v desítkové (15 × 16 + 15 = 255).

Rozbor #FF5733:

• FF = Červená na 255 (maximum)
• 57 = Zelená na 87
• 33 = Modrá na 51

Vzniká živá červenooranžová barva.

Zkrácený zápis

Pokud má každá dvojice dva identické znaky, lze použít tříznakový zkrácený zápis:

• #FF0000 lze napsat jako #F00
• #3366FF lze napsat jako #36F
• #000000 lze napsat jako #000

Barvy RGB

Jak vypadají

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Jak fungují

Zápis RGB přímo uvádí hodnoty kanálů červené, zelené a modré jako desetinná čísla od 0 do 255. Jde o nejintuitivnější formát, protože čísla přímo odpovídají intenzitě každého světelného kanálu.

rgb(255, 87, 51) znamená:

• Červená: 255 (maximum)
• Zelená: 87 (přibližně třetina)
• Modrá: 51 (přibližně pětina)

RGBA: Přidání průhlednosti

RGBA přidává čtvrtou hodnotu pro neprůhlednost (alfa), v rozsahu od 0 (plně průhledná) do 1 (plně neprůhledná):

rgba(255, 87, 51, 0.5)   /* 50% průhledná */
rgba(0, 0, 0, 0.8)        /* 80% neprůhledná černá */

To je užitečné pro překryvy, stíny a jakýkoli designový prvek, který potřebuje zobrazovat obsah za sebou.

Barvy HSL

Jak vypadají

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Jak fungují

HSL znamená Odstín (Hue), Sytost (Saturation), Světlost (Lightness). Místo přemýšlení v pojmech míchání kanálů červené/zelené/modré popisuje HSL barvu tak, jak o ní přirozeně přemýšlejí lidé.

Odstín je samotná barva, vyjádřená jako stupeň na barevném kole (0–360):

• 0° / 360° = Červená
• 60° = Žlutá
• 120° = Zelená
• 180° = Azurová
• 240° = Modrá
• 300° = Purpurová

Sytost je intenzita barvy, od 0 % (šedá) do 100 % (plně sytá).

Světlost je světlost nebo tmavost barvy, od 0 % (černá) do 100 % (bílá). 50 % je „normální" světlost.

hsl(11, 100%, 60%) znamená:

• Odstín: 11° (mírně oranžová červená)
• Sytost: 100 % (plně živá)
• Světlost: 60 % (mírně světlejší než normální)

HSLA: Přidání průhlednosti

Stejně jako RGBA, HSLA přidává alfa kanál:

hsla(11, 100%, 60%, 0.5)   /* 50% průhledná */

Kdy použít který formát

Pro webový vývoj

HEX je de facto standard. Většina CSS je psána s kódy HEX, protože jsou kompaktní a každý vývojář je rozpozná.

Pro designové systémy

HSL je ideální pro vytváření konzistentních barevných palet. Pro vytváření světlejších a tmavších variant firemní barvy jednoduše upravíte hodnotu světlosti:

• Primární: hsl(210, 80%, 50%)
• Světlá varianta: hsl(210, 80%, 70%)
• Tmavá varianta: hsl(210, 80%, 30%)

Odstín a sytost zůstávají stejné, čímž je zaručeno, že varianty jsou stejnou „barvou" při různých úrovních jasu.

Pro průhlednost

Používejte RGBA nebo HSLA, pokud potřebujete poloprůhledné barvy pro překryvy, stíny nebo skleněné efekty.

Konverze mezi formáty

Budete potřebovat konvertovat mezi formáty. Designér pošle hodnoty HSL, ale váš kód používá HEX. Firemní příručka určuje RGB, ale vy potřebujete HSL pro tvorbu variant.

Matematika je přímočará, ale ručně zdlouhavá. Konverzní nástroj to zvládne okamžitě.

Začněte pracovat s barvami:

• Konvertovat barevné kódy
• Nástroj pro konverzi barev
• Generátor barevných palet

Všechny nástroje jsou zdarma a fungují přímo v prohlížeči.