Изберете цветова комбинация онлайн. Страхотен лист с комбинация от цветове

Момчета, влагаме душата си в сайта. Благодаря за това
за откриването на тази красота. Благодаря за вдъхновението и настръхването.
Присъединете се към нас в Facebookи Във връзка с

Схема No 1. Допълнителна комбинация

Допълнителни, или допълнителни, контрастиращи, са цветовете, които са разположени от противоположните страни на цветното колело на Itten. Комбинацията им изглежда много жизнена и енергична, особено при максимална наситеност на цветовете.

Схема номер 2. Триада - комбинация от 3 цвята

Комбинацията от 3 цвята, разположени на еднакво разстояние един от друг. Осигурява висок контраст, като същевременно поддържа хармония. Такава композиция изглежда доста оживена, дори когато се използват бледи и ненаситени цветове.

Схема No 3. Подобна комбинация

Комбинация от 2 до 5 цвята, разположени един до друг на цветното колело (в идеалния случай 2-3 цвята). Впечатление: спокоен, релаксиращ. Пример за комбинация от подобни приглушени цветове: жълто-оранжево, жълто, жълто-зелено, зелено, синьо-зелено.

Схема No 4. Отделно-допълваща се комбинация

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

Схема номер 5. Tetrad - комбинация от 4 цвята

Цветова схема, при която един цвят е основен, два се допълват, а друг подчертава акцентите. Пример: синьо-зелено, синьо-виолетово, червено-оранжево, жълто-оранжево.

Схема номер 6. Квадрат

Комбинации от отделни цветове

Бяло: върви с всичко. Най-добрата комбинация със синьо, червено и черно.
Бежово: със синьо, кафяво, изумрудено, черно, червено, бяло.
Сиво: с фуксия, червено, лилаво, розово, синьо.
Розово: с кафяво, бяло, ментово зелено, маслинено, сиво, тюркоазено, бебешко синьо.
Фуксия (тъмно розово): със сиво, тен, лайм, ментово зелено, кафяво.
Червено: с жълто, бяло, кафяво, зелено, синьо и черно.
Доматено червено: синьо, ментово зелено, пясъчно, кремаво бяло, сиво.
Черево червено: лазурно, сиво, светло оранжево, пясъчно, бледожълто, бежово.
Малиново червено: бяло, черно, дамаска роза.
Кафяв: ярко синьо, кремаво, розово, бежово, зелено, бежово.
Светло кафяво: бледожълто, кремаво бяло, синьо, зелено, лилаво, червено.
Тъмно кафяво: лимонено жълто, небесно синьо, ментово зелено, лилаво розово, лайм.
Червеникаво кафяво: розово, тъмно кафяво, синьо, зелено, лилаво.
Оранжево: синьо, синьо, лилаво, лилаво, бяло, черно.
Светло оранжево: сиво, кафяво, маслинено.
Тъмно оранжево: бледожълто, маслинено, кафяво, черешово.
Жълто: синьо, лилаво, светло синьо, лилаво, сиво, черно.
Лимонено жълто: вишнево червено, кафяво, синьо, сиво.
Бледо жълто: фуксия, сиво, кафяво, нюанси на червено, тен, синьо, лилаво.
Златисто жълто: сиво, кафяво, лазурно, червено, черно.
Маслина: оранжева, светлокафява, кафява.
Зелено: златисто кафяво, оранжево, маруля, жълто, кафяво, сиво, кремаво, черно, кремаво бяло.
Цвят на салата: кафяв, тен, кафяв, сив, тъмно син, червен, сив.
Тюркоаз: фуксия, вишнево червено, жълто, кафяво, кремаво, тъмно лилаво.
Електротехникът е красив в комбинация със златисто жълто, кафяво, светло кафяво, сиво или сребристо.
Синьо: червено, сиво, кафяво, оранжево, розово, бяло, жълто.
Тъмно синьо: светло лилаво, небесно синьо, жълтеникавозелено, кафяво, сиво, бледожълто, оранжево, зелено, червено, бяло.
Люляк: оранжево, розово, тъмно лилаво, маслинено, сиво, жълто, бяло.
Тъмно лилаво: златисто кафяво, бледожълто, сиво, тюркоазено, ментово зелено, светло оранжево.
Черното е универсално, елегантно, изглежда във всякакви комбинации, най-добре с оранжево, розово, салатно, бяло, червено, люляк или жълто.

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

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

Кулер

Adobe Kuler съдържа голяма библиотека от предварително направени цветови схеми. Можете да видите диаграмата онлайн и да я изтеглите за използване в продуктите на Adobe Creative Suite.

В момента Color Lovers разполага с близо 2 милиона цветови схеми, създадени от потребителя. Можете да ги видите подредени по дата, рейтинг, брой гледания.

ColoRotate има библиотека от предварително направени цветови схеми. Също така можете да създадете своя собствена схема с уникалния 3D инструмент. Цветовата схема може да се използва директно във Photoshop и Fireworks с помощта на приставката ColoRotate.

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

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

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

Цвят Spire

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

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

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

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

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

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

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

Екран

В този раздел програмата ви позволява да "вземате" произволен цвят директно от екрана. Тоест от всяка част на екрана, която е била видима в момента на стартиране на програмата. Целият екран се показва в намален размер в прозореца Select Area.

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

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

Избор

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

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

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

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

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

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

Настройки

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

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

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

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

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

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

констатации

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

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

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

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

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

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

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

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

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

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

Behance

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

Dribble Colors

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 Color Contrast Checker

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

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

охладители

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

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

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

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

NoCoffee Vision Simulator за Chrome

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

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

Заключение

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

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

1. Използвайте известна гама

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

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

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

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

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

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

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

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

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

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

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

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