Колір коло. Крута шпаргалка за поєднанням кольорів Створення колірної схеми

Кольори для веб-дизайну грають величезну роль. Щоб грамотно підібрати колірну схему для сайту, є спеціальні сервіси. Упевнена, що кожен веб-дизайнер в закладках має хоча б один такий.

Іноді ось сидиш і думаєш, який відтінок блакитного вибрати основним для сайту, трохи світліший або яскравіший, а може темніше взяти… А до нього ще треба додаткові підібрати. Можна звичайно робити це і на око, але краще скористатися одним із спеціальних сервісів.

Я не розповідатиму про теорію кольору (це занадто об'ємна інформація), а просто опублікую тут сервіси, які є в мене в закладках і якими я користуюся.

З цим інструментом я дружу вже багато років. Найзручніший інструмент для підбору кольорів (на мій погляд). Має багато додаткових можливостей. Наприклад, можна побачити приклад світлої та темної сторінки з вибраними кольорами.

Є можливість оцінити, як бачитимуть вашу колірну гаму люди з дальтонізмом та іншими особливостями зору. Можна вибрати безпечні веб-кольори.

Adobe Kuler є другий веб інструмент, який я досить часто використовую. Підбір колірної схеми відбувається практично так, як і на попередньому сайті, але люблю я його не за це. Крім того, що ви самі можете створювати колірні схеми, ви можете подивитися та використовувати схеми, створені іншими людьми.

Для цього треба натиснути кнопку у верхньому лівому меню «Дивитись». І перед вами відкриється галерея всіляких поєднань кольорів.

Цей інструмент трохи схожий на Сolorscheme, але має менше функцій, зате є можливість подивитися, як виглядатимуть колірні блоки.

Цим сайтом я практично не користуюся, але якщо він є у мене в закладках, то вирішила додати і його.

Наступні два сайти генерують палітру із вибраного вами зображення. It is magic:)

Ви вибираєте будь-яку картинку, кольори якої вам подобаються, сервіс її аналізує та видає вам колірну палітру. Ці два сайти відрізняються лише тим, як надавати їм зображення.

На цей сайт потрібно завантажитизображення зі свого комп'ютера.

Дуже зручний інструмент для вибору кольору. Заснований на принципі "Подобається - Не подобається".

flatcolors.net

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

materialpalette.com

Ще один модний тренд – матеріал дизайн. Цей сайт допомагає підібрати поєднання кольорів для UI (user interface). Додатково на сайті є великий набір іконок.

І насамкінець знову user interface. Тут просто набір кольорів для UI дизайну. Натиснувши на будь-який колір, можна подивитися, як на певному тлі читатиметься білий текст.

Ось такі інструменти є в закладках.

Напишіть у коментарях, якими сайтами підбору кольору для веб-дизайну користуєтеся ви?

Потрібен сайт із правильними квітами? , зробимо:)

Знайшли помилку?Виділіть фрагмент тексту та натисніть CTRL+ENTER

Професійний веб-дизайн не обходиться без створення схеми кольору. У цій статті розповідається про 20 фантастичних інструментів, які допоможуть вам ідеально підібрати колірне рішення.

У всесвітньому павутинні існує безліч інструментів для досягнення колірної «нірвани». Здається, що вони зовсім різні, але багато з них - лише змінені версії популярніших і корисніших інструментів.

Тому, щоб спростити процес вибору колірного рішення, ми зібрали 20 найкращих доступних інструментів. Вони допоможуть вам не розгубитися у пошуках відповідного варіанту та відчути «колірне блаженство»

01. Kuler

Kuler, можливо, найвідоміший інструмент для роботи із кольором.

Adobe Kuler, мабуть, найпопулярніший online інструмент для колірних тем, який пройшов шлях від простого інструменту для роботи з кольором в Інтернеті до повноцінного ресурсу, на якому можна створювати теми і ділитися з іншими. Плагіни доступні для всіх основних програм Adobe, включаючи Photoshop, Illustrator та InDesign, що робить Kuler чудовим багатофункціональним інструментом для постійних користувачів програм Creative Suite.

02. ColorExplorer

ColorExplorer може виконувати багато різних функцій.

Можна сказати, що це один із найпродуманіших інструментів, які є в Інтернеті. Він пропонує великий набір інструментів для дизайну, адаптування та аналізу ваших колірних палітр. Наприклад, інструменти, які допомагають визначити доступність WCAGвибору кольору, засоби конверсії, які дозволяють переміщатися між різними системами, а також все необхідне для вибору кольору та створення палітр.

03. Colors on the Web

Colors on the Web працює на базі Flash.

У Colors on the Web завантажуються однотонні кольори в кодах HEX або RGB, і він видає набір схем на основі різних математичних пропорцій. Цей інструмент не працює на iPad або iPhone, оскільки використовує Flash для запуску програми.

04. COLOURlovers

COLOURlovers трохи нагадує Pinterest для кольору

05. Pictaculous

Pictaculous дозволяє завантажувати зображення і на його основі генерувати колірну схему.

Цей інструмент від творців MailChimp дозволить завантажити зображення і створити колірну схему на базі його кольорів. Він сумісний із деякими іншими інструментами, такими як Kuler та Colourlovers. Pictaculous має зручний Adobe Swatch для завантаження тим, що дозволяє швидко і легко «захоплювати кольори», які потрібні, щоб доповнити фотографію.

06. Contrast-A

Contrast-A створює імітацію різних зорових дефектів.

Це не дуже простий інструмент для колірних схем. Він розроблений для того, щоб можна було переконатися, що ви створили WCAG-сумісну колірну схему, це відбувається шляхом попереднього перегляду рівнів контрасту, та використання техніки імітації відсутності сприйняття кольору та низької видимості. Contrast-A має масу посилань на посібники, у яких усе викладено у більш зручною для користувача формі, ніж у самому документі про технічні властивості.

07. ColoRotate

ColoRotate може похвалитися гарною візуаліацією "колірного колеса"

ColoRotate має схожі функції з Kuler, але відрізняється зображенням палітри на красивому тривимірному конусі та здатністю генерувати більш ніж 5 кольорів в одній схемі. Інструмент можна інтегрувати з деякими програмами Creative Suite. Також він доступний як програма для iPad і може працювати спільно з Photoshop в режимі «колерної консоль».

08. Hex Color Scheme Generator

HEX створює кольори, які добре поєднуються з наявною гамою кольорів.

HEX – це невеликий зручний інструмент для генерування кольорів. Просто задайте код кольору, і він виведе на екран набір приємних кольорів, які ідеально поєднуватимуться з вашими базовими кольорами.

09. Color Scheme Designer

Color Scheme Designer має кілька цікавих способів створення колірних тем.

Цей online-інструмент має схожі функції з Adobe Kuler. Але завдяки цікавим прийомам для створення колірних тем, дозволяє вибирати з властивостей схеми параметри яскравість/насиченість та контраст замість того, щоб «возитися» з окремими кольорами, з яких складається тема. Color Scheme Designer надає доступ до набору стандартних математичних методів, включаючи можливість гармонійного підбору кольорової гами дизайну для одного (mono), двох (complement), трьох (triad)або чотирьох (tetrad)квітів з відтінками та півтонами.

10. COPASO

COPASO - це чудовий засіб для вирішення кількох завдань.

Один із інструментів сайту COLOURlovers, COPASO заслуговує на окрему увагу, як як дозволяє одночасно вирішувати безліч питань при створенні палітр. Він є повним набором інструментів для вибору кольору на простому інтерфейсі. З його допомогою можна робити позначки до палітри, завантажувати зображення, одразу переходити за посиланнями CMYK та вибирати способи створення вашої колірної схеми.

11. Colourmod

Віджет Colourmod на робочому столі допомагає легко вибирати та визначати кольори.

Colourmod - це інструмент на робочому столі, який дозволяє легко вибирати один із кольорів у тій зоні, де знаходяться віджети, навіть якщо ви працюєте з програмою Dashboard для MacBook або використовуєте Konfabulator для Windows. Colourmod,сам по собі, не є інструментом для вибору палітри, але з його допомогою можна вибирати і визначати колір. При цьому вам не доведеться запускати інші більш важкі програми.

12. ColorZilla

ColorZilla працює в Chrome та Firefox.

Ця програма спочатку розроблялася як плагін для Firefox, але його також можна застосовувати в браузері Google Chrome. ColorZilla - це розширення, в якому є безліч різноманітних інструментів для роботи з кольором, у тому числі: вибір кольору, піпетка, створення градієнта CSS і перегляд палітр.

13. Colormunki

Colormunki дозволяє створювати колірну схему з урахуванням зразків Pantone.

Зручний інструмент для роботи online представлений творцями Colormunki для калібрування кольору. Ви можете створювати палітри на основі колірних зразків Pantone у режимі online та використовувати різні прийоми, щоб підібрати приємні поєднання.

14. colr.org

За допомогою Colr.org можна побачити колірну гаму ваших зображень.

Цей простий інструмент дає унікальну можливість проаналізувати схему кольору зображення (в інших програмах ця функція виконується автоматично). Таким чином, ви можете побачити, з яких кольорів ваша картинка, і вибрати ті з них, які вам подобаються, щоб задати їх як основні кольори теми.

15. ColourGrab

ColourGrab - чудовий компактний генератор колірних схем зображень.

Цей зручний інструмент створює колірну палітру на основі будь-якого зображення в Інтернеті. Просто введіть адресу зображення, яку ви хочете проаналізувати, сайт «захопить» його, визначить його колірну гаму і створить нескладну 3D-діаграму, яка відображатиме використання різних кольорів для цього зображення. Нехай він є не найкращим варіантом для стандартних тем, але ColourGrab відмінно підійде для аналізу розподілу кольору на зображеннях.

16. ColorBlender

ColorBlender створює набір із п'яти кольорів, які добре поєднуються між собою.

Цей сайт є простим інструментом, який дозволяє створити зразок зображення, налаштувати кольори і простежити в реальному часі за тим, як підбирається набір з 5 кольорів, що чудово поєднуються. Палітри можна завантажити у Photoshop або Illustrator у форматі EPS.

17. GrayBit

GrayBit дозволяє проаналізувати сайт, щоб дізнатися, як він виглядає у відтінках сірого.

Цей зручний інструмент не підбирає безпосередньо колірні теми, але він дозволяє проаналізувати сайт, щоб побачити, як він виглядає, якщо перевести його у відтінки сірого. Це допоможе перевірити, чи ви досягли достатнього контрасту колірної палітри, щоб вона була зручною для сприйняття.

18. COLRD

COLRD ідеально підходить для того, щоб ділитися своїми колірними схемами та дізнаватися про нові.

Цей барвистий сайт - відмінне джерело натхнення, тут користувачі діляться своїми кольорами, а також градієнтами та картинками. Це не просто сайт для створення колірних схем, а швидше справжнє свято для естетичного сприйняття, і сюди варто заглянути, щоб зробити пару приголомшливих відкриттів.

19. Color Hunter

Color Hunter – це чудовий сайт, на якому можна знайти нові кольори.

Color Hunter допомагає швидко підібрати колірну гаму завантажених зображень через пошук відповідного тега або за допомогою посилань HEX. Швидкий та легкий у застосуванні, сайт дозволяє робити цікаві кольорові відкриття.

20. Stripe Generator 2.0

Stripe Generator 2.0 допомагає привертати увагу до ваших колірних рішень.

Про нього часто говорять як про «останній інструмент для веб2.0». Stripe Generator 2.0 - гарний засіб для створення приємних колірних комбінацій та незвичайних картинок одночасно.

Вибір колірної схеми для сайту є одним із важливих моментів у процесі дизайну. Підбір поєднання кольорів – досить складний та творчий процес. На щастя, існує досить багато сервісів, які можуть надати значну підтримку для правильного вибору.

Деякі ресурси, згадані в цьому огляді, надають можливість вибору з великої кількості вже готових колірних схем, інші дозволяють в інтерактивному режимі побудувати власну схему.

Kuler

Adobe Kuler містить велику бібліотеку готових колірних схем. Ви можете переглянути онлайнову схему та завантажити її для використання у продуктах серії Adobe Creative Suite.

Colour Lovers зараз має майже 2 мільйони створених користувачами колірних схем. Ви можете переглядати їх, сортуючи за датою, рейтингом, кількістю переглядів.

ColoRotate має бібліотеку готових колірних схем. Також ви можете створити власну схему за допомогою унікального 3D інструменту. Колірну схему можна використовувати безпосередньо у Photoshop і Fireworks за допомогою плагіна ColoRotate.

Color Scheme Designer дозволяє вибрати тип колірної схеми (моно, компліментарну, тріаду, зошит, аналогову). Потім можна буде налаштувати кольори та подивитися дію схеми на прикладі.

ColorSchemer має в своєму розпорядженні велику бібліотеку створену користувачами колірних схем. Ви можете сортувати їх за датою розміщення, рейтингом чи кількістю завантажень.

Pictaculous - простий інструмент для генерації колірної схеми. Ви можете завантажити зображення, а сервіс згенерує схему для використання із зображенням.

Color Spire

Color Spire дуже простий у використанні сервіс. Ви вибираєте базовий колір, а він пропонує колірну схему. Також можна переглянути зовнішній вигляд схеми на простому шаблоні.

Діти, ми вкладаємо душу в сайт. Дякуємо за те,
що відкриваєте цю красу. Дякуємо за натхнення та мурашки.
Приєднуйтесь до нас у Facebookі ВКонтакті

Схема №1. Комплементарне поєднання

Комплементарними, або додатковими, контрастними є кольори, які розташовані на протилежних сторонах колірного кола Іттена. Виглядає їх поєднання дуже жваво та енергійно, особливо при максимальній насиченості кольору.

Схема № 2. Тріада – поєднання 3 кольорів

Поєднання трьох кольорів, що лежать на однаковій відстані один від одного. Забезпечує високу контрастність за збереження гармонії. Така композиція виглядає досить живою навіть при використанні блідих та ненасичених кольорів.

Схема №3. Аналогічне поєднання

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

Схема № 4. Роздільно-комплементарне поєднання

Варіант комплементарного поєднання кольорів тільки замість протилежного кольору використовуються сусідні для нього кольори. Поєднання основного кольору та двох додаткових. Виглядає ця схема майже так само контрастно, але не настільки напружено. Якщо ви не впевнені, що зможете правильно використовувати комплементарні поєднання, використовуйте роздільно-комплементарні.

Схема № 5. Зошита - поєднання 4 кольорів

Колірна схема, де один колір – основний, два – доповнюючі, а ще один виділяє акценти. Приклад: синьо-зелений, синьо-фіолетовий, червоно-жовтогарячий, жовто-жовтогарячий.

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

Поєднання окремих кольорів

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