Pamatujete si ještě na první webové stránky z devadesátek? Ty zářivě žluté texty na modrém pozadí, které člověku málem vypálily díru do monitoru? No, naštěstí už jsme o pěkný kus dál. HTML barvy jsou dnes mnohem sofistikovanější a jejich správné použití je základem každého moderního webu.
Když se řekne „pojmenované barvy v HTML“, většina vývojářů si vybaví základní paletu. Ale věděli jste, že standardních pojmenovaných barev je ve skutečnosti přes 140? To už je slušná paleta na hraní!
Základní barvy HTML
Začněme od základů. V HTML máme 16 základních barev, které jsou tak nějak „svaté“:
| Název barvy | Ukázka | HTML/CSS kód | Hexadecimální |
|---|---|---|---|
| Černá (Black) | black | #000000 | |
| Stříbrná (Silver) | silver | #C0C0C0 | |
| Šedá (Gray) | gray | #808080 | |
| Bílá (White) | white | #FFFFFF | |
| Kaštanová (Maroon) | maroon | #800000 | |
| Červená (Red) | red | #FF0000 | |
| Purpurová (Purple) | purple | #800080 | |
| Zelená (Green) | green | #008000 | |
| Limetková (Lime) | lime | #00FF00 | |
| Olivová (Olive) | olive | #808000 | |
| Žlutá (Yellow) | yellow | #FFFF00 | |
| Námořnická (Navy) | navy | #000080 | |
| Modrá (Blue) | blue | #0000FF | |
| Modrozelená (Teal) | teal | #008080 | |
| Akvamarínová (Aqua) | aqua | #00FFFF | |
| Fuchsiová (Fuchsia) | fuchsia | #FF00FF |
Tyto barvy jsou podporované úplně všude – dokonce i na tom prastarém Internet Exploreru, který možná ještě někde běží na nějakém zapomenutém počítači na úřadě.
Praktické použití
Pojmenované barvy v HTML jsou jako stavební kostky – jednoduché, spolehlivé a praktické. Místo psaní hexadecimálního kódu #FF0000 můžete prostě napsat „red“. To se hodí hlavně při:
- Rychlém prototypování
- Výuce začátečníků
- Základním stylování
- Testování layoutu
Navíc je to mnohem čitelnější. Porovnejte sami:
css/* Tahle varianta je přehlednější */
background-color: dodgerblue;
/* Než tenhle zápis */
background-color: #1E90FF;
Tipy pro praxi
- Nepoužívejte pojmenované barvy v produkčním prostředí velkých projektů
- Pro konzistenci používejte CSS proměnné
- Myslete na přístupnost – některé kombinace barev mohou být pro část uživatelů nečitelné
- Dokumentujte své barevné schéma
Červené odstíny
Červená není jen jedna. Máme tu třeba:
| Název barvy | Ukázka | HTML/CSS kód | Hexadecimální |
|---|---|---|---|
| Červená (Red) | red | #FF0000 | |
| Světle červená (Lightred) | lightred | #FFB6B6 | |
| Tmavě červená (Darkred) | darkred | #8B0000 | |
| Indická červená (Indianred) | indianred | #CD5C5C | |
| Lososová (Salmon) | salmon | #FA8072 | |
| Světle lososová (Lightsalmon) | lightsalmon | #FFA07A | |
| Korálová (Coral) | coral | #FF7F50 | |
| Rajčatová (Tomato) | tomato | #FF6347 | |
| Červená jako krev (Crimson) | crimson | #DC143C | |
| Ohnivá červená (Firebrick) | firebrick | #B22222 |
Modré odstíny
Tady to začíná být opravdu zajímavé:
| Název barvy | Ukázka | HTML/CSS kód | Hexadecimální |
|---|---|---|---|
| Modrá (Blue) | blue | #0000FF | |
| Námořnická modrá (Navy) | navy | #000080 | |
| Tmavě modrá (Darkblue) | darkblue | #00008B | |
| Středně modrá (Mediumblue) | mediumblue | #0000CD | |
| Královská modrá (Royalblue) | royalblue | #4169E1 | |
| Ocelově modrá (Steelblue) | steelblue | #4682B4 | |
| Nebesky modrá (Skyblue) | skyblue | #87CEEB | |
| Světle modrá (Lightblue) | lightblue | #ADD8E6 | |
| Chrpově modrá (Cornflowerblue) | cornflowerblue | #6495ED | |
| Blankytně modrá (Azure) | azure | #F0FFFF | |
| Světle ocelová (Lightsteelblue) | lightsteelblue | #B0C4DE | |
| Práškově modrá (Powderblue) | powderblue | #B0E0E6 | |
| Kadetsky modrá (Cadetblue) | cadetblue | #5F9EA0 | |
| Hluboká nebeská modrá (Deepskyblue) | deepskyblue | #00BFFF | |
| Dodgerova modrá (Dodgerblue) | dodgerblue | #1E90FF |
Zelené odstíny
Zelená je každá jiná:
| Název barvy | Ukázka | HTML/CSS kód | Hexadecimální |
|---|---|---|---|
| Zelená (Green) | green | #008000 | |
| Limetková (Lime) | lime | #00FF00 | |
| Lesní zelená (Forestgreen) | forestgreen | #228B22 | |
| Tmavě zelená (Darkgreen) | darkgreen | #006400 | |
| Mořská zelená (Seagreen) | seagreen | #2E8B57 | |
| Středně mořská zelená (Mediumseagreen) | mediumseagreen | #3CB371 | |
| Světle mořská zelená (Lightseagreen) | lightseagreen | #20B2AA | |
| Jarní zelená (Springgreen) | springgreen | #00FF7F | |
| Středně jarní zelená (Mediumspringgreen) | mediumspringgreen | #00FA9A | |
| Olivová (Olive) | olive | #808000 | |
| Tmavá olivová (Darkolivegreen) | darkolivegreen | #556B2F | |
| Olivově zelená (Olivedrab) | olivedrab | #6B8E23 | |
| Světle zelená (Lightgreen) | lightgreen | #90EE90 | |
| Bledě zelená (Palegreen) | palegreen | #98FB98 | |
| Zelenkavá (Yellowgreen) | yellowgreen | #9ACD32 |
Způsoby zápisu barev
V HTML a CSS můžeme barvy zapsat několika způsoby. Je to jako mít několik různých jazyků pro popsání stejné věci:
Hexadecimální zápis
csscolor: #FF5733;
Tohle je jako RČ pro barvy – každá má své unikátní číslo.
RGB zápis
csscolor: rgb(255, 87, 51);
Tady už to začíná připomínat hodiny fyziky – mícháme červenou, zelenou a modrou.
RGBA
csscolor: rgba(255, 87, 51, 0.5);
To samé jako RGB, jen s průhledností. Hodí se, když chcete, aby něco vypadalo jako po třetím pivu.
Praktické použití
Při práci s barvami je důležité myslet na:
Kontrast
Nikdo nechce luštit světle šedý text na bílém pozadí. To je horší než číst podmínky používání.
Konzistenci
Váš web by neměl vypadat jako velikonoční kraslice (pokud to není záměr).
Přístupnost
Barvoslepí uživatelé tvoří asi 8% mužské populace. To je víc lidí než používá Internet Explorer!
Pro vývojáře a designéry
Tady je pár užitečných tipů:
css/* Používejte CSS proměnné pro konzistenci */
:root {
--primary-color: dodgerblue;
--secondary-color: tomato;
--text-color: #333;
}
/* Pak je můžete jednoduše použít */
.button {
background-color: var(--primary-color);
color: white;
}
Nástroje pro práci s HTML barvami
Vybrat správnou barvu je někdy těžší než najít volné parkovací místo v centru Prahy. Naštěstí máme spoustu užitečných nástrojů:
Color Pickery
- ColorPick Eyedropper – Jako kouzelná hůlka pro barvy. Ukážete na cokoliv na obrazovce a máte kód barvy.
- Adobe Color – Pro ty, kdo chtějí být za profíka.
- Coolors.co – Generuje barevné palety rychleji než Pendolino jede z Prahy do Ostravy.
Generátory palet
css/* Příklad barevné palety pro moderní web */
:root {
--primary: #2b6cb0; /* Hlavní barva */
--secondary: #718096; /* Doplňková */
--accent: #f56565; /* Zvýrazňující */
--background: #f7fafc; /* Pozadí */
}
Optimalizace barev pro web
Responsivní design a barvy
Někdy musíte myslet i na to, jak budou barvy vypadat na různých zařízeních. Co vypadá skvěle na velkém monitoru může být na mobilu jako psychedelický experiment.
css/* Příklad adaptivních barev */
@media (prefers-color-scheme: dark) {
:root {
--text-color: #ffffff;
--background: #1a202c;
}
}
Přístupnost
Kontrast je král. Musí být minimálně 4,5:1 pro běžný text. To není jen nějaké náhodné číslo – je to jako s alkoholem za volantem, tyhle limity mají svůj důvod.
Často Kladené Otázky
Kolik vlastně existuje pojmenovaných HTML barev?
Celkem 147 oficiálních pojmenovaných barev. To je víc než druhů piv v průměrné české hospodě! A stejně jako v hospodě, i tady platí, že znát všechny názvy není nutné – stačí vědět, které jsou pro vás nejlepší.
Proč se barvy zobrazují na každém zařízení jinak?
To je jako s fotkami jídla na Rohlík.cz – realita je vždycky trochu jiná. Každý displej má vlastní způsob zobrazování barev. Kalibrace monitorů, různé technologie displejů a dokonce i okolní světlo – to všechno hraje roli.
Je lepší používat pojmenované barvy nebo hexadecimální kódy?
Pro produkční prostředí se doporučuje používat CSS proměnné s hexadecimálními kódy nebo RGB hodnotami. Pojmenované barvy jsou skvělé pro prototypování a vývoj, ale mohou být méně flexibilní pro komplexní barevné systémy.
Závěr
Svět HTML barev se neustále vyvíjí a v roce 2025 máme k dispozici více možností než kdy předtím. Od základních pojmenovaných barev jsme se dostali k pokročilým AI-generovaným paletám a adaptivním barevným schématům. Nejdůležitější je pamatovat, že správné použití barev není jen o estetice – je to o vytvoření přístupného, funkčního a příjemného webu pro všechny uživatele.
Ať už vytváříte nový e-shop, firemní prezentaci nebo osobní blog, znalost práce s HTML barvami je základním kamenem moderního webdesignu. Investujte čas do pochopení barevných systémů a vašim projektům to vrátí stonásobně.
