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

Колір широко використовується в дизайні, – він дозволяє «оживити» зміст – створити смисловий зв'язок елементів, наповнити роботу емоціями та настроєм. Дизайнери-початківці беруть випадкові кольори, але є способи використовувати колір більш осмислено. Розглянемо чотири таких способи, організованих за принципом від простого до складного.

1. Використовувати відому гаму

На сайті brandcolors.net зібрано понад 500 поєднань кольорів відомих брендів. Яндекс, Google, Burger King використовують одну палітру у всіх своїх продуктах. Ці бренди та їх кольори знайомі та улюблені багатьма. Наберіть назву в рядку пошуку або погортайте сторінку, натисніть на потрібний бренд і колір: його код скопіюється в буфер обміну.

2. Вибрати готову професійну палітру

Найпростіший спосіб – взяти готове поєднання кольорів. Не обов'язково щоразу винаходити велосипед, адже гармонійні поєднання відомі давно. Зайдіть на colordrop.io та вибирайте. На сайті є сотні професійних 4-колірних палітр. Вибравши потрібну, натисніть та скопіюйте коди кольорів з панелі, що відкрилася праворуч.

Крім цього, сервіс містить готову добірку із 24 кольорів плоского дизайну. Натисніть ліворуч під назвою «Flat Colours» і беріть код відтінку, що сподобався.

3. Визначити палітру кольорів фотографії або картинки, що сподобалася.

Цей спосіб трохи складніший. Але й ефектніше.

• На сайті coolors.co у верхній панелі зліва знайдіть значок фотоапарата, натисніть на нього. Відкриється вікно завантаження зображення.
• Можна вибрати фото або картинку з кольоровою гамою, що сподобалася, з комп'ютера або скопіювати посилання в порожню графу.
• Сервіс визначить поєднання кольорів (внизу під завантаженою картинкою).
• Змінювати окремі кольори цієї палітри можна, позначаючи їх та вибираючи точку на фото, з якої потрібно взяти колір.
• Кнопка «Collage» зберігає палітру з кодами кольорів на комп'ютері.
• Кнопка «Auto» генерує нові поєднання на основі того самого фото.
• Натисніть «Ок» та перейдіть на головну сторінку сайту для подальшої роботи з палітрою.

Головна сторінка сайту не менш функціональна. Тут можна підібрати відтінки окремих кольорів або зібрати нову палітру, замінивши окремі кольори.

4. Створити свою кольорову гаму онлайн

Завантаживши фото на той же сайт coolors.co, можна не тільки визначити код кольору, а й створити власні поєднання. Для цього натисніть пропуск - сервіс автоматично створює поєднання з 5-ти кольорів.

на кожному кольорі 4 значки-кнопки:

• Alternative shades - Відтінки кольору (темніше і світліше),
• Drag (Перемістити колір праворуч або ліворуч по панелі),
• Adjust (Налаштувати тон, насиченість, яскравість та ін.),
• Lock (Зафіксувати колір).

Представляємо корисний інструмент для підбору кольорової гами – колірне коло Іттена.

Що таке?

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

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

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

Влаштування колірного кола

Сторона дизайнера Сторона художника

Придбати

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

Рекомендуємо також ознайомитися з онлайн-сервісом по підбору кольору в одязі.

Коло для підбору комбінацій кольорів

Попередником даного пристрою в його сучасному вигляді є кільце Іттена (дивіться малюнок нижче).

Саме Йоханесс Іттен першим із усього спектру виділив саме дванадцять кольорів і розташував їх по колу таким чином, що пари, що максимально контрастують один з одним, опинилися один навпроти одного. У центрі він розташував трикутник з трьома основними кольорами - червоним, синім і жовтим (саме з них можна отримати всі інші шляхом змішування у різних пропорціях). Цей трикутник Іттен уклав у шестикутник, усередині якого позначив які відтінки вийдуть при змішуванні основних кольорів у рівних пропорціях.

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

Розглянемо цей момент трохи докладніше.

Чому основних кольорів дванадцять?

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

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

Гід зі змішування фарб

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

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

А як же визначити ці самі пропорції? Невже навмання? Ні, колірне коло може допомогти і в цьому.

Шкала насиченості

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

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

Щоб зрозуміти як це робиться практично, перегляньте це відео:

Схеми поєднань кольорів

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

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

По-перше, гармонія чи дисгармонія фарб – це дуже суб'єктивне поняття. Як кажуть, "на смак та колір товариша немає".

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

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

Маленька, стильна і акуратна програмка підбору кольору для оформлення HTML-сторінок та інших завдань, що вимагають підбору кольорів, що поєднуються.

Погляньмо, що вміє ця програма.

Встановлення Color point

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

Робота з програмою

Натискаємо цей значок і перед нами відкривається вікно програми:

Екран

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

Якщо в цьому вікні натиснути на будь-яку частину, вона з'явиться в наступному віконці менше "Виберіть колір". Тут вже можна точніше прицілитися і взяти колір із конкретної точки.

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

Підбір

Тут знаходяться основні інструменти для зручного підбору кольору: "Черепиця", "Коло", "Web" та "Win", які перемикаються за допомогою додаткових вкладок.

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

Якщо підібраний колір сподобався, можна скопіювати його код із рядка "Текстова вистава". Причому код можна вибрати також у будь-якому зі стандартних форматів, натиснувши маленьку стрілку розкриття списку.

Також зверніть увагу на третє колірне вікно у правому верхньому кутку. У ньому крім вибраного кольору (вертикальна смуга) показані ще три кольори, що добре поєднуються з вибраним.

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

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

Налаштування

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

Про програму

У цій останній вкладці можна знайти контакти розробника і подивитися, чи не вийшла нова версія програми, перейшовши на його сайт.

Переваги та недоліки програми

• є безліч різних інструментів для підбору кольору (коло, черепиця і т.д.);
• дозволяє зручно порівнювати кольори, підсуваючи вікно програми впритул до інших елементів екрану;
• є підказки з усіх кнопок.

• трохи складний інтерфейс;
• запуск у згорнутому вигляді та на вкладці "Екран" не дуже зручний (хоча, можна вимкнути це в налаштуваннях);
• не всім сподобається колір вікна програми.

Висновки

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

P.S. Дозволяється вільно копіювати та цитувати цю статтю за умови вказівки відкритого активного посилання на джерело та збереження авторства Руслана Богданова.

P.P.S. Якщо програма видалася складною, є варіанти і простіше:

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

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

01. Adobe Colour CC

Компанія Adobe перейменувала свій проект Kuler на Colour

Ви можете бути знайомі з цим інструментом за його колишньою назвою Adobe Kuler . Проте зовсім недавно компанія Adobe перейменувала одну зі своїх популярних веб-додатків на Adobe Colour CC.

Він дозволяє підбирати, створювати та зберігати різні колірні схеми, у кожній з яких може бути присутнім до п'яти кольорів. Інструмент доступний як у браузерній, так і в настільній версії. Якщо ви використовуєте настільну версію, ви зможете експортувати колірну схему прямо у Photoshop, Illustrator та InDesign.

02. Mudcube Colour Sphere

Якщо ви не впевнені з приводу вашої колірної схеми, то Mudcude має власну галерею готових ресурсів.

Mudcube Colour Sphere – дуже зручний мініатюрний ресурс для дизайнерів, який не тільки пропонує hex-коди вибраних кольорів, але й дозволяє створювати схеми кольорів для власних проектів. Також варто зазначити, що Mudcube має власну галерею готових ресурсів, які також можна використовувати.

03. Check my Colours

Check my Colours розроблений спеціально для оцінки та добірки комбінації фону та основного кольору для всіх DOM-елементів. А також для того, щоб з'ясувати, чи елементи досить гармонійні між собою. Усі тести засновані на алгоритмах, рекомендованих World Wide Web Consortium ( W3C).

04. The Color App

Додаток допоможе дізнатися RGB, HEX, а також HSLA-значення вибраних кольорів

iOS-інструмент The Color Appдозволить легко і просто визначати кольори за допомогою великої палітри кольорів. Він дозволяє дізнатися RGB, HEX та HSLA-значення кольорів, а також створювати власні колірні схеми для сайту.

05. Color Hunter

Color Hunter формує колірну схему на основі вибраного зображення

Це дуже зручний інструмент, особливо якщо потрібно знайти якийсь конкретний колір. Виберіть зображення та завантажте його в Color Hunter. Інструмент створить палітру кольорів на основі вибраного зображення. Це чудовий метод створення власних колірних схем.

06. TinEye

Якщо вам потрібно отримати конкретний колір, просто введіть значення HEX в URL

На цьому сайті використовується база даних, що складається з 10 мільйонів зображень, доступних безкоштовно за ліцензійною угодою Creative Commons, які ретельно відібрали з Flickr. Їх можна використовувати для створення відповідних колірних схем.

07. Color

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

08. SpyColor.com

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

09. Designspiration

На Designspiration можна вибрати до п'яти відтінків за допомогою зручної палітри на всю сторінку, яка допоможе легко знайти саме ті колірні схеми HTML, які ви шукаєте. Після цього сайт згенерує сторінку з усіма зображеннями бази даних, в яких використовується схожа колірна комбінація. Також будуть надані HEX-значення, які можна використовувати у власних проектах. А зображення можна зберігати у колекціях на сайті.

10. ColorExplorer

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

11. Hex Color Scheme Generator

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

12. COLOURlovers

COLOURlovers є спільнотою для обміну колірними схемами. Тут можна черпати натхнення з наборів кольорів інших користувачів, а також створювати власні та ділитися ними.

13. Color Scheme Designer

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

14. COPASO

Один з інструментів із сайту COLOURlovers. Але COPASO вартий окремої уваги, оскільки є неймовірним рішенням «все в одному», і дозволяє легко генерувати готові колірні схеми для сайту. Тут представлено безліч інструментів для вибору кольору, і всі вони розміщуються в зручному і простому інтерфейсі. Крім цього до палітр можна додавати нотатки, завантажувати зображення тощо.

15. Colourmod

Colourmod є програмним забезпеченням, яке дозволяє вибирати окремі кольори з області віджетів, незалежно від того, використовуєте ви Mac або Konfabulator на Windows . Це не зовсім простий інструмент для роботи з палітрами кольорів, проте він допоможе швидко і просто визначати кольори без необхідності завантажувати великовагові програми.

16. ColorZilla

ColorZilla доступний як для Chrome, так і для Firefox

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

17. Colormunki

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

18. colr.org

Colr.org дозволяє встановити діапазон кольорів будь-якого зображення

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

19. ColourGrab

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

20. ColorBlender

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

Один з найпростіших інструментів, який дозволяє налаштовувати кольоровість і в режимі реального часу отримувати п'ять кольорів, що поєднуються між собою. Створену палітру можна завантажити у Photoshop або Illustrator у вигляді EPS-файлу .

21. GrayBit

GrayBit ​​дозволяє аналізувати сайти, щоб зрозуміти, як вони виглядали в градації сірого

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

22. COLRD

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

23. Shutterstock Spectrum

Зображення можна фільтрувати за колірним балансом та яскравістю

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

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

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

Kuler

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

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

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

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

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

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

Color Spire

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