Divi opět posouvá hranice možností – tentokrát v oblasti správy barev. Nová verze přináší podporu relativních barev a plně přepracovaný výběr barev, čímž se Divi šablona stává jedním z nejpokročilejších nástrojů pro práci s barvami na webu.
Díky podpoře HSL (Hue, Saturation, Lightness) je nyní možné vytvářet promyšlené a matematicky vyvážené barevné systémy založené na proměnných. Tato změna zásadně zjednodušuje správu barev na celém webu a přináší zcela nový přístup k designu.
V následujícím videu se můžete podívat, jak nová funkce funguje v praxi. 👇
Revoluce ve správě barev s Divi 5
Pojďme rovnou k jádru věci – ve videu níže uvidíte v praxi, jak funguje nový systém relativních barev v Divi 5. Všechny barvy na webu jsou definovány pomocí proměnných, což umožňuje naprostou kontrolu nad celkovou barevnou paletou.
Jako výchozí barva systému je použita modrá. Ostatní barvy se od ní odvozují pomocí posunu odstínu (Hue), sytosti (Saturation), jasu (Lightness) a průhlednosti (Opacity) prostřednictvím HSL zápisu. Jakmile upravíte hlavní barvu, automaticky se přizpůsobí i všechny ostatní – a zachovají si přitom své vzájemné vztahy i vizuální rovnováhu napříč celým webem.
Vztahy mezi barevnými proměnnými
Pojďme se teď podrobněji podívat na barevné proměnné použité ve videu. Ukázaný systém je jednoduchý, ale dobře ilustruje princip relativního nastavení.
Každá barva v tomto příkladu je odvozena od hlavní – primární barvy. Ostatní barvy vznikají úpravou jejích vlastností (např. posunem odstínu nebo změnou sytosti), což vytváří provázanou barevnou strukturu. Díky tomu můžete snadno udržet vizuální konzistenci napříč celým designem.
V ukázkovém barevném systému z předchozího videa jsou všechny barvy odvozeny od jediné – primární barvy. Tady je několik příkladů, jak s ní Divi 5 pracuje:
- Sekundární barva – Vznikla posunem odstínu primární barvy tak, aby vytvořila komplementární (doplňkový) tón. Skvěle se hodí jako zvýrazňující barva.
- Tmavě modrá – Tato barva je primární barvou s upravenou světelností, sníženou o 40 %, což z ní dělá vhodný tón pro kontrastní prvky.
- Světle šedá – Vychází také z primární barvy, ale má sníženou světelnost i průhlednost. Výsledkem je jemná šedá, ideální pro pozadí nebo méně výrazné detaily.
- Černá – Není to obyčejná černá – je to primární barva s výrazně sníženou světelností a sytostí. Výsledkem je „živější“ odstín než běžná plochá šedá.
- Stín – Barva pro stíny je odvozena z výše uvedené „černé“ proměnné, ale s nižší průhledností. Tento příklad ukazuje, jak lze v Divi 5 vytvářet vícestupňové barevné vztahy, které spolu přirozeně fungují.
Díky systému designových proměnných v Divi 5 je práce s barvami rychlá a efektivní. Nový systém relativních barev posouvá možnosti ještě dál – umožňuje vytvářet konzistentní, flexibilní a vizuálně vyvážené palety, které se snadno spravují.
Pro designéry je to nástroj, který výrazně usnadní každodenní práci a zároveň otevře nové kreativní možnosti.
Zcela nové pole pro barvu v Divi 5
Barevné pole v Divi 5 prošlo kompletní modernizací, aby lépe zapadalo do systému designových proměnných a sjednotilo se s ostatními typy polí v editoru. Původní uživatelské rozhraní pro globální barvy nahradil známý symbol Dynamického obsahu, odkud lze snadno přistupovat k barevným proměnným nebo čerpat barvy z vlastních polí.
Nové pole je navíc výrazně informativnější. Vzhled barevného vzorku vám napoví, zda se jedná o proměnnou, jak je upravena pomocí HSL nebo průhlednosti a zda byla barva odvozena od jiné. Celý redesign uživatelského rozhraní se povedl na výbornou – přehlednost i funkčnost poskočily o úroveň výš.
Zcela přepracovaný výběr barvy
Výběr barvy v Divi 5 byl navržen zcela od základů – s cílem nabídnout co nejintuitivnější ovládání a maximální přesnost. Nové rozhraní umožňuje snadno pracovat s odstínem, sytostí, světelností i průhledností, a zároveň přidává podporu HSL filtrů pro ještě jemnější doladění barev.
Najdete zde také rychlý přístup ke všem barevným proměnným a možnost vytvářet nové relativní barvy přímo z existujících hodnot. Tento nástroj byl navržen s důrazem na perfektní uživatelský zážitek.
Závěr
Divi 5 přináší do tvorby webu nový standard práce s barvami. Díky HSL zápisu, relativním barvám, systému proměnných a přepracovanému barevnému výběru mají designéři i vývojáři k dispozici nástroje, které jim umožní tvořit efektivněji, konzistentněji a s větší kreativitou.
Tento přístup výrazně usnadňuje správu vzhledu webu i jeho budoucí úpravy. Divi tak opět potvrzuje, proč patří mezi nejoblíbenější vizuální editory současnosti.
Prohlédněte si i další novinky v Divi 5
- Divi 5: Vyhledávání a filtrování nastavení
- Divi 5: Správu atributů
- Divi 5: Skupiny modulů
- Divi 5: Přizpůsobitelné responzivní breakpointy
- Divi 5: Vnořené řádky
- Divi 5 (Public Alpha) k dispozici ke stažení
