Největší seznam všech pojmenovaných barev v HTML

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.

Read more about: `ai nastoje zdarma`.

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é“:

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

1. Nepoužívejte pojmenované barvy v produkčním prostředí velkých projektů
2. Pro konzistenci používejte CSS proměnné
3. Myslete na přístupnost – některé kombinace barev mohou být pro část uživatelů nečitelné
4. Dokumentujte své barevné schéma

Červené odstíny

Červená není jen jedna. Máme tu třeba:

Modré odstíny

Tady to začíná být opravdu zajímavé:

Zelené odstíny

Zelená je každá jiná:

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

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ě.