Програма за цветно колело. Генератори на палитри в помощ на уеб дизайнера

Цветът е един от най-важните елементи в работата на дизайнера. Но като концепция може да бъде доста трудно за овладяване: поради многото комбинации от палитри, често е трудно да се реши как най-добре да се проектира интерфейсът на уеб страниците и приложенията. Преди това сме публикували рецензии на инструменти по избор и . И днес искаме да разширим темата, като публикуваме превод на статията Essential Color Tools for UX Designers от Ник Бабич в блога.

Бележката съдържа списък с най-добрите услуги за избор на цвят за уебсайтове и UX дизайн, които ще ви помогнат да спестите много време. Чрез тези проекти ще научите:

• откъде да черпим вдъхновение;
• как да създадете своя собствена палитра;
• как да направим дизайна достъпен за хора с нарушено цветно зрение.

1. Търсене на вдъхновение

Цветовете на природата

Черпете от света около вас. Всичко, което трябва да направите, е просто да се огледате. Модни дрехи, корици на книги, интериорен дизайн... има толкова много невероятни неща около вас. Но най-добрите цветови комбинации са цветовете на природата. Уловете красив момент и опитайте да създадете свой собствен избор въз основа на конкретно изображение.

Най-добрите цветови комбинации се намират в природата. Можете да получите цветова схема от всяка снимка

Behance

В тази популярна услуга ще намерите интересни произведения, включени в най-добрите онлайн портфолиа на истински професионалисти в своята област. Този сайт също е чудесен източник на вдъхновение. За да видите нови достойни примери за проекти, просто изберете цвета, който искате.

Цветове на дрибъл

Dribbble е един от най-добрите, които ще бъдат полезни при създаването на потребителски интерфейс. Ако искате визуално да разберете как другите са използвали определен цвят, отидете на dribbble.com/colors и въведете стойността, която искате.

Когато избирате цвят за сайт, тук можете да зададете неговия минимален процент - експериментирайте, например, опитайте да зададете 30% синьо.

Опитайте да зададете минимален процент от определен цвят в Dribbble

Дизайнерско вдъхновение

Designspiration е полезен инструмент предимно за тези, които вече имат идеи за цветови комбинации и искат да видят примери за такива комбинации. Изберете от 1 до 5 опции и ще намерите снимки, които отговарят на посочените параметри.

В Designspiration ще намерите различни примери за цветови комбинации

Tineye Multicolr

С помощта на услугата за съпоставяне на цветовете Tineye Multicolr можете да определите желаната гама на изображението и дори да зададете процента на всеки от тях (съотношение). Сайтът е интегриран с база данни от 20 милиона Creative Commons снимки от Flickr. Това определено е един от най-бързите начини да намерите идеалната палитра.

Colorzilla

ColorZilla е разширение за инсталиране в браузърите Chrome и Mozilla Firefox. Той включва инструменти като капкомер, разглеждане на палитри, създаване и др.

Разширение ColorZilla, налично в Chrome и Firefox

Shutterstock Spectrum

Един от най-добрите начини да си представите как ще изглежда дадена цветова схема е да разгледате съответните изображения. Повечето решения, които предлагат избор на цвят за дизайн на уебсайтове, включват тази функция, но Shutterstock Spectrum има невероятно удобен за потребителя интерфейс и визуализация, които наистина могат да бъдат полезни.

Освен това няма да се нуждаете от абонамент, тъй като предварителната оценка на картината ще бъде напълно достатъчна (въпреки че има „воден знак“).

W3Schools

Наскоро блогът прегледа селекция от W3Schools. Там има събрана много информация по темата, като се започне от техните имена/кодове на нюанси, теорията за комбиниране на палитри и се стигне до описание на различни формати: HEX, RGB, CMYK, HWB и др. Ще намерите и прости генератори, преобразуватели и подобни „мини услуги“. Като цяло, интересно за гледане.

2. Създайте цветова палитра

Инструмент за цвят на материалния дизайн

Инструментът за цвят на материалния дизайн ви позволява да създавате, споделяте цветови схеми и да преглеждате груб потребителски интерфейс за вашите селекции. Една от полезните му функции е да измерва нивото на достъпност на всяка цветова комбинация.

Coolors

Coolors е сайт за създаване на многоцветна палитра. Просто закачете определен цвят и натиснете интервала. Инструментът също е добър, защото ще получите повече от един резултат, но можете да генерирате няколко опции, като промените само първоначалните данни.

Цветова схема в Coolors по снимка

Adobe Color CC

Услугата за съвпадение на цветовете Adobe Color CC (преди Kuler) вече е доста популярна. Има го свободно в интернет, но има и десекторна версия. С това уеб приложение ще направите своя собствена палитра, като използвате цветното колело:

Или можете да получите определен резултат от готовото изображение:

Избор на цветове за уеб сайт по картина

Тук има стотици готови комбинации, потърсете ги в секцията „Гледайте“:

Ако използвате десктоп версията, можете да експортирате създадената от вас цветова система в InDesign, Photoshop и Illustrator с едно кликване.

Палеттон

Често се сравнява с предишния Adobe Color CC, тъй като дизайните са много сходни. Единствената разлика е, че в Paletton не сте ограничени до пет параметъра, а можете да експериментирате с допълнителни интерфейсни тонове.

Освен това можете да разгледате. Заедно с други, приложението ви позволява да работите навсякъде, просто като използвате вашия смартфон. В допълнение към преките задачи за създаване/експортиране на цветови палитри, тук можете да изберете конкретни цветове от картини или да използвате основни опции.

3. Направете палитрата достъпна

В днешно време нарушенията на цветното зрение са много по-чести, отколкото предполагаме. Около 285 милиона души в света имат проблеми със зрението. Винаги трябва да проверявате дали избраният от вас е достъпен за такива потребители.

Проверка на цветовия контраст на WebAIM

Някои тонове вървят добре един с друг, докато други са точно обратното. Огромен брой проекти се провалят на A/A теста и това е факт. Много е важно да проверите визуалния дизайн на интерфейса и контраста на тоновете, особено ако има много текст на страницата. За тези цели използвайте, когато избирате цветове на уебсайта.

WebAIM Color Contrast Checker е уеб базиран инструмент, който проверява цветовите кодове в шестнадесетични стойности.

Coolors

Вече споменахме тази услуга по-горе. Освен всичко друго, Coolors също ще ви помогне да проверите изобретената от вас палитра за цветна слепота.

Тип цветна слепота в диаграмата

Вместо нормален режим, изберете типа проблем със зрението, който искате да симулирате. В резултат на това ще разберете как точно човек, който не може да прави разлика между определени цветове, ще види вашия дизайн.

Ето как човек с протаномалия вижда палитра

NoCoffee Vision Simulator за Chrome

Използвайки уебсайта NoCoffee Vision Simulator, можете да видите как хората с цветна слепота или слабо зрение ще възприемат определени уеб страници. Например, ако посочите параметъра „Achromatopsia“ в секцията „Color Deficiency“, ще видите уеб страницата в сиво.

Ето как изглежда един проект на CNN за човек с дейтеранопия.

Заключение

Всички услуги за съпоставяне на цветове и UX дизайн, споменати в статията, определено ще ви помогнат в търсенето на интересна и ефективна палитра. Но помнете: най-добрият начин да се научите как да създавате невероятни палитри е да практикувате и експериментирате много.

Един от важните компоненти на работата на уеб дизайнера е създаването на палитра, избирайки цветове, които хармонично се комбинират помежду си. Процесът е доста сложен и изисква творчески подход. Има редица ресурси, които могат да направят работата с цвят много по-лесна.

Наскоро може би сте попаднали на подробна статия за. Малко по-рано публикувах подобна бележка за инструментите за избор с преглед на Kuler и ColorBlender. Днес реших да разширя темата и да дам малко повече възможности за избор на цветови палитри за сайта.

ColoRotate

Инструментът ColoRotate ви позволява да изберете най-подходящите цветови схеми от голям брой готови предложения или да създадете свои собствени. Като избирате цветове на различни места в въртяща се 3D палитра, можете да получавате комбинации, базирани на хармония или контраст, да работите с нюанси, яркост, наситеност и да смесвате различни цветове. Можете също така да извличате цветове от готови изображения. Има версия за iPad, налична е синхронизация с Photoshop. Много хубаво обслужване.

Adobe Color CC

Генераторът на палитра и цветова схема Adobe Color CC ви позволява да:

• експериментирайте с цветови комбинации на интерактивното цветно колело (налични са 7 вида цветови системи);
• генериране на цветови теми с помощта на предварително дефинирани стилове;
• създавайте цветови схеми, като използвате цветове от снимка или друго готово изображение;
• споделяйте работата си и опознавайте другите, черпейки вдъхновение от тях.

Създадените цветови теми могат да бъдат записани в приложения за компютър или мобилни устройства, както и в секцията „Моите теми“ на уебсайта.

Деграйв

Уебсайтът DeGraeve предлага разнообразие от инструменти, включително генератор на цветови схеми, базиран на предварително направени изображения. Всичко, което трябва да направите, е да намерите снимка в интернет с интересна цветова схема, да качите URL адреса на това изображение в съответния ред на уебсайта и да щракнете върху бутона за генериране на палитра. След няколко секунди програмата ще разложи картината на 10 основни цвята, 5 заглушени (мътни) и 5 ​​ярки (жизнени), присвоявайки на всеки собствен код. Генерираната палитра е удобна за използване при работа по дизайн на уебсайтове, цветовете ще се комбинират перфектно помежду си.

Контраст-А

С мотото „Намерете достъпна цветова комбинация“ Contrast-A е предназначен да ви помогне да създавате персонализирани палитри, докато експериментирате с цветови комбинации. Програмата се основава на ръководство за цветова съвместимост на уеб съдържание (текст и фон). За работа с него са желателни основни познания по темата.

Услугата ви позволява да изберете 2 цвята от палитрата и да прецените как ще изглеждат заедно, когато се използват като текст и фон. Освен това са демонстрирани резултати за нормално цветно зрение и различни форми на цветна слепота.

ColorZilla

Приложението ColorZilla за Firefox (налично и за Google Chrome) в помощ на уебмастъри и графични дизайнери, работещи с цвят. Ще бъде полезно както за начинаещи, така и за напреднали потребители. Програмата извършва цветови анализ на всяка точка и всяка страница в браузъра и извлича необходимите цветове за използване в други приложения. Определяне на цветовата палитра на страницата, избор на цветове от предварително зададен набор, запазване на тези, които най-често се използват като част от потребителската палитра - това е обхватът на неговите възможности.

Изобразително

Pictaculous е друг генератор на цветова палитра, базиран на готови изображения. Трябва само да качите избрано изображение с размер не повече от 500 KB на сайта и цветният му анализ ще започне веднага. Под резултата с цветовата схема на изображението се показват още дузина палитри, но вече създадени ръчно от членове на ресурсните общности Kuler и COLOURLovers. Те могат да се използват и като цветова схема за разработвания уебсайт. Можете да изпратите резултата на своя имейл и да го споделите в социалните мрежи.

Ако знаете други генератори на цветови палитри, споделете връзките в коментарите.

Цветът се използва широко в дизайна - позволява ви да „съживите“ съдържанието - да създадете семантична връзка между елементите, да изпълните работата с емоции и настроение. Начинаещите дизайнери избират произволни цветове, но има начини да използвате цвета по по-смислени начини. Нека разгледаме 4 такива метода, организирани на принципа от просто към сложно.

1. Използвайте позната скала

Сайтът brandcolors.net съдържа повече от 500 цветови комбинации на известни марки. Yandex, Google, Burger King използват една и съща палитра във всичките си продукти. Тези марки и техните цветове са познати и обичани от мнозина. Въведете името в лентата за търсене или превъртете през страницата, щракнете върху желаната марка и цвят: кодът му ще бъде копиран в клипборда.

2. Изберете готова професионална палитра

Най-лесно е да вземете готова цветова комбинация. Не е необходимо всеки път да преоткривате колелото, защото хармоничните комбинации са известни отдавна. Отидете на colordrop.io и изберете. В сайта има стотици професионални 4-цветни палитри. След като изберете този, който искате, щракнете и копирайте цветовите кодове от панела, който се отваря вдясно.

Освен това услугата съдържа готова селекция от 24 цвята за плоски дизайни. Кликнете вляво под името „Плоски цветове“ и вземете кода за нюанса, който харесвате.

3. Определете цветовата палитра на снимката или картината, която харесвате

Този метод е малко по-сложен. Но и по-ефективен.

• На уебсайта coolors.co в горния ляв панел намерете иконата на камерата и щракнете върху нея. Ще се отвори прозорец за качване на изображение.
• Можете да изберете снимка или изображение с цветовата схема, която харесвате, от вашия компютър или да копирате връзката в празна колона.
• Сервизът ще определи цветовата комбинация (долу под качената снимка).
• Можете да промените отделните цветове на тази палитра, като ги маркирате и изберете точка от снимката, от която искате да вземете цвета.
• Бутонът „Колаж“ запазва получената палитра с цветови кодове на компютъра.
• Бутонът „Авто“ генерира нови комбинации на базата на същата снимка.
• Кликнете върху „Ok“ и отидете на главната страница на сайта за по-нататъшна работа с палитрата.

Главната страница на сайта е не по-малко функционална. Тук можете да изберете нюанси на отделни цветове или да сглобите нова палитра, като замените отделни цветове.

4. Създайте своя собствена цветова схема онлайн

Като качите снимка на същия уебсайт coolors.co, можете не само да определите цветовия код, но и да създадете свои собствени комбинации. За да направите това, натиснете интервал - услугата автоматично създава комбинация от 5 цвята.

На всеки цвят 4 бутона с икони:

• Алтернативни нюанси - Нюанси на цвета (по-тъмни и по-светли),
• Плъзнете (Преместване на цвят надясно или наляво в палитрата),
• Настройте (Настройте нюанса, наситеността, яркостта и т.н.),
• Заключване (фиксиране на цвета).

Цветовете играят огромна роля в уеб дизайна. За да изберете правилно цветова схема за уебсайт, има специални услуги. Сигурен съм, че всеки уеб дизайнер има поне едно от тях в своите отметки.

Понякога седите и мислите какъв нюанс на синьото да изберете като основен за сайта, малко по-светъл или малко по-ярък, или може би по-тъмен ... И все още трябва да изберете допълнителни за него. Можете, разбира се, да направите това на око, но е по-добре да използвате една от специалните услуги.

Няма да говоря за теория на цветовете (това е твърде обемна информация), а просто ще публикувам тук услугите, които имам в моите отметки и които използвам.

Приятел съм с този инструмент от много години. Най-удобният инструмент за избор на цветове (според мен). Има много допълнителни функции. Например, можете да видите пример за светла и тъмна страница с избрани цветове.

Възможно е да прецените как хората с цветна слепота и други зрителни увреждания ще видят вашата цветова схема. Можете да изберете безопасни за мрежата цветове.

Adobe Kuler е вторият уеб инструмент, който използвам доста често. Изборът на цветови схеми е почти същият като в предишния сайт, но не това е причината да го обичам. Освен че сами създавате цветови схеми, можете да разглеждате и използвате схеми, създадени от други хора.

За да направите това, щракнете върху бутона в горното ляво меню „Гледайте“. И пред вас ще се отвори галерия от всякакви цветови комбинации.

Този инструмент е малко подобен на Colorscheme, но има по-малко функции, но можете да видите как ще изглеждат цветните блокове.

На практика не използвам този сайт, но тъй като го имам в отметките си, реших да го добавя.

Следните два сайта генерират палитра от избраното от вас изображение. магия е :)

Избирате произволна картина, чиито цветове ви харесват, услугата я анализира и ви дава цветова палитра. Единствената разлика между тези два сайта е как предоставят изображението.

Този сайт изисква Изтеглиснимка от вашия компютър.

Много удобен инструмент за избор на цвят. Базиран на принципа „харесвам - не харесвам“.

Както подсказва името, тук можете да изберете цветове за модерния сега плосък дизайн. Сайтът е интересен, защото след като изберете палитра, можете да я изтеглите за Corel и Photoshop.

Друга модна тенденция е материалният дизайн. Този сайт ви помага да изберете цветови комбинации за UI (потребителски интерфейс). Освен това сайтът разполага с голям набор от икони.

И накрая, потребителският интерфейс отново. Ето само набор от цветове за UI дизайн. Щраквайки върху който и да е цвят, можете да видите как ще се чете бял текст на определен фон.

Това са инструментите, които имам в моите отметки.

Напишете в коментарите какви сайтове за избор на цвят за уеб дизайн използвате?

Малка, стилна и чиста програма за избор на цвят за проектиране на HTML страници и други задачи, които изискват избор на съвпадащи цветове.

Нека да видим какво може да направи тази програма.

Настройка на цветова точка

Тъй като програмата не изисква инсталация, ние просто запазваме архива на вашия твърд диск, разопаковаме го на удобно място, отваряме папката и стартираме файла с разширение exe. По подразбиране програмата се стартира като малък бутон:

Работа с програмата

Кликнете върху тази икона и прозорецът на програмата се отваря пред нас:

екран

В този раздел програмата ви позволява да „вземете“ всеки цвят директно от екрана. Тоест от всяка част на екрана, която е била видима в момента на стартиране на програмата. Целият екран се показва в намален размер в прозореца Избор на сайт.

Ако щракнете върху която и да е част в този прозорец, тя ще се появи в следващия по-малък прозорец „Избор на цвят“. Тук можете да се прицелите по-точно и да вземете цвета от определена точка.

Също така от дясната страна на този прозорец има помощни бутони за копиране в клипборда, а в долната част има бутони „Опресняване“ (актуализира съдържанието на екрана) и „Прилагане“ (запазва избрания цвят и превключва прозореца към „ Избор”).

Избор

Ето основните инструменти за удобен избор на цвят: „Плочка“, „Кръг“, „Мрежа“ и „Победа“, които се превключват с помощта на допълнителни раздели.

Работата с тези инструменти не е трудна. Просто насочете мишката към цвета, който харесвате, коригирайте го с RGB плъзгачите (или HSV - ако този формат е по-близък до вас) и вижте дали ви подхожда или не.

Ако харесвате избрания цвят, можете да копирате неговия код от реда „Представяне на текст“. Освен това кодът може да бъде избран във всеки от стандартните формати, като щракнете върху малката стрелка, за да разширите списъка.

Също така забележете третото цветно поле в горния десен ъгъл. Освен избрания цвят (вертикално райе) показва още три цвята, които се съчетават добре с избрания.

По този начин програмата веднага предлага няколко съвпадащи цвята, които могат да бъдат използвани в други елементи на проектирания дизайн.

Програмата има доста различни помощни бутони. За да разберете тяхното предназначение, просто задръжте курсора на мишката върху тях и прочетете съветите, които се появяват в най-долната част на прозореца на програмата.

Настройки

Тук можете да регулирате някои параметри като тип и размер на шрифта и някои козметични свойства на програмата. Ще бъде по-удобно да работите с програмата, ако премахнете отметката от квадратчетата „Отвори в раздела „Екран““ и „Изпълни в режим на мини-прозорец“.

Относно програмата

В този последен раздел можете да намерите контактите на разработчика и да видите дали е пусната нова версия на програмата, като отидете на неговия уебсайт.

Предимства и недостатъци на програмата

• има много различни инструменти за избор на цвят (кръг, плочка и др.);
• ви позволява удобно да сравнявате цветовете, като премествате прозореца на програмата близо до други елементи на екрана;
• Има съвети за всички бутони.

• малко сложен интерфейс;
• стартирането в минимизирана форма и в раздела „Екран“ не е много удобно (въпреки че можете да деактивирате това в настройките);
• Не всеки ще хареса цвета на прозореца на програмата.

заключения

Програмата е доста мощна за безплатна, предоставя почти всичко необходимо за удобен избор на цветове при създаване на дизайн на уебсайт. Има някои дребни недостатъци като цвета на прозореца на програмата (люлякът е придобит вкус), но те не пречат на работата с него.

P.S. Разрешено е свободното копиране и цитиране на тази статия, при условие че е посочена отворена активна връзка към източника и е запазено авторството на Руслан Богданов.

P.P.S. Ако програмата ви изглежда сложна, има по-прости опции: