Шукаєте джерела натхнення? Ми зібрали кілька актуальних ресурсів та інструментів для роботи з кольором.
З їхньою допомогою ви отримаєте максимальний результат від своєї творчості. Ще деякі додаткові статті, які можуть здатися вам цікавими: інструменти аудиту CSS, генератори CSS, доступні компоненти інтерфейсу, шаблони зовнішніх інтерфейсів і розширення коду VS.
Сьогодні ми приділимо особливу увагу інструментам та ресурсам для роботи з кольором, які підходять для реалізації будь-яких проєктів. Ми розглянемо всі аспекти цієї теми: починаючи від типів колірних палітр та генераторів кольору та закінчуючи питаннями отримання контрасту та градієнтів, які зроблять ваш дизайн ідеальним. Ця добірка в жодному разі не є повною. Але ми сподіваємося, що нові знання зроблять вашу повсякденну роботу більш продуктивною.
1. Змінні CSS та HSLA
Як ви зазвичай визначаєте кольори CSS (прим. Cascading Style Sheets, “каскадні таблиці стилів” – це мова розмітки, яка використовується для візуального оформлення веб-сайтів)? За допомогою HEX (прим. Hex (hexadecimal) – позначення шістнадцяткової системи обчислення)? RGBA (прим. визначає прозорість кольору)? Чи використовуєте ви HSLA задає прозорість елемента)? Максим Хекель використав поєднання HEX і RGBA, доки не натрапив на добре продуманий шаблон, який допоміг йому навести лад і спростити базу вихідного коду. Основа: змінні HSLA та CSS.
HSLA розшифровується як Hue Saturation Lightness Alpha (прим. Відтінок - Насиченість - Яскравість - Прозорість), чотири основні компоненти, які необхідні для визначення кольору. Коли ви працюєте зі схожими кольорами, наприклад, різними тонами синього, ви можете помітити, що вони мають однаковий відтінок та насиченість. При застосуванні підходу Максима Хекеля за допомогою змінної CSS ви можете встановити значення відтінку та насиченості і повторно використовувати їх з іншими кольорами – наприклад, для створення колірної шкали з нуля. Це неймовірний приклад того, наскільки потужною може бути CSS.
2. Надшвидкий генератор колірних схем
Вам потрібно створити палітру кольорів? Coolors - це зручний інструмент, який допоможе вам у цьому, та багато в чому іншому. У його основі лежить генератор стильних палітр. Для початку він пропонує вам випадковий набір кольорів. Ви можете налаштувати палітру, якщо пограєтеся з відтінками, або повністю змінити її шляхом увімкнення нових кольорів.
Coolors також дозволяє зібрати палітру із кольорів фотографії, а також створити колажі, градієнти та набори градієнтів. Функція перевірки контрастності визначає співвідношення контрастності кольору тексту з кольором фону, щоб забезпечити легкість сприйняття ваших колірних комбінацій. Якщо ви просто шукаєте натхнення, існують тисячі колірних тем, просто натисніть на кольори, які вам подобаються, і шістнадцяткові значення будуть скопійовані у ваш буфер обміну.
3. Дуже незвичайні поєднання кольорів
Ви коли-небудь замислювалися про те, щоб створити для свого наступного проєкту схему з равликово-розмірного ніжно-рожевого кольору, кольору червоного дерева і кавуна, що зник? Спочатку вона може здатися трохи дивною. Це концепція, яка лежить в основі colors.lol, сайту з дуже незвичайними палітрами для отримання кольору натхнення, як описує його засновник, Адам Фюрер.
Палітри, які створені для знайомства з цікавими поєднаннями кольорів у такій захоплюючій манері, підбираються вручну за допомогою Twitter-бота @colorschemez. Канал випадково генерує колірні комбінації і привласнює кожному кольору прикметник зі списку, що містить понад 20000 слів. За незвичайними назвами стоять справжні шістнадцяткові значення кольорів, які можна одразу використати. Наприклад, #FDB0C0, #4A0100 і #FD4659 у разі равликово-розмірного ніжно-рожевого та його напарників. Цікавий погляд на колір.
4. Монохромні колірні палітри – це просто
Якщо ви коли-небудь намагалися розробити послідовну монохромну палітру, ви знаєте, що це може бути досить нудним заняттям. Після того, як Дімітріс Раптіс вкотре витратив купу часу на нескінченні повторення команд "копіювати/вставити" для створення гарної палітри, він придумав CopyPalette.
З його допомогою можна легко генерувати колірні палітри. Вам потрібно лише вибрати базовий колір, коефіцієнт контрастності відтінків і ту кількість колірних варіацій, яку ви хочете. Інструмент створить ідеально збалансовану колірну палітру, яку можна скопіювати та вставити у свій дизайн. Це значно заощаджує час.
5. Колірна шкала для візуалізації даних
При візуалізації різних видів даних у кожного з них різні вимоги до кольору. Наприклад, коли ви створюєте кругові діаграми, зведені гістограми або карти, краще вибрати серію кольорів, які виглядають рівномірно. Вони повинні бути легко помітними і в той же час добре поєднуватися між собою. Data Color Picker, розроблений Learn UI Design дозволяє генерувати такі палітри зі збалансованим розподілом кольорів. Потрібно лише вказати два відтінки, які найбільшою мірою контрастують один з одним.
Якщо вам потрібна колірна шкала на базі одного кольору, ви можете задати значення однієї змінної. І тому існує генератор Single Hue Scale. У ньому темний варіант відповідає найбільшому значенню, а нейтральний колір - значенню, яке прагне нуля. І останнє, але не менш важливе: контрастні кольори найкорисніші для візуалізацій, у яких ви показуєте перехід від одного краю через нейтральну середину до протилежного краю (типовий приклад – карта “співвідношення демократів/республіканців у кожному штаті США”). Генератор Divergent Color Scale допоможе вам знайти найкращу шкалу для подібних випадків та вивести візуальну частину вашого проєкту на новий рівень. 6. Колірна палітра у вашому проекті Є багато фантастичних сайтів, які допоможуть вам знайти захоплюючі палітри кольорів. Однак після того, як ви визначилися з тим, що вам подобається, залишається головне питання: як застосувати кольори до вашого дизайну? Happy Hues дозволяє це зробити.
Happy Hues надихає вас на створення палітри кольорів і одночасно показує приклад того, як уподобані кольори можуть бути використані у вашому проекті. Просто оберіть палітру, і Happy Hues змінить кольори на своєму сайті, щоб ви могли побачити її в реальному дизайні. Дуже наочно!
7. Генератор колірних відтінків
Ще один корисний інструмент для роботи з кольором – генератор кольорових відтінків, який розробили Віталій Ртищев та Влад Шилов. Ви можете ввести шістнадцяткове значення кольору, і інструмент покаже вам його світліші та темніші відтінки.
Щоб налаштувати серію відтінків, просто відрегулюйте відсоток, на який ви хочете освітлити/затемнити початковий колір, та змініть рівень насиченості. Якщо вам подобається результат, ви можете скопіювати шістнадцяткові значення кольору або всієї палітри одним клацанням миші.
8. Простий колір
Говорити про колір буває непросто. Те, що одна людина називає фіолетовим, для іншого може бути багряним. Але який колір вони таки мають на увазі? Щоб уникнути непорозумінь, команда дизайнерів Lyft придумала власну колірну систему, яку дизайнери та розробники можуть легко освоїти, враховуючи її зручність. Вони відкрили доступ для всіх, тому ваша команда також може нею скористатися. Це ColorBox!
9. Функція кольору від Google
Зазвичай пошукові системи працюють таким чином: ви вводите пошуковий запит і перед вами з'являється ряд посилань. Picular працює інакше. Замість пошуку релевантних сайтів він представляє вам кольори, які відповідають вашому запиту. Наприклад, результатами слова "Літо" стануть різні відтінки синього, а також трохи пісочно-жовтого та коричневого з краплею рожевого. Кожен колір позначений своїм шістнадцятковим значенням, тому якщо ви хочете використовувати його в проекті, просто клацніть по ньому, і він буде скопійований в буфер обміну.
10. Кольори із забутих часів
Як щодо трохи інших кольорів для натхнення? Color Leap, створений Брендоном Шепардом, перенесе вас у подорож з історії кольору на 4000 років тому.
Починаючи з 2000 р. до н. до 1960-х років проект демонструє 180 колірних палітр з 12 різних епох, кожна з яких є колірною мовою свого часу. Просто неймовірно!
11. Доступність палітри кольорів
Підібрати ідеальний відтінок кольору – справа не лише смаку, а й доступності. Адже за відсутності колірного розмаїття продукт у разі може стати непридатним використання людьми з порушеннями зору. Geenes, створений Gianluca Gini, це дуже детальний інструмент для перевірки контрасту, який допоможе вам заздалегідь виявити підводні камені в цій галузі.
Він дозволяє пограти з діапазонами відтінків і насиченістю і застосовувати колірні палітри до одного з трьох вибраних макетів інтерфейсу користувача. Далі можна включити режим, який показує, як люди з різними видами порушень зору бачать кольори, і в результаті прийняти обґрунтоване рішення про те, які тони найкраще підійдуть для вашої панелі. Щоб одразу застосувати кольори, просто скопіюйте та вставте їх код або експортуйте до Sketch.
12. Розробка доступних колірних систем
Правильний контраст кольорів - гарантія того, що не тільки люди з порушеннями зору зможуть з легкістю користуватися вашим продуктом, але й усі інші в умовах низького освітлення або перегляду зі застарілих екранів. Однак якщо ви коли-небудь намагалися створити доступну колірну систему самостійно, ви, мабуть, знаєте, що це досить складне завдання.
Команда Stripe захотіла вирішити цю проблему і переробила існуючу колірну систему. Переваги їх нового варіанту: дотримання вимог щодо забезпечення доступності, використання яскравих відтінків, які користувачі можуть легко відрізнити один від одного, однакова зорова сила кожного кольору, при якому ой жоден із них не виділяється серед інших. Якщо вам цікаво дізнатися більше про їхній підхід, ви можете знайти публікацію в їхньому блозі, де є багато цінної інформації.
13. Правильне керування кольором
Керування кольором має важливе значення. Однак настройки, які ви використовуєте, не завжди підходять для ваших проектів та пристроїв, на яких вони будуть використовуватися. Адже ви покладаєтеся тільки на те, що відображається на екрані. Варто враховувати це не тільки при виборі кольору, але й оцінці контрасту і зручності сприйняття.
Команда Stripe захотіла вирішити цю проблему і переробила існуючу колірну систему. Переваги їх нового варіанту: дотримання вимог щодо забезпечення доступності, використання яскравих відтінків, які користувачі можуть легко відрізнити один від одного, однакова зорова сила кожного кольору, при якому ой жоден із них не виділяється серед інших. Якщо вам цікаво дізнатися більше про їхній підхід, ви можете знайти публікацію в їхньому блозі, де є багато цінної інформації.
13. Правильне керування кольором
Керування кольором має важливе значення. Однак настройки, які ви використовуєте, не завжди підходять для ваших проектів та пристроїв, на яких вони будуть використовуватися. Адже ви покладаєтеся тільки на те, що відображається на екрані. Варто враховувати це не тільки при виборі кольору, але й оцінці контрасту і зручності сприйняття.
Але це більше, ніж просто генератор градієнтів. На сайті також є корисний контент на цю тему: технічні статті, приклади градієнтів із реальних проектів, навчальні посібники та посилання, наприклад, на колекції відтінків, палітри градієнтів та багато іншого, що може бути джерелом натхнення. Там є докладний огляд градієнтів та способів їх застосування.
15. Без праці створюйте колірні градієнти CSS
Вибір кольорів для створення градієнта вручну вимагає досвіду в дизайні та гарного розуміння колірної гармонії. Якщо вам потрібен градієнт для фону або елементів інтерфейсу користувача, але ви не відчуваєте себе досить впевнено, щоб впоратися із завданням самостійно (або у вас просто немає на це часу), генератор градієнта кольору, розроблений компанією My Brand New Logo, допоможе вам.
На основі алгоритмів генератор створює гармонійні градієнти на основі обраного кольору. Існує чотири різні стилі градієнтів: від ледь помітного (прим. стиль світла) і перламутрового ефекту (стиль веселки) до інтенсивного і глибокого стилів. Ви можете налаштувати градієнт за допомогою повзунків, а коли закінчите, скопіюйте та вставте згенерований код CSS, щоб використовувати його у своєму проекті. Це цікаво!
16. Прості у використанні градієнти CSS
Gradient Magic - ще один зручний інструмент, який бере на себе частину ваших завдань і перетворює використання градієнтів на простий процес копіювання та вставки. Це галерея унікальних градієнтів CSS: від стандартних до градієнтів у смужку, під кутом та в клітинку, а також вибухових градієнтів. Щоб знайти те, що вам подобається, можна застосувати фільтрацію за стилем та кольором. Прекрасне доповнення до будь-якого набору інструментів!
17. Шлях до красивіших градієнтів
Градієнти часто не такі плавні, як ви хотіли. Проблема полягає у різких краях, особливо там, де градієнт починається та закінчується. Щоб допомогти вам досягти кращих результатів, Андреас Ларсен створив невелику плагін для Sketch: Easing Gradient.
Він робить ваші градієнти невидимими настільки, щоб вони не заважали тексту або інтерфейсу користувача, який ви розміщуєте на їх тлі. Можна встановити плагін за допомогою Sketch Runner або завантажити пакет через GitHub. Також є плагін PostCSS та рішення з розробленим вручну кодом, що виконують ті ж функції.
18. Райдужні градієнти з React
Джош Комо любить творчі досліди. У своєму чудовому особистому блозі він показує акордеони зі звуковими ефектами, яскравий режим конфетті, вікна, що несподівано спливають, і багато іншого. Плюс там є серія відмінних посібників з розробки всіляких незвичайних ефектів за допомогою React (прим. бібліотека JavaScript, яка використовується для створення інтерфейсу користувача).
Наприклад, Джош поділився тим, як він працював над Magical Rainbow Gradients (прим. Magical Rainbow Gradients) за допомогою CSS Houdini та React Hooks (див. GitHub repo). За допомогою цього чудового невеликого гайду ваш сайт або програма будуть світитися. В прямому сенсі.
19. Створюйте барвисті фони в кілька кліків
Незвичайний фоновий малюнок може привернути увагу до публікації у блозі, покращити ваш профіль у соціальних мережах або просто освіжити головний екран вашого телефону. Щоб спростити створення абстрактних та барвистих фонів, проект Мое Амайї Cool Backgrounds (прим. Круті Фони) тепер поєднує найкращі генератори фону JavaScript в одному місці.
20. Поради щодо режиму високої контрастності
Дизайн для різних режимів відображення може зробити сюрпризи. Зокрема, режим високої контрастності Windows відрізняється від режимів відображення інших операційних систем. Windows повністю замінює створені кольори тими, які вказано користувачем. На щастя, більшість проблем, які з цим пов'язані, часто існують прості рішення.
У своїй статті “Поради щодо режиму високої контрастності” Сара Хіґлі ділиться п'ятьма рекомендаціями щодо усунення помилок. Вони включають стилі фокусу, що настроюються, роботу з SVG, використання медіа-запиту -ms-high-contrast щодо вибору кольору користувачем, а також те, що потрібно враховувати при тестуванні. Це невеликий зручний гайд. Якщо ви хочете краще розібратися в цій темі, Сара також зібрала вам додаткові матеріали для ознайомлення.
21. Перевірка контрастності кнопки
З'ясувати, чи добре ваші кнопки контрастують з фоном, допоможе Button Contrast Checker (прим. програма перевірки контрастності кнопок). Вона створена компанією Aditus. Введіть свій домен у спеціальне поле, і інструмент перевірить, чи кнопки на вашому сайті відповідають критеріям WCAG 2.1 (прим. Web Content Accessibility Guidelines, Посібник із забезпечення доступності веб-контенту).
Для надання практичних результатів відбувається перевірка стану кнопок за замовчуванням, при наведенні та при кліку, а також фону, що межує з ними. Корисна деталь: щоразу, коли ви скануєте сторінку, результати зберігаються в унікальній URL-адресі, якою ви можете поділитися зі своєю командою. Це ваш найцінніший маленький помічник.
22. Посібник з налаштування темного режиму
Перемикач темного/світлого режиму – це зручна функція сайту. Але як її продати? Себастьяно Герріеро проведе вас через усі необхідні кроки. За допомогою його підходу ви можете створити темний режим для вашого проекту. Далі можна використовувати властивості CSS (прим. CSS Custom Properties), щоб переключити світлий режим, який стоїть за замовчуванням, на темний шляхом додавання певного атрибута в код.
Висновок Існують сотні сайтів, присвячених роботі з кольором. Ми сподіваємося, що деякі з перерахованих тут будуть корисними для вашої повсякденної роботи і, найголовніше, допоможуть вам уникнути деяких трудомістких рутинних завдань. Джерело: smashingmagazine.com