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

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

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 має дуже зручний інтерфейс. Після використання слайдера для визначення кольору, ви зможете вказати ключові слова, які дозволять визначити тему знімків. Крім цього можна відфільтрувати зображення за колірним балансом та яскравістю.

Професійний веб-дизайн не обходиться без створення схеми кольору. У цій статті розповідається про 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 дуже простий у використанні сервіс. Ви вибираєте базовий колір, а він пропонує колірну схему. Також можна переглянути зовнішній вигляд схеми на простому шаблоні.

Колір – один із найважливіших елементів у роботі дизайнера. Але його, як концепцію, досить складно освоїти: через безліч комбінацій палітр часто важко вирішити, як краще оформити інтерфейс веб-сторінок і додатків. Раніше ми публікували огляди інструментів на вибір і . Сьогодні хочемо розширити тему, розмістивши в блозі переклад статті Essential Color Tools for UX Designers від Nick Babich.

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

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

1. Шукаємо натхнення

Фарби природи

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

Найкращі поєднання фарб – у природі. Можете отримати колірну схему з будь-якого фото

Behance

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

Dribbble Colors

Dribbble - одна з кращих , яка стане в нагоді при створенні інтерфейсу користувача. Якщо ви бажаєте візуально зрозуміти, як інші фахівці використовували конкретний колір, відкрийте сторінку за посиланням dribbble.com/colors і вкажіть потрібне значення.

Підбираючи колір для сайту, тут можна задати мінімальний його відсоток — поекспериментуйте, наприклад, спробуйте поставити 30% синього.

Спробуйте вказати мінімальний відсоток певного кольору у Dribbble

Designspiration

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

У Designspiration знайдете різні приклади комбінацій кольорів

Tineye Multicolr

За допомогою сервісу підбору кольору Tiney 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

Сервіс підбору кольорів для сайту Material Design Color Tool дозволить створювати колірні схеми, ділитися ними і переглядати приблизний інтерфейс для підібраних вами параметрів. Одна з корисних його функцій – вимір рівня доступності будь-якого поєднання кольорів.

Coolors

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

Колірна схема в Coolors на основі фото

Adobe Color CC

Сервіс підбору кольору Adobe Color CC (раніше Kuler) зараз досить популярний. Він знаходиться у вільному доступі в інтернеті, але є також і десктор-версія. За допомогою цієї веб-програми ви зробите свою палітру, використовуючи колірне коло:

А можете отримати певний результат із готового зображення:

Підбір кольору для сайту по картинці

Тут є сотні готових комбінацій, шукайте їх у розділі «Дивитись»:

Якщо ви користуєтеся десктоп-версією, ви можете в один клік експортувати створену вами колірну систему в InDesign, Photoshop та Illustrator.

Paletton

Його часто порівнюють із попереднім Adobe Color CC, оскільки ці проекти дуже схожі. Різниця лише в тому, що Paletton ви не обмежені п'ятьма параметрами, а можете експериментувати з додатковими тонами інтерфейсу.

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

3. Робимо палітру доступною

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

WebAIM Color Contrast Checker

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

WebAIM Color Contrast Checker – веб-інструмент, за допомогою якого перевіряються колірні коди у шістнадцяткових значеннях.

Coolors

Про цей сервіс ми вже згадували вище. Крім усього іншого, Coolors також допоможе вам перевірити придуману палітру на колірну сліпоту.

Тип колірної сліпоти у схемі

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

Так людина з протаномалією бачить палітру

NoCoffee Vision Simulator для Chrome

За допомогою сайту NoCoffee Vision Simulator зможете переглянути, як люди з колірною сліпотою або слабким зором сприйматимуть певні веб-сторінки. Наприклад, вказавши параметр «Ахроматопсія» у розділі «Color Deficiency», ви побачите веб-сторінку у сірому кольорі.

Так виглядає проект CNN для людини з дейтеранопією

Висновок

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

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

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

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

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

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

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

Екран

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

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

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

Підбір

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

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

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

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

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

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

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

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

Про програму

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

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

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

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

Висновки

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

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

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