Barvy
Stránka Barvy ukazuje paletu značky se všemi hodnotami (HEX, RGB, CMYK, Pantone, RAL, NCS i 3M), které si návštěvník zkopíruje nebo stáhne pro grafické nástroje i pro kód. Přidat k ní můžete i kontrolu kontrastu, ve které každý ověří čitelnost barevných kombinací.
Co bude hotové
Na stránce Barvy budou vzorníky s hodnotami, které se zkopírují jedním kliknutím, tlačítko pro export do ASE, CSS, Figmy a dalších formátů a pod vzorníky kontrola kontrastu.
Postup
Přidejte sekci Vzorník barev
V panelu otevřete stránku typu Barvy. V části Sekce na této stránce klikněte na Přidat novou sekci, zadejte název (například „Hlavní barvy“) a v kategorii Barvy vyberte Vzorník barev.
Zadejte barvy
Do pole Seznam hlavních vzorníků přidejte postupně všechny barvy. Povinné jsou Název barvy a HEX kód, hodnota RGB se z HEX dopočítá sama. Dále vyplňte formáty, které značka používá: CMYK hodnoty, Pantone C, Pantone U, RAL kód, NCS kód, 3M kód.
Zvolte velikost a doplňte text
V poli Velikost vzorníku vyberte Malý, Střední nebo Velký. Do pole Popisek pod nadpisem této sekce napište, k čemu barvy slouží. Důležitou výjimku zvýrazněte v poli Info box (Poznámka, Tip, Upozornění).
Přidejte kontrolu kontrastu
Na stejné stránce přidejte další sekci a v kategorii Barvy vyberte Kontrola kontrastu. Nic dalšího nevyplňujete – obsah se vytvoří automaticky z barev ve vzornících a paletách na této stránce.
Zveřejněte sekce
Uložte změny a přepněte sekce do stavu Aktivní. Sekce ve stavu Koncept se na stránce nezobrazí a kontrola kontrastu její barvy nenabídne.
Jak poznáte, že je hotovo
Otevřete stránku Barvy v manuálu. Vzorníky mají záložky s formáty. Kliknutím na hodnotu ji zkopírujete (zobrazí se Zkopírováno!), ikona stažení nabídne exporty a v kontrole kontrastu můžete vybírat barvy z této stránky.
Formáty barev a jejich zápis
| Formát | Pole | Příklad zápisu |
|---|---|---|
| HEX | HEX kód (povinné) | #E30613 |
| RGB | dopočítá se z HEX | rgb(227, 6, 19) |
| CMYK | CMYK hodnoty | 0-89-75-0 |
| Pantone C / U | Pantone C, Pantone U | 485 C, 485 U |
| RAL | RAL kód | 3028 |
| NCS | NCS kód | S 1085-Y80R |
| 3M | 3M kód | 3630-33 |
V manuálu má vzorník záložku pro každý formát, který je vyplněný aspoň u jedné barvy. Prázdné formáty se nezobrazí.
Kterou barevnou sekci kdy použít
| Sekce | Kdy ji použít |
|---|---|
| Vzorník barev | Hlavní barvy značky ve velkých vzorcích s hodnotami ke kopírování a exportem. |
| Paleta barev | Více pojmenovaných sad barev vedle sebe, například „Doplňkové barvy“ a „Barvy grafů“. Velikost Kompaktní nebo Široká, stejné formáty i exporty jako u vzorníku. |
| Barevné přechody | Předepsaný barevný přechod ze dvou nebo tří barev. Hodnoty lze zkopírovat. |
| Poměry barev | Jaký podíl má mít každá barva v materiálech, v procentech. Jeden univerzální poměr barev, nebo Poměry pro světlé a tmavé režimy. |
| Kontrola kontrastu | Ověření čitelnosti dvojic barev z této stránky. |
Stejné šedé barvy demo manuálu ve čtyřech sekcích.
Export barev
Vzorník i paleta mají ikonu stažení, přes kterou si návštěvník vybere:
- RGB a CMYK jako
.ase– knihovna barev pro aplikace Adobe (CMYK jen tehdy, když jsou hodnoty vyplněné), - Figma – Design Tokens (
.json), CSS Variables (.css), SCSS Variables (.scss), Tailwind Config (.js), - PDF export (
.pdf) s přehledem barev, - Všechny formáty najednou jako
.zip.
Kontrola kontrastu
Návštěvník vybere Barvu textu a Barvu pozadí kliknutím na barevný čtvereček u pole. Nabídka Vybrat z barev na stránce ukáže barvy ze vzorníků a palet seskupené podle sekcí, Vlastní barva otevře výběr libovolné barvy a Vrátit původní obnoví výchozí stav (text v barvě nadpisů manuálu, bílé pozadí). HEX kód lze napsat i přímo do pole.
Výsledný kontrast se zobrazí jako poměr (například 4.58) a pod ním hodnocení podle standardu přístupnosti WCAG:
| Řádek | AAA | AA |
|---|---|---|
| Malý text – méně než 18 pt, tučné písmo méně než 14 pt | od 7 : 1 | od 4,5 : 1 |
| Velký text – aspoň 18 pt, tučné písmo aspoň 14 pt | od 4,5 : 1 | od 3 : 1 |
| UI komponenty – grafické objekty a ovládací prvky | – | od 3 : 1 |
Pokud kontrast nesplní ani úroveň AA, zobrazí se „Fail“. Odkazy pod výsledkem otevřou stejnou kombinaci barev v nástrojích color.review nebo coolors.co.
Barvy značky v rychlém výběru
V každém barevném poli v panelu (HEX ve vzorníku, pozadí loga, barvy karet) nabízí Visualbook rychlý výběr z palety Vaše brandové barvy. Ty se nastavují v Design → Barvy a se stránkou Barvy nejsou automaticky propojené: změna hodnoty ve vzorníku nezmění design manuálu a naopak. Podrobnosti viz Design manuálu vs. stránka Barvy.