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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наскоро може би сте попаднали на подробна статия за. И малко по-рано публикувах подобна бележка относно инструментите за избор с преглед на 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. Могат да се използват и като цветова схема за разработвания сайт. Можете да изпратите резултата на пощата си и да го споделите в социалните мрежи.

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

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

1. Охладител

Kuler от Adobe отдавна е признат за най-добрия помощник на професионален уеб дизайнер. За разлика от конкурентите, тук има широка общност и можете да споделяте създадени палитри или да вземете цветови схеми на други хора и да ги промените според вашите нужди. За да общувате в общността, трябва да се регистрирате и да получите Adobe ID. Цветовете в Kuler са представени в различни формати, включително RGB, CMYK, LAB и HSV.

Вдъхновението може да възникне под влияние на най-неочакван повод. Например, може да се натъкнете на красива снимка с атрактивна цветова схема. Този генератор на цветова палитра е предназначен точно за обработка на такива снимки. Качете файлове във формати JPG или PNG и получете подробно оформление по ключови цветове. Без значение каква реакция се опитвате да предизвикате от посетителите си, генераторът на цветова палитра може да ви помогне да създадете уникален външен вид за всеки уебсайт.

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

Този популярен плъгин за Firefox ви позволява да определяте стойностите на отделните цветове и да измервате разликата между тях направо в браузъра. Има "браузър на цветова схема", за да изберете отделни цветове от предварително избрани комплекти. Лесен за използване и изключително богат на функции, плъгинът ColorZilla е като швейцарски нож от разширения за браузър за уеб дизайнери и художници.

За разлика от повечето други генератори на цветови схеми на "цветно колело", Colorotate показва палитрата върху 3D конус. Подобно на Kuler, потребителите могат да запазват и редактират свои собствени цветови схеми, както и да преглеждат палитри, направени от други дизайнери. Инструментът е интегриран с популярни дизайнерски програми Adobe Fireworks и Photoshop.

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

Цветът е един от най-важните елементи в работата на дизайнера. Но като концепция е доста трудно да се овладее: множеството комбинации от палитри често затрудняват вземането на решение как най-добре да стилизирате интерфейса на уеб страниците и приложенията. Преди това публикувахме прегледи на избрани инструменти и. И днес искаме да разширим темата, като публикуваме превод на статията 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. Създайте цветова палитра

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

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

охладители

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 също ще ви помогне да проверите изобретената от вас палитра за цветна слепота.

Тип цветна слепота в схема

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

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

NoCoffee Vision Simulator за Chrome

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

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

Заключение

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