Сочетание цветов подобрать: Названия цветов, от Абрикоса до Янтаря — ColorScheme.Ru
18 сервисов для подбора цветов и палитры
Грамотно подобранная палитра для сайта, логотипа, презентации — уже половина успеха. От выбора цветов зависит визуальное представление проекта, то, как его будут воспринимать пользователи. Но поиск удачных сочетаний требует специальных знаний и навыков. Упростить работу помогают специальные генераторы.
Почему важно правильно подбирать цвета
Зрительное восприятие — основной источник получения информации. В первые полторы минуты мы оцениваем внешний вид, форму и цвет — так возникает первое впечатление. При этом до 90% впечатлений основаны на восприятии цветов.
Цвета влияют на поведение, настроение и эмоции. Например, покупатель может подсознательно решиться на покупку за доли секунды, просто потому что ему понравилось сочетание оттенков. По статистике, цвет влияет на 85% решений о покупке. При этом 93% покупателей обращают внимание только на внешний вид.
Когда пользователь заходит на сайт, сначала ему в глаза бросается дизайн и цветовое решение.
Уже с первых минут посетитель может принять решение, остаться на странице или закрыть её. Это зависит от того, вызывает ресурс положительные эмоции или отрицательные, какие ассоциации возникают при просмотре конкретной цветовой гаммы. Применение цветов в онлайн- и офлайн-проектах основано на теории и психологии цвета, которые изучают гармоничные сочетания и эмоциональное восприятие цветов.
Есть много разных подходов к работе с цветом. Для профессионального подбора палитры нужно учитывать огромное количество факторов. Например, Институт цвета Pantone (Pantone Color Institute) ежегодно анализирует глобальные тренды, модные показы, социальные сети, кинематограф и выставки современного искусства, чтобы выбрать цвет года.
Сейчас для выбора цветовой гаммы не обязательно привлекать специалистов или проводить масштабные и длительные исследования. Есть специальные сервисы с функцией подбора цветов, готовыми палитрами или возможностью создать собственное решение.
Генераторы цветовых палитр
Генератор цветовой палитры или цветовое колесо — это программа на основе 12 основных цветов на цветовом круге.
Такой инструмент помогает создать определённую палитру вокруг выбранного цвета или оттенка. Получается гармоничное сочетание, которое можно использовать в веб-дизайне, полиграфических материалах и других дизайнерских проектах.
Я собрала 18 сервисов, которые помогают найти подходящее цветовое сочетание для любого проекта. Рассказываю, как они работают, чем отличаются и для каких задач подходят.
| Что нужно сделать | Какой сервис подходит |
| Сгенерировать палитру автоматически | Coolors Paletton Adobe Color CC My Brand New Logo Seo Checker: Color palette and schemes generator ColorScheme Color-Wizard ColorSpace Colormind CopyPalette Color Grid |
| Создать палитру вручную | Color Hunt |
| Выбрать готовую палитру | In Color Balance Color Hunt Palette Generator Brand Colors |
| Посмотреть сочетание белого шрифта с фоном выбранного цвета | Get UI Colors |
| Подобрать фотографии в нужной цветовой гамме на Flickr | Multicolr Tineye |
| Найти изображения по цвету на Shutterstock | Shutterstock Spectrum |
Coolors
Сайт. https://coolors.co/Версии для работы. Веб-версия, iOS- и Android-приложения, плагин для Figma, расширение Chrome, расширение Adobe. Стоимость. Бесплатно с ограничениями, про-версия — $3 в месяц. Язык интерфейса. Английский. |
Coolors позволяет изучить трендовые палитры или создать свою собственную. Для начала работы нужно запустить генератор, кликнув на кнопку старта, — откроется рандомная палитра. Можно сохранить цвета, скопировать код оттенка или экспортировать палитру. Чтобы вызвать другую схему достаточно нажать на пробел.
При помощи дополнительных настроек можно настраивать цвета, создавать градиенты, извлекать цвета из фотографий и прочее.
Кроме веб-сервиса, у Coolors есть мобильные приложения, расширение для Chrome и Adobe, плагин для Figma.
В бесплатной версии можно создавать палитры до пяти цветов, использовать готовые схемы, сохранять до пяти цветов и десяти палитр. Про-версия без рекламы обойдётся в $3 в месяц.
Она значительно расширяет функционал и пригодится тем, кто ежедневно работает с цветами.
Paletton
| Сайт. https://paletton.com Версии для работы. Веб-версия. Стоимость. Бесплатно + донаты по желанию. Язык интерфейса. Английский, чешский. |
Сервис Paletton умеет создавать палитры на основе цветового круга и выбранного оттенка. При этом можно использовать разные схемы. Можно выбрать базовый оттенок и тип схемы, настроить насыщенность, яркость и контрастность.
Клик по любому тону на схеме откроет окошко с подробной информацией о цвете. Можно посмотреть, как будут видеть схему люди с разным типом зрения или при разных условиях. После выбора подходящей палитры доступны примеры веб-страниц в похожей гамме. Готовую схему можно открыть в виде таблицы с описанием каждого цвета, а потом экспортировать в подходящем формате.
Весь функционал сервиса доступен бесплатно. Есть возможность отправки донатов, но только по добровольному желанию пользователя.
Adobe Color CC
| Сайт. https://color.adobe.com/ru/create/color-wheel Версии для работы. Веб-версия. Стоимость. Бесплатно — базовый функционал. Дополнительные возможности при авторизации с Adobe ID. Язык интерфейса. Русский, английский + ещё 17 языков. |
Сервис помогает создать палитру с учётом выбранного правила гармонии цветов и цветового режима. Основной цвет можно выбрать на круге или указать код вручную, а потом — скопировать коды цветов. Плюс работы с продуктами Adobe: после входу в систему можно сохранить палитру в Creative Cloud и потом использовать её в Photoshop, Illustrator, Fresco и других сервисах Adobe.
Ещё из интересных возможностей сервиса:
- проверка контрастности;
- проверка сочетания фона, текста и графики;
- извлечение палитры и градиентов из загруженных изображений;
- просмотр готовых палитр и копирование их содержимого.
Перед началом работы можно подробно изучить текущие тренды — в Adobe Color CC для этого есть целый раздел.
Color Hunt
| Сайт. https://colorhunt.co/ Версии для работы. Веб-версия, расширение для Chrome. Стоимость. Бесплатно. Язык интерфейса. Английский. |
При изучении Color Hunt мне показалось, что создавать палитру здесь не очень удобно — подбирать цвета надо вручную, и без профессиональных навыков здесь не обойтись. Но сервис предлагает огромную библиотеку готовых палитр. Это поможет, если вы пока не понимаете, какую цветовую схему хотите, и вам нужно посмотреть разные варианты.
Среди готовых схем в Color Hunt можно посмотреть популярные, новые или случайные, а также выбрать направление гаммы. Палитры, которые понравились, можно добавить в свою коллекцию и вернуться к ним позднее. Чтобы увидеть описание использованных оттенков и скопировать их, просто кликните на схему.
А ещё у Color Hunt есть расширение для Chrome, которое показывает случайную палитру из лучших коллекций при каждом открытии новой вкладки.
In Color Balance
| Сайт. http://color.romanuke.com/ Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Русский, английский, немецкий, испанский, польский, французский. |
Этот сайт — персональное творчество дизайнера, колориста и фотографа Alex Romanuke. Все представленные палитры подобраны им вручную. При этом для каждой схемы показывается фотография в соответствующих оттенках — это классно иллюстрирует сочетание цветов на примере реального проекта.
Самостоятельно создать палитру здесь не получится, но можно выбрать что-то из готовых вариантов. Это работает так: укажите один-два цвета или параметры схемы (тёплые, холодные, пастельные или контрастные тона) — и система сама подберёт подходящие варианты. Клик по схеме откроет страницу выбранной палитры с описанием и кодами оттенков.
My Brand New Logo
| Сайт. https://mybrandnewlogo.com/ru/generator-cvetovoi-palitry Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Русский, английский + ещё 16 языков. |
Сервис My Brand New Logo от одноимённого производителя логотипов предлагает компьютерный подбор схемы. Генератор автоматически выбирает цвета, которые хорошо сочетаются. От пользователя требуется лишь указать вид цветов — яркие, винтажные, серые, гладкие.
В палитре, которая понравилась, можно скопировать код каждого оттенка по отдельности или получить код CSS для использования в своих веб-проектах.
Seo Checker: Color palette and schemes generator
| Сайт. https://seochecker.it/color-palette-generator Стоимость. Бесплатно. Язык интерфейса. Английский. |
Этот генератор палитр и схем работает на основе указанного пользователем цвета.
Можно ввести код нужного оттенка или выбрать цвет. После запуска инструмент создаст несколько схем. Каждая из них основана на сочетании цветов по кругу Иттена: триадная, тетрадная, монохроматическая, аналогичная, дополнительная, раздельная комплементарная. Как с ними работать в вручную, мы писали в отдельной статье.
После генерации палитр Seo Checker покажет описание основного цвета и его градации — как схема будет выглядеть при разных параметрах насыщенности, контрастности, яркости. Коды полученных цветов можно скопировать.
ColorScheme
| Сайт. https://colorscheme.ru/ Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Русский. |
Инструмент создаёт палитру на основе цветов, которые пользователь выбирает на цветовом круге. При этом доступно много настроек: выбор цветовой схемы и цветовой модели, настройка оттенка, проверка видимости палитры при разных типах зрения.
После генерации схему можно скорректировать вручную.
В готовой палитре можно открыть список цветов и поделиться ссылкой на постоянный адрес схемы. Есть возможность проверить, как на фоне выбранного цвета будет выглядеть текст.
Дополнительные возможности ColorScheme:
- просмотр примеров светлой и тёмной страницы в выбранной палитре;
- каталог цветов — можно посмотреть название и код понравившегося оттенка;
- отдельный каталог с названием автомобильных красок и именами цветов в HTML.
Довольно широкий функционал позволяет использовать сервис для разных онлайн- и офлайн-проектов, связанных с дизайном.
Color-Wizard
| Сайт. http://www.colorsontheweb.com/Color-Tools/Color-Wizard Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Английский. |
Простой генератор для быстрого создания цветовых схем.
Просто выберите нужный цвет или укажите его код. За несколько секунд система сгенерирует несколько популярных схем и возможные вариации оттенков. Для каждого цвета будет прописан код.
Если вы не знаете код нужного основного цвета, а вручную подобрать не получается, зайдите в раздел «Цвета в интернете». Здесь можно найти подходящий вариант, скопировать его код и вставить в генератор.
Palette Generator
| Ссылка на сайт. https://palettegenerator.colorion.co/ Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Английский. |
Максимально простой генератор с узким функционалом. Palette Generator рандомно создаёт цветовые палитры при нажатии на пробел. Чтобы скопировать код, нужно просто кликнуть по нему или соответствующему цвету.
ColorSpace
| Ссылка на сайт. https://mycolor.space/ Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Английский. |
Для создания палитры в ColorSpace достаточно указать цвет или его код — и запустить генерацию. Система сформирует 25 палитр по разным схемам на основе указанного цвета. Для каждого оттенка в палитре указан код. Также в сервисе можно создавать двух- и трёхцветные градиенты из выбранных цветов.
Colormind
| Ссылка на сайт. http://colormind.io/bootstrap/ Версии для работы. Веб-сервис. Стоимость. Бесплатно. Язык интерфейса. Английский. |
Colormind помогает подобрать оптимальные цвета для веб-сайта. Можно запустить рандомную генерацию или выбрать и закрепить основной цвет, а система подберёт подходящие оттенки.
Главная особенность сервиса — можно сразу посмотреть пример веб-страницы в созданной палитре. При этом по каждому цвету даются рекомендации, как его использовать и для каких целей.
CopyPalette
| Сайт. https://copypalette.app/ Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Английский. |
CopyPalette генерирует монохромную палитру на основе выбранного базового цвета. Дополнительно можно настроить контрастность и указать количество вариаций цветов.
В созданной схеме HEX-код каждого цвета копируется по отдельности. Или готовую палитру можно скопировать в SVG и добавить Figma или Sketch для дальнейшего использования в дизайне.
Дополнительные сервисы для работы с цветом
В некоторых случаях создание полноценной цветовой палитры не требуется, но есть другие задачи по работе с цветом. Например, найти понравившийся оттенок или подобрать фото, подходящее к вашей палитре. Вот несколько полезных сервисов.
Color Grid
| Сайт. https://0to255.com/ Версии для работы. Веб-сервис. Стоимость. Язык интерфейса. Английский. |
Бесплатно. Простой инструмент для поиска оттенков. Для работы с сервисом нужно выбрать цвет на главной странице вручную или указать его код. Клик на нужный оттенок откроет полную схему с отображением цветов и кодов.
Brand Colors
| Ссылка на сайт. http://brandcolors.net/ Версии для работы. Веб-сервис. Стоимость. Бесплатно. Язык интерфейса. Английский. |
Здесь можно посмотреть фирменные цвета известных компаний. Список брендов с удобной поисковой строкой доступен на сайте.
Все цветовые схемы, которые показывает сервис, можно скопировать простым кликом или скачать в разных форматах.
Get UI Colors
| Сайт. http://getuicolors.com/ Версии для работы. Веб-версия. Стоимость. Бесплатно. Язык интерфейса. Английский. |
Get UI Colors помогает проверить, как будет выглядеть текст белого цвета на цветном фоне.
Для этого просто выберите цвет и кликните на кнопку, чтобы посмотреть результат.
Multicolr Tineye
| Сайт. https://labs.tineye.com/multicolr/ Версии для работы. Веб-версия Стоимость. Бесплатно — пробная версия, лицензия — от $200 в месяц. Язык интерфейса. Английский. |
Инструмент помогает подбирать фото по цветам среди 20 млн. изображений с Flickr.
Для запуска сервиса выберите до пяти цветов, дополнительно можно указать теги. Система покажет изображения в подходящей цветовой гамме. При клике по фото открывается окошко с названием и кратким описанием. Клик по названию перенаправит на страницу изображения во Flickr. Пробной бесплатной версии хватает для периодического использования. Но если нужно обрабатывать большое количество запросов, понадобится лицензия.
Shutterstock Spectrum
| Сайт. https://www.shutterstock.com/search/spectrum Версии для работы. Стоимость. Бесплатно в течение месяца после подписки с ограничением на 10 фото, далее — $29 в месяц. Язык интерфейса. Русский, английский + ещё 23 языка. |
Веб-версия. Инструмент помогает искать изображения с лицензией royalty-free — она предполагает оплату за использование контента только в момент покупки.
В настройках Shutterstock Spectrum есть функция выбора по цвету. Если указать оттенок, система найдёт фото в соответствующей гамме. Дополнительно можно выбрать и другие параметры, например, тип изображения или ориентацию фото.
Изображение можно увеличить для просмотра, сохранить, скачать или найти похожие.
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Статьи почтой
Раз в неделю присылаем подборку свежих статей и новостей из блога.
Пытаемся
шутить, но получается не всегда
Наш юрист будет ругаться, если вы не примете 🙁
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️
*Вместе с курсом вы будете получать рассылку блога Unisender
Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
4 лучших онлайн инструмента — Блог о визуальной грамотности
Alexey Demin
Цвет широко используется в дизайне, — он позволяет «оживить» содержание — создать смысловую связь элементов, наполнить работу эмоциями и настроением.
Начинающие дизайнеры берут случайные цвета, но есть способы использовать цвет более осмысленно. Рассмотрим 4 таких способа, организованных по принципу от простого к сложному.
1. Использовать известную гамму
На сайте brandcolors.net собрано более 500 сочетаний цветов известных брендов. Яндекс, Google, Burger King используют одну палитру во всех своих продуктах. Эти бренды и их цвета знакомы и любимы многими. Наберите название в строке поиска или полистайте страницу, нажмите на нужный бренд и цвет: его код скопируется в буфер обмена.
Цветовые палитры, используемые известными брендами, на сайте brandcolors.net2. Выбрать готовую профессиональную палитру
Самый простой способ — взять готовое сочетание цветов. Не обязательно каждый раз изобретать велосипед, ведь гармоничные сочетания известны давно. Зайдите на colordrop.io и выбирайте. На сайте сотни профессиональных 4-цветных палитр. Выбрав нужную, нажмите и скопируйте коды цветов с панели, открывшейся справа.
Выбор цвета на colordrop.
ioКроме этого, сервис содержит готовую подборку из 24 цветов плоского дизайна. Нажмите слева под названием «Flat Colours» и берите код понравившегося оттенка.
Плоские цвета на colordrop.io3. Определить палитру цветов понравившейся фотографии или картинки
Этот способ чуть сложнее. Но и эффектнее.
- На сайте coolors.co в верхней панели слева найдите значок фотоаппарата, нажмите на него. Откроется окно загрузки изображения.
- Можно выбрать фото или картинку с понравившейся цветовой гаммой с компьютера или скопировать ссылку в пустую графу.
- Сервис определит сочетание цветов (внизу под загруженной картинкой).
- Изменять отдельные цвета этой палитры можно, отмечая их и выбирая точку на фото, с которой нужно взять цвет.
- Кнопка «Collage» сохраняет получившуюся палитру с кодами цветов на компьютере.
- Кнопка «Auto» генерирует новые сочетания на основе того же фото.
- Нажмите «Ок» и перейдете на главную страницу сайта для дальнейшей работы с палитрой.
Главная страница сайта не менее функциональна. Здесь можно подобрать оттенки отдельных цветов или собрать новую палитру, заменив отдельные цвета.
4. Создать свою цветовую гамму онлайн
Загрузив фото на тот же сайт coolors.co, можно не только определить код цвета, но и создать собственные сочетания. Для этого нажмите пробел — сервис автоматически создает сочетание из 5-ти цветов.
На каждом цвете 4 значка-кнопки:
- Alternative shades — Оттенки цвета (темнее и светлее),
- Drag (Передвинуть цвет вправо или влево по палитре),
- Adjust (Настроить тон, насыщенность, яркость и др.),
- Lock (зафиксировать цвет).
Собранную таким образом палитру можно сохранить в pdf, png файлах, отправить ссылкой и др.
Понравилось это:
Нравится Загрузка.
..
- Основы дизайна
%d такие блоггеры, как:
Полное руководство по выбору цветовой палитры для курса электронного обучения
Как однажды пел король поп-музыки: «Неважно, черный это или белый… главное, чтобы вы использовали хорошие, дополняющие друг друга варианты из цветового круга». Хорошо, может быть, это не были точные тексты , но дело в том, что цвет, с точки зрения его места в дизайне электронного обучения, весьма важен, и знание того, как его использовать, может создать или разрушить ваши курсы электронного обучения.
Как вы решаете, какие цвета куда и как использовать? Ответ можно найти во вращающемся чуде, известном нам как 9.0008 Цветовой круг . Этот изящный радужный круг, с которым вы, вероятно, познакомились еще в начальной школе, на самом деле является чрезвычайно полезным инструментом для создания бесшовных организованных дизайнов.
Цветовой круг представляет собой круговую диаграмму, показывающую, как цвета соотносятся друг с другом на основе основных цветов: красного, желтого и синего.
Эти цвета и их потомки (вторичные и третичные цвета) живут в спектре, который создает своего рода генеалогическое древо для всех пигментов, которые мы знаем и любим.
Смотрите это короткое видео для простого и понятного объяснения.
Проще говоря, цветовой круг состоит из:
- Основные цвета : Красный, желтый и синий.
- Дополнительные цвета : Оранжевый (смесь красного и желтого), зеленый (синий+желтый) и фиолетовый (красный+синий).
- Третичные цвета : Эти цвета получаются при смешивании основного цвета со вторичным. Например, синий, смешанный с зеленым, дает нам сине-зеленый цвет, который большинство людей классифицирует как «зеленый», но с более голубым оттенком.
Хотя дизайнерам электронного обучения свойственно интуитивно понимать, что работает вместе, более эффективно и последовательно, если вы знаете, почему выбираете те цвета, которые выбираете.
Из-за этого фантастически хорошая идея иметь базу знаний в теории цвета. Вот почему вы должны понимать некоторые доступные «формулы» для определения цветовых схем.
Цвета, сгруппированные вместе, известны как схема , и эти оттенки выбираются на основе определенных теорий того, что визуально работает, а что нет. Хотя правила могут быть созданы для того, чтобы их нарушать, вы должны знать правила, прежде чем сможете успешно с ними работать. При выборе схемы помните об одной или нескольких из этих теорий, чтобы ваши цвета пели гармонично.
1) Монохромный: мне все равно Монохромная цветовая схема является наиболее простой и безопасной цветовой схемой. Эта теория группировки цветов основана на выборе одного цвета, такого как желтый, и создании оттенков (полученных путем добавления белого к исходному цвету) и оттенков (полученных путем добавления черного к исходному цвету) этого цвета. Насыщенность также может быть рассмотрена в этой теме, и ее немного сложнее понять.
Насыщенность — это не светлый или темный цвет, а интенсивность (от бледного до сильного) и то, насколько далеко от настоящего серого находится цвет.
См. этот пример:
Использование : Монохромные схемы выглядят чистыми и бесшовными и могут создать прочную связь с одной идеей или фирменным стилем на вашем слайде.
Недостаток и как это исправить : При работе только с одним цветом наиболее очевидная проблема может заключаться в том, что просто недостаточно контраста, чтобы привлечь внимание, и дизайн может быстро надоесть. Чистый черный или белый цвет можно сочетать с основным цветом, чтобы сделать акцент там, где это необходимо. Посмотрите эти примеры , чтобы понять как это сделать.
Читайте также: 6 способов использования цветовой психологии для разработки эффективного электронного обучения
2) Противоположности: действительно ли они притягиваются? Да, противоположные цвета действительно притягиваются, и в отличие от пары, у которой нет ничего общего, у противоположных цветов гораздо больше шансов на успех в долгосрочной перспективе.
Теория цветовых противоположностей основана на идее, что цвет, находящийся на одной стороне колеса, будет создавать визуальный интерес в сочетании с цветом, находящимся прямо напротив него на цветовом круге.
Альтернативное название этой схемы — «дополнительная цветовая схема» , и вы можете думать об этом как о том, что один цвет компенсирует то, чего не хватает другому цвету, потому что они дополняют друг друга.
См. пример:
.
Использование : Из-за оппозиции эта схема создает очень контрастный и яркий эффект, который отлично подходит для энергичной презентации. Дизайнеры электронного обучения часто используют основной цвет для фона слайда и используют противоположный цвет для выделения определенных областей, таких как кликабельные элементы или важные сообщения.
Недостаток и как его исправить : Эти комбинации иногда могут быть слишком громкими и неприятными для некоторых дизайнов.
Чтобы смягчить это, попробуйте комбинировать цвета, которые являются оттенком или оттенком исходных цветов.
Практически дополнительные цвета : Еще один способ сохранить большую часть такого же яркого контраста, но без резкости или чрезмерного диссонанса, — это выбрать почти дополнительные цвета. Это цвета, которые не являются или напротив друг друга, а вместо этого являются цветом, который находится рядом с противоположностью. Например, вместо сочетания красного и зеленого вы можете соединить красный и синий или зеленый и оранжевый. Подумайте об этих примерах, и вы, вероятно, сможете представить множество вещей, в которых используются эти цветовые комбинации.
3) Аналогичные цвета: Цвет по соседству Аналогичные цвета — это как когда парень и девушка по соседству собираются вместе. Это цвета, которые живут рядом друг с другом, поэтому есть некоторый контраст, но не такая крайняя разница, которая возникает с цветами, живущими на противоположных концах страны.
См. этот пример:
Использование : Из-за сходства эти цвета выглядят настолько сбалансированными и равномерно подобранными, что они не просто мальчик и девочка по соседству, они также футбольный капитан и главная чирлидерша, танцующая в выпускной вечер. Они хорошо сочетаются друг с другом, у них одни и те же друзья, они могут полностью зависать на странице и выглядеть безупречно.
Чтобы правильно использовать эту схему, выберите доминирующий цвет, например красный, вспомогательный цвет, например красно-оранжевый, и третий, например красно-фиолетовый, который будет выступать в роли причудливого помощника, который подарит короткие, своевременные шутки или акценты.
Недостаток и как его исправить : Аналоговые цветовые схемы имеют ту же проблему, что и монохромные схемы, в том смысле, что они могут надоесть из-за слишком большого сходства. Чтобы разбить это, выберите цвета, которые не слишком похожи.
Чем больше уровней и сложности у вашего цветового круга, тем больше у вас шансов выбрать цвета, которые слишком близки друг к другу, поэтому часто лучше выбирать из более простого 12-ступенчатого колеса. Вы также можете использовать четвертый аналогичный цвет, создавая большую разницу между первым и последним выбором. Также можно использовать белые и черные акценты.
Также прочтите: 6 основных принципов графического дизайна, которыми можно руководствоваться при разработке дизайна курса электронного обучения футбольная команда, образуя любовный треугольник, который отдаляет их все дальше и дальше на цветовом круге.
Хорошо, не совсем так, но речь идет о трех цветах, равномерно расположенных на цветовом круге, что почти одно и то же. В частности, в 12-ступенчатом цветовом круге это означает три цвета, отстоящие друг от друга на 120 градусов, а их точки образуют равносторонний треугольник.
Использование : Это равномерное расстояние создает баланс гармонии и контраста, который лучше всего использовать, выбрав доминирующий цвет и используя два других в качестве акцентов.
Даже использование бледных или тонированных версий этих схем по-прежнему будет представлять значительный визуальный интерес.
Недостаток и как это исправить : На самом деле у триадной цветовой схемы не так много недостатков, хотя вам все равно нужно убедиться, что ваши цвета не конкурируют друг с другом непривлекательным образом. Если вы хотите, чтобы общий дизайн выглядел более мягко, используйте менее насыщенные цвета.
При проектировании помните об этих теориях и своем цветовом круге, это поможет вам сосредоточиться. Наличие отправной точки, такой как единая цветовая схема, может помочь вам принять правильные, практичные дизайнерские решения при создании курсов и сократить количество времени, которое вы тратите на попытки понять неосязаемое «на этой странице что-то не так». » проблема. По мере использования схем вы узнаете, что работает для вашей эстетики, а что нет, и как включать еще более сложные цвета, чтобы вы могли не только быть дизайнером, который заставляет это работать, но и знать, как делать это последовательно.
Узнайте больше о психологии цвета и электронном обучении:
- Психология цвета: используйте теплые оттенки, чтобы зарядить энергией свое электронное обучение
- Психология цвета: используйте холодные цвета, чтобы задать правильное настроение для обучения
- Психология цвета: как цвета влияют на обучение?
ССЫЛКИ:
Основы теории цвета для веб-дизайнеров. http://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/
Руководство для начинающих по использованию силы цвета в веб-дизайне. http://speckyboy.com/2010/05/19/beginners-guide-to-using-the-power-of-color-in-web-design/
5 приложений с цветовыми схемами, которые помогут вам создать свой идеал Палитра
При проектировании для экранов (или вообще при разработке чего угодно) есть правильные цвета, а есть неправильные.
Несмотря на то, что «правильный» цвет для бренда может быть… скажем… красный , трудно увидеть бесцветный дизайн и сказать: «Да, этот бренд и его веб-сайт должны использовать красный цвет в качестве основного».
Вот почему мы обычно используем генераторы цветовых схем , чтобы ускорить процесс проектирования. Не подбирать за нас цвета (это было бы слишком просто!), а вдохновлять нас. В результате у нас получится руководство по стилю, которое вы передадите вместе с остальной частью проекта, чтобы все в дальнейшем придерживались одних и тех же тщательно подобранных цветов. Вы даже можете использовать Sympli Handoff для доставки своих руководств по стилю и цветовых токенов из вашей системы дизайна. Передача цветов
в Sympli Handoff Принято считать, что цвета влияют на эмоции, хотя это не совсем так. Это не работает так, как будто красный означает любовь, академические исследования показывают, что все три значения цвета: оттенок, насыщенность и яркость — влияют на возбуждение людей, а не на эмоции.
Яркие цвета, например, вызывают больше волнения, чем тусклые. Затем вступают в действие личные ассоциации, и они могут быть очень сильными и обусловленными культурой. Если мы видим красно-розовый баннер вокруг Дня святого Валентина — мы знаем, к чему все идет.
Как дизайнеры, мы используем цветовые комбинации и цвета в контексте, чтобы рассказать историю и направить внимание и опыт пользователя, используя созданные нами цветовые палитры, которые имеют более «спокойные» и более «активные» цвета.
Потрясающее приложение цветовой палитры делает то, что позволяет нам настраивать схемы в соответствии с дизайном, над которым мы работаем, что выходит далеко за рамки визуально привлекательного списка модных цветов «плоского дизайна». Давайте взглянем на 5 лучших приложений для цветовых схем.
1. Coolors
Ссылка: Coolors
Coolors — моя первая мысль о приложении с цветовой схемой , так как вы не только можете быстро переключаться между красивыми цветовыми схемами с помощью пробел бар, но вы можете настроить их по своему вкусу, настроив оттенок, яркость, насыщенность и температуру, а также переключив альтернативные оттенки.
Кроме того, благодаря возможности сохранять/экспортировать цвета, и используют ряд фильтров, помогающих справиться с восемью различными типами дальтонизма, этот инструмент становится чрезвычайно полезным, хотя и не слишком сложным в использовании. Вы также можете просматривать популярные цветовые палитры, чтобы узнать, что популярно среди других дизайнеров.
Плюсы: есть версия для iOS, расширение для Chrome и даже надстройка для Photoshop и Illustrator.
Palettr
Ссылка: Palettr
Palettr — очень интересное приложение с цветовой схемой. Допустим, у вас есть смутное представление о том, какие цвета вы хотели бы использовать, но вам нужно немного вдохновения. О чем заставляют вас думать ваши цвета? Пляж… так… желто-голубой? Городская улица… серые и черные? Это сработает не во всех случаях, но если на ум придет конкретное ключевое слово, найдите его на Palettr, и они найдут изображения из 500px.com , используя это ключевое слово, и извлеките из него общие цвета!
Плюсы: Необычный способ поиска идей для палитры, который вы можете использовать, чтобы ускорить процесс мышления.
3. Генератор цветовых палитр от Canva
Ссылка: Генератор цветовых палитр от Canva
Генератор цветовых палитр — это небольшое веб-приложение, созданное талантливой командой Canva, которое извлекает общие цвета из изображений, которых вы загрузили. , поэтому, если у вас есть дизайн, в котором изображения/фотографии уже определены, и вы строите на их основе цветовые схемы ( или , вам просто нравятся цвета на изображении), Генератор цветовых палитр от Canva был бы идеальным решением.
Плюсы: Создание палитры из вашего изображения может быть более быстрым способом создания дизайна на основе изображений.
4. Adobe Color Wheel
Ссылка: Adobe Color Wheel
Adobe Color Wheel, хотя и не самый визуально привлекательный из интерфейсов, предлагает более профессиональный набор инструментов для смешивания цветов. Если вы знаете свои аналогичные цвета из составных, дополнительных и триадных цветов, то этот инструмент для вас.
Кроме того, если вы любите другие приложения Adobe, такие как Illustrator, Photoshop, Brackets.io (секретный редактор Adobe с открытым исходным кодом) и Adobe XD, вы обнаружите, что они плавно и превосходно интегрируются с Adobe Color CC.
Плюсы: цветовых схем, созданных сообществом.
5. Colordot
Ссылка: Colordot
Colordot предназначен для тех, кто действительно знает свои цвета или может определить цвет, который им нужен, когда он его видит. При каждом движении мыши на экране отображается новый цвет вместе с его шестнадцатеричным кодом (хотя большинство приложений с цветовыми схемами позволяют изменить этот параметр по умолчанию, если вы используете RGBA). Think : огромная интерактивная палитра цветов, где вы имеете полный контроль! Когда вы нажимаете (чтобы выбрать цвет), экран разделяется пополам, отображая выбранный вами цвет с одной стороны и новую палитру цветов с другой стороны. Промойте и повторите, пока не получите все свои цвета, или выберите похожие цвета, чтобы сравнить их!
Плюсы: Больше контроля над цветами, так как вы сами выбираете их.
Минусы: Ручной, так что если ищете быстрый автоматизированный способ — выбирайте другой из нашего списка.
Важность цветового контраста
При выборе цветов цветовой схемы следует учитывать, насколько хорошо они контрастируют с другими цветами, которые вы используете, в первую очередь, как текст контрастирует с фоном. Хорошо контрастный текст повысит удобочитаемость и читабельность, а в конечном счете и доступность макета.
Имейте в виду, что используемые вами цвета должны соответствовать Руководству по доступности веб-контента (WCAG), чтобы сделать ваш дизайн доступным для всех, как в светлой, так и в темной теме.
Мне нравится использовать приложение Color Contrast Analyzer для Windows и MacOS, которое сравнивает цветовой контраст между двумя выбранными вами элементами и дает этому соотношению оценку «пройдено» или «не пройдено» WCAG.
Хотя это отдельное приложение, для Sketch существует подключаемый модуль анализатора цветового контраста , как упоминалось в нашей статье 5 Smashing Sketch Plugins .