Створіть нескінченні кольорові палітри з Хромою

Sep 11, 2025

Як

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

3 Величезні кольорові тенденції на 2018 рік

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

Виберіть колір, будь-який колір

The Khroma training screen with the chosen colour bar up top — Навчальний екран Хрома з обраним кольором

Одна з захоплюючих речей про Хрома полягає в тому, що ви отримуєте, щоб навчити алгоритм АІ, щоб діяти як розширення вашого кольорового дизайнера мозку. Виклик полягає в тому, що для того, щоб зробити це добре, ви повинні вибрати 50 кольорів, які вам подобаються. При побудові алгоритму я намагався зробити це працювати з менш, але результати не були досить хорошими.

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

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

Щоб почати навчання вашого генератора Хрома, перейдіть до khroma.co і натисніть персоналізувати. Ви побачите певну інструкцію та нескінченну стінку кольорових блоків. Клацніть на одній з цих блоків, додатиме його до вибраного бару, а інший буде видалити його. Найкращий спосіб продовжити прокрутити та вибрати будь-який колір, який вискакує як щось, що ви можете використовувати в дизайні. Це добре працює для перших 30 кольорів.

Час уточнити

На цьому етапі ви хочете шукати в обраній кольоровій панелі і подивитися, як вона формує. Якщо це було ваші кольори документів на ескізі, ви б маєте все, що вам потрібно? Наступні 20 кольорів звідси повинні бути про уточнення. Оскільки ви продовжуєте трохи підказки, з'явиться з деякими пропозиціями, наприклад, "збираючи ще більше пурпурних, жовтих, а бліді кольори покращить ваші результати". Я рекомендую намагатися дотримуватися цих, але не бійтеся продовжувати вибір нових кольорів. Звідси ви повинні вибрати ще 10, приносить до 40.

Подивіться в барі знову. Чи бачите ви кольори, які практично однакові? Це не незвично, щоб вибрати ті ж кольори більше, ніж один раз, так як, ну, вам подобаються. Але це не буде корисним для вашого алгоритму.

У мене був друг, спробуйте ранній прототип, і він сказав мені, що його результати не були дуже хорошими. "Це в основному синій", - сказав він. - Ви вибрали в основному сині у вашій підготовці? Я відповів. "Так. Мені дуже подобається синій".

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

Киньте в деяких підстановках

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

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

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

Створіть свою колекцію

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

Знайдіть правильний комбо

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar — Робити палітру з пошуком # 8BD2CA та # 32514e. Якщо ви не бачите нічого, що вам подобається, спробуйте переставити кольори у рядку пошуку

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

Існують різні параметри, які ви можете шукати з: Type, Hue, Name, Hex та RGB. Типи включають темні, легкі, пастельні, блідо, глибокі, приглушені, багаті, яскраві та неонові. Відтінки теплі, прохолодні, червоні, помаранчеві, жовті, зелені, блакитні, сині, фіолетові, фіолетові та пурпурні. Є 1,566 конкретних кольорів, які ви можете шукати з іменами, як "Royal Blue" та "Кава". Нарешті, він приймає значення Hex та RGB.

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

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

The details of each pair of colours. Everything can be copied with just a click for quick usage — Деталі кожної пари кольорів. Все можна скопіювати лише за допомогою клацання для швидкого використання

Одне велике використання випадків, коли пошук особливо корисний, коли у вас є два кольори, які вам подобаються, і хочете знайти до них доповнення. Ви б просто вступили в ці точні кольори (# 8BD2CA та # 32514E сказати) і шукати під шаблоном палітри.

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

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

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

Користувацькі зображення

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — П'ять шаблонів Хрома - ви можете побачити палітру, додаючи ще пару кольорів до суміші

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

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

Я сподіваюся, що ви даєте Хрома спробувати і знайти це корисне та потужне доповнення до вашого дизайну інструментарію.

Ця стаття була опублікована у випуску 303 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити випуск 303 або Підписатися тут .

Пов'язані статті:

5 порад для розуміння теорії кольорів
Кращі кольорові інструменти для веб-дизайнерів
7 порад, щоб управляти кольором краще в Інтернеті

Створіть нескінченні кольорові палітри з Хромою

Виберіть колір, будь-який колір

Час уточнити

Киньте в деяких підстановках

Створіть свою колекцію

Знайдіть правильний комбо

Користувацькі зображення

Як - Найпопулярніші статті

10 способів побудови кращих 3D-світових середовищ

Намалюйте цифру за п'ять хвилин

Як працює в 3D-програмах

Як створити лаву лаву з Keyshot

Як створити дивовижні ефекти з фігурами CSS

Намалюйте портрет, як ван Гог

Створіть додаток, який збирає дані датчиків

Зробити композит у Photoshop

Категорії