Jednou z důležitých součástí práce webového designéra je vytvoření palety, výběr barev, které se vzájemně harmonicky kombinují. Tento proces je poměrně složitý a vyžaduje kreativní přístup. Existuje řada prostředků, které mohou práci s barvami značně usnadnit.
Nedávno jste možná narazili na podrobný článek o. O něco dříve jsem publikoval podobnou poznámku o nástrojích pro výběr s recenzí Kuler a ColorBlender. Dnes jsem se rozhodl téma rozšířit a poskytnout trochu více možností pro výběr barevných palet pro web.
ColorRotate
Nástroj ColoRotate vám umožní vybrat si nejvhodnější barevná schémata z velkého množství hotových návrhů nebo vytvořit vlastní. Výběrem barev na různých místech na otočné 3D paletě můžete získat kombinace založené na harmonii nebo kontrastu, pracovat s odstíny, jasem, sytostí a míchat různé barvy. Můžete také extrahovat barvy z hotových obrázků. Existuje verze pro iPad, k dispozici je synchronizace s Photoshopem. Velmi milá obsluha.
Adobe Color CC
Paleta Adobe Color CC a generátor barevných schémat vám umožňují:
- experimentujte s barevnými kombinacemi na interaktivním barevném kruhu (k dispozici je 7 typů barevných systémů);
- generování barevných motivů pomocí předdefinovaných stylů;
- vytvářet barevná schémata pomocí barev z fotografie nebo jakéhokoli jiného hotového obrázku;
- sdílejte svou práci, seznamte se s ostatními a čerpejte z nich inspiraci.
Vytvořené barevné motivy lze uložit v aplikacích pro PC nebo mobilní zařízení a také v sekci „Moje motivy“ na webu.
DeGraeve
Web DeGraeve nabízí řadu nástrojů, včetně generátoru barevných schémat založených na předem připravených obrázcích. Stačí si na internetu najít obrázek se zajímavým barevným schématem, nahrát URL tohoto obrázku do příslušného řádku na webu a kliknout na tlačítko generování palety. Po několika sekundách program rozloží obraz na 10 základních barev, 5 tlumených (tmých) a 5 jasných (živých), přičemž každé přiřadí svůj vlastní kód. Vygenerovaná paleta je vhodná pro práci na designu webových stránek; barvy se budou navzájem dokonale kombinovat.
Kontrast-A
Se sloganem „Najděte dostupnou barevnou kombinaci“ je Contrast-A navržen tak, aby vám pomohl vytvořit vlastní palety a zároveň experimentovat s barevnými kombinacemi. Program je založen na příručce o barevné kompatibilitě webového obsahu (text a pozadí). Pro práci s ním jsou žádoucí základní znalosti na toto téma.
Služba umožňuje vybrat 2 barvy na paletě a vyhodnotit, jak budou vypadat společně, když se použijí jako text a pozadí. Navíc jsou prokázány výsledky pro normální barevné vidění a různé formy barvosleposty.
ColorZilla
Aplikace ColorZilla pro Firefox (k dispozici také pro Google Chrome), která pomáhá webmasterům a grafikům pracovat s barvami. Bude to užitečné pro začátečníky i pokročilé uživatele. Program provede barevnou analýzu libovolného bodu a jakékoli stránky v prohlížeči a extrahuje potřebné barvy pro použití v jiných aplikacích. Definování barevné palety stránky, výběr barev z přednastavené sady, uložení těch, které se nejčastěji používají jako součást uživatelské palety – to je rozsah jeho možností.
Půvabné
Pictaculous je další generátor barevných palet založený na hotových obrázcích. Stačí na stránku nahrát vybraný obrázek o velikosti maximálně 500 KB a okamžitě začne jeho barevná analýza. Pod výsledkem s barevným schématem obrázku se zobrazí tucet dalších palet, ale již vytvořených ručně členy komunit zdrojů Kuler a COLOURLovers. Mohou být také použity jako barevné schéma pro vyvíjené webové stránky. Výsledek můžete poslat na svůj email a sdílet na sociálních sítích.
Pokud znáte nějaké další generátory barevných palet, podělte se o odkazy v komentářích.
Barva je jedním z nejdůležitějších prvků v práci designéra. Ale jako koncept to může být docela obtížné zvládnout: kvůli mnoha kombinacím palet je často obtížné rozhodnout, jak nejlépe navrhnout rozhraní webových stránek a aplikací. Již dříve jsme publikovali recenze vybraných nástrojů a . A dnes chceme téma rozšířit tím, že na blog zveřejníme překlad článku Essential Color Tools for UX Designers od Nicka Babicha.
Poznámka obsahuje seznam nejlepších služeb výběru barev pro weby a UX design, které vám pomohou ušetřit spoustu času. Prostřednictvím těchto projektů se naučíte:
- kde čerpat inspiraci;
- jak vytvořit vlastní paletu;
- jak zpřístupnit design lidem s poruchou barevného vidění.
1. Hledání inspirace
Barvy přírody
Čerpejte ze světa kolem sebe. Stačí se jen rozhlédnout. Módní oblečení, obaly na knihy, interiérový design... je kolem vás tolik úžasných věcí. Ale nejlepší barevné kombinace jsou barvy přírody. Zachyťte krásný okamžik a zkuste si vytvořit vlastní výběr na základě konkrétního obrázku.
Nejlepší barevné kombinace se nacházejí v přírodě. Barevné schéma můžete získat z libovolné fotografie
Behance
V této oblíbené službě najdete zajímavá díla zařazená do nejlepších online portfolií skutečných profesionálů ve svém oboru. Tato stránka je také velkým zdrojem inspirace. Chcete-li zobrazit nové hodné příklady projektů, jednoduše vyberte požadovanou barvu.
Dribble barvy
Dribbble patří k tomu nejlepšímu, co se vám bude hodit při tvorbě uživatelského rozhraní. Pokud chcete vizuálně porozumět tomu, jak ostatní použili určitou barvu, přejděte na stránku dribbble.com/colors a zadejte požadovanou hodnotu.
Při výběru barvy pro stránky zde můžete nastavit její minimální procento – experimentujte, zkuste například nastavit 30% modrou.
Zkuste nastavit minimální procento konkrétní barvy v Dribbble
Designová inspirace
Designspiration je užitečný nástroj především pro ty, kteří již mají nápady na barevné kombinace a chtějí vidět příklady takových kombinací. Vyberte si z 1 až 5 možností a najdete obrázky, které odpovídají zadaným parametrům.
V Designspiration najdete různé příklady barevných kombinací
Tineye Multicolr
Pomocí služby přizpůsobení barev Tineye Multicolr můžete určit požadované gama obrazu a dokonce nastavit procento každého z nich (poměr). Stránka je integrována s databází 20 milionů fotografií Creative Commons z Flickru. To je rozhodně jeden z nejrychlejších způsobů, jak najít perfektní paletku.
Colorzilla
ColorZilla je rozšíření pro instalaci do prohlížečů Chrome a Mozilla Firefox. Zahrnuje nástroje jako kapátko, procházení palet, vytváření a další.
Rozšíření ColorZilla dostupné v prohlížečích Chrome a Firefox
Shutterstock spektrum
Jedním z nejlepších způsobů, jak si představit, jak bude barevné schéma vypadat, je podívat se na odpovídající obrázky. Většina řešení, která nabízejí výběr barev pro návrhy webových stránek, tuto funkci zahrnuje, ale Shutterstock Spectrum má neuvěřitelně uživatelsky přívětivé rozhraní a náhled, který může být opravdu užitečný.
Navíc nebudete potřebovat předplatné, protože bude stačit předběžné posouzení obrázku (i když má „vodoznak“).
W3Schools
Nedávno blog recenzoval výběr z W3Schools. Je tam nashromážděno mnoho informací k tématu, počínaje jejich názvy/kódy odstínů, teorií kombinování palet a konče popisem různých formátů: HEX, RGB, CMYK, HWB atd. Najdete zde i jednoduché generátory, konvertory a podobné „minislužby“. Celkově zajímavé sledovat.
2. Vytvořte barevnou paletu
Material Design Color Tool
Nástroj Material Design Color Tool vám umožňuje vytvářet, sdílet barevná schémata a zobrazovat hrubé uživatelské rozhraní pro vaše výběry. Jednou z jeho užitečných funkcí je měření úrovně přístupnosti jakékoli barevné kombinace.
Chladiče
Coolors je stránka pro vytváření vícebarevné palety. Stačí připnout konkrétní barvu a stisknout mezerník. Nástroj je také dobrý, protože získáte více než jeden výsledek, ale změnou pouze počátečních dat můžete vygenerovat několik možností.
Barevné schéma v Coolors na základě fotografie
Adobe Color CC
Služba pro přizpůsobení barev Adobe Color CC (dříve Kuler) je nyní poměrně populární. Je volně dostupný na internetu, ale existuje i desektorová verze. S touto webovou aplikací si vytvoříte vlastní paletu pomocí barevného kola:
Nebo můžete získat určitý výsledek z hotového obrázku:
Výběr barev pro web na základě obrázku
Zde jsou stovky hotových kombinací, hledejte je v sekci „Hodinky“:
Pokud používáte verzi pro stolní počítače, můžete exportovat systém barev, který jste vytvořili, do aplikací InDesign, Photoshop a Illustrator jedním kliknutím.
Paletton
Často je srovnáván s předchozím Adobe Color CC, protože návrhy jsou velmi podobné. Jediný rozdíl je v tom, že v Palettonu nejste omezeni na pět parametrů, ale můžete experimentovat s dalšími tóny rozhraní.
Navíc se můžete podívat na. Spolu s ostatními vám aplikace umožňuje pracovat kdekoli, jednoduše pomocí smartphonu. Kromě přímých úkolů vytváření/exportu barevných palet zde můžete vybrat konkrétní barvy z obrázků nebo použít základní možnosti.
3. Zpřístupnění palety
V dnešní době jsou poruchy barevného vidění mnohem častější, než si uvědomujeme. Asi 285 milionů lidí na světě má problémy se zrakem. Vždy byste si měli ověřit, zda je vámi vybraný typ dostupný pro takové uživatele.
WebAIM Kontrola kontrastu barev
Některé tóny se k sobě hodí, zatímco jiné - právě naopak. Obrovské množství projektů neprojde A/A testem, a to je fakt. Je velmi důležité zkontrolovat vizuální design rozhraní a kontrast tónů, zejména pokud je na stránce mnoho textu. Pro tyto účely použijte při výběru barev webu.
WebAIM Color Contrast Checker je webový nástroj, který kontroluje barevné kódy v hexadecimálních hodnotách.
Chladiče
O této službě jsme se již zmínili výše. Coolors vám mimo jiné také pomůže zkontrolovat barvoslepost vaší vynalezené palety.
Typ barvosleposti v diagramu
Místo normálního režimu vyberte typ problému se zrakem, který chcete simulovat. Díky tomu přesně pochopíte, jak váš návrh uvidí člověk, který nedokáže rozlišit určité barvy.
Tak vidí paletu člověk s protanomálií
NoCoffee Vision Simulator pro Chrome
Pomocí webu NoCoffee Vision Simulator můžete vidět, jak lidé s barvoslepostí nebo slabozrakým budou vnímat určité webové stránky. Pokud například zadáte parametr „Achromatopsia“ v části „Color Deficiency“, webová stránka se zobrazí šedě.
Takto vypadá projekt CNN pro člověka s deuteranopií.
Závěr
Všechny v článku zmíněné služby pro přizpůsobení barev webu a UX design vám určitě pomohou při hledání zajímavé a efektní palety. Ale pamatujte: nejlepší způsob, jak se naučit vytvářet úžasné palety, je hodně cvičit a experimentovat.
Barvy hrají ve webdesignu obrovskou roli. Chcete-li správně vybrat barevné schéma pro web, existují speciální služby. Jsem si jistý, že každý webdesignér má ve svých záložkách alespoň jednu takovou.
Občas sedíte a přemýšlíte, jaký odstín modré zvolit jako hlavní pro stránky, o něco světlejší nebo o trochu světlejší, nebo možná tmavší... A ještě je potřeba k němu vybrat doplňkové. Můžete to samozřejmě udělat od oka, ale je lepší využít některou ze speciálních služeb.
Nebudu mluvit o teorii barev (to je příliš mnoho informací), ale jednoduše zde zveřejním služby, které mám ve svých záložkách a které používám.
S tímto nástrojem se přátelím již mnoho let. Nejpohodlnější nástroj pro výběr barev (podle mého názoru). Má mnoho dalších funkcí. Můžete například vidět příklad světlé a tmavé stránky s vybranými barvami.
Je možné vyhodnotit, jak vaše barevné schéma uvidí lidé s barvoslepostí a jinými zrakovými vadami. Můžete si vybrat webové bezpečné barvy.
Adobe Kuler je druhý webový nástroj, který používám poměrně často. Výběr barevných schémat je téměř stejný jako na předchozí stránce, ale to není důvod, proč to miluji. Kromě vytváření barevných schémat sami můžete prohlížet a používat schémata, která vytvořili jiní lidé.
Chcete-li to provést, klikněte na tlačítko v nabídce vlevo nahoře „Sledovat“. A otevře se před vámi galerie všemožných barevných kombinací.
Tento nástroj je trochu podobný Colorscheme, ale má méně funkcí, ale můžete vidět, jak budou barevné bloky vypadat.
Tyto stránky prakticky nepoužívám, ale jelikož je mám v záložkách, rozhodl jsem se je přidat také.
Následující dvě místa vygenerují paletu z obrázku, který vyberete. Je to kouzlo :)
Vyberete si libovolný obrázek, jehož barvy se vám líbí, služba jej analyzuje a poskytne vám barevnou paletu. Jediný rozdíl mezi těmito dvěma weby je v tom, jak poskytují obrázek.
Tato stránka potřebuje stažení obrázek z vašeho počítače.
Velmi pohodlný nástroj pro výběr barev. Založeno na principu „To se mi líbí – nelíbí“.
Jak název napovídá, zde si můžete vybrat barvy pro nyní módní flat design. Stránka je zajímavá, protože jakmile si vyberete paletu, můžete si ji stáhnout pro Corel a Photoshop.
Dalším módním trendem je materiálový design. Tato stránka vám pomůže vybrat barevné kombinace pro uživatelské rozhraní (UI). Kromě toho má stránka velkou sadu ikon.
A nakonec opět uživatelské rozhraní. Zde je pouze sada barev pro návrh uživatelského rozhraní. Kliknutím na libovolnou barvu můžete vidět, jak se bude číst bílý text na určitém pozadí.
Toto jsou nástroje, které mám ve svých záložkách.
Napište do komentářů, jaké stránky pro výběr barev pro webdesign používáte?
Barva je široce používána v designu - umožňuje „oživit“ obsah - vytvořit sémantické spojení mezi prvky, naplnit práci emocemi a náladou. Začínající návrháři vybírají náhodné barvy, ale existují způsoby, jak použít barvy smysluplnějšími způsoby. Uvažujme 4 takové metody, uspořádané podle principu od jednoduchých po složité.
1. Použijte známou váhu
Web brandcolors.net obsahuje více než 500 barevných kombinací slavných značek. Yandex, Google, Burger King používají stejnou paletu ve všech svých produktech. Tyto značky a jejich barvy mnozí znají a milují. Zadejte název do vyhledávacího pole nebo procházejte stránku, klikněte na požadovanou značku a barvu: její kód se zkopíruje do schránky.
2. Vyberte si hotovou profesionální paletu
Nejjednodušší je vzít hotovou barevnou kombinaci. Není nutné pokaždé znovu vynalézat kolo, protože harmonické kombinace jsou známy již dlouhou dobu. Přejděte na colordrop.io a vyberte si. Na webu jsou stovky profesionálních 4barevných palet. Jakmile vyberete ten, který chcete, klikněte a zkopírujte kódy barev z panelu, který se otevře vpravo.
Služba navíc obsahuje hotový výběr 24 barev flat designu. Klikněte vlevo pod názvem „Flat Colors“ a vezměte kód odstínu, který se vám líbí.
3. Určete barevnou paletu fotografie nebo obrázku, který se vám líbí
Tato metoda je trochu složitější. Ale také efektivnější.
- Na webu coolors.co najděte v levém horním panelu ikonu fotoaparátu a klikněte na ni. Otevře se okno pro nahrání obrázku.
- Můžete vybrat fotografii nebo obrázek s barevným schématem, které se vám líbí, z počítače nebo zkopírovat odkaz do prázdného sloupce.
- Barevnou kombinaci určí služba (níže pod nahraným obrázkem).
- Jednotlivé barvy této palety můžete měnit tak, že je označíte a vyberete bod na fotografii, ze kterého chcete barvu převzít.
- Tlačítko „Koláž“ uloží výslednou paletu s barevnými kódy do počítače.
- Tlačítko „Auto“ generuje nové kombinace na základě stejné fotografie.
- Klikněte na „OK“ a přejděte na hlavní stránku webu pro další práci s paletou.
Neméně funkční je hlavní stránka webu. Zde můžete vybrat odstíny jednotlivých barev nebo vytvořit novou paletu nahrazením jednotlivých barev.
4. Vytvořte si vlastní barevné schéma online
Nahráním fotografie na stejnou stránku coolors.co můžete nejen určit kód barvy, ale také vytvořit své vlastní kombinace. Chcete-li to provést, stiskněte mezerník - služba automaticky vytvoří kombinaci 5 barev.
Na každou barvu 4 tlačítka ikon:
- Alternativní odstíny - Odstíny barev (tmavší a světlejší),
- Přetáhněte (přesune barvu v paletě doprava nebo doleva),
- Upravit (upravit odstín, sytost, jas atd.),
- Zámek (fixní barva).
Výběr barevného schématu pro web je jedním z důležitých bodů v procesu návrhu. Výběr barevné kombinace je poměrně složitý a kreativní proces. Naštěstí existuje mnoho služeb, které mohou poskytnout významnou podporu pro správný výběr.
Některé zdroje uvedené v této recenzi poskytují možnost vybrat si z velkého množství hotových barevných schémat, zatímco jiné umožňují interaktivně sestavit vlastní schéma.
Chladič
Adobe Kuler obsahuje velkou knihovnu hotových barevných schémat. Diagram si můžete prohlédnout online a stáhnout pro použití v produktech Adobe Creative Suite.
Color Lovers má v současnosti téměř 2 miliony uživatelsky vytvořených barevných schémat. Můžete si je prohlédnout seřazením podle data, hodnocení, počtu zobrazení.
ColoRotate má knihovnu hotových barevných schémat. Můžete si také vytvořit svůj vlastní diagram pomocí jedinečného 3D nástroje. Barevné schéma lze použít přímo ve Photoshopu a Fireworks pomocí pluginu ColoRotate.
Color Scheme Designer umožňuje vybrat typ barevného schématu (mono, komplementární, triáda, tetrad, analog). Poté můžete upravit barvy a vidět účinek schématu na příkladu.
ColorSchemer má velkou knihovnu uživatelsky vytvořených barevných schémat. Můžete je seřadit podle data zveřejnění, hodnocení nebo počtu stažení.
Pictaculous je jednoduchý online nástroj pro vytváření barevných schémat. Můžete nahrát obrázek a služba vygeneruje diagram pro použití s obrázkem.
Color Spire
Color Spire je velmi snadno použitelná služba. Vyberete si základní barvu a ta vám navrhne barevné schéma. Vzhled diagramu můžete vidět i na jednoduché šabloně.