Московская цветовая палитра

Инструменты выбора палитры цветов

Если начинать создавать дизайн с нуля, иногда очень сложно выбрать цветовую схему, которая хорошо подойдет именно для этого дизайна. Ниже перечислены некоторые инструменты, которые помогут вам сделать правильный выбор цветовой схемы.

COLOURLovers является уютным домом для миллионов пользовательский цветовых палитр. Вы сможете посмотреть коллекцию и выбрать ту, которая вас вдохновит или найти нужные цвета.

Один из самых известных инструментов для работы с цветом. Этот инструмент позволяет не только просматривать существующие палитры, но и создавать свои собственные.

Pictaculous — инструмент, который позволяет вам создавать палитру из загруженного изображения.  Также он совместим с двумя вышеперечисленными инструментами Kuler и Colourlovers.

Ищите готовые цветовые схемы на сайтах:

• ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
• COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
• Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
• Flat UI Colors — отличный набор цветов для UI, один из самых популярных
• Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
• Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
• Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр

Удачные примеры гармоничных комбинаций в интерьере. Фото

Мы собрали фотографии реальных дизайнов с гармоничным оформлением.

Сочетание цветов в светлом интерьере. Пастельные гаммы

Тона в стиле «пастель» действуют на человека умиротворяющее, успокаивают, расслабляют, не напрягают глаза. Комнату они делают воздушной, светлой, просторной. Подходят больше для спальни и гостиной. Нежные пастельные цвета лучше всего сочетаются с белым, серым и более яркими своими оттенками.

Сочетание темных цветов в интерьере

Темные краски придают дизайну изысканность, элегантность. Подходят для просторных и хорошо освещаемых солнцем комнат. Можно скорректировать пропорции любого помещения, подчеркнуть его детали. Но лучше комбинировать со светлыми тонами.

Какие цвета сочетаются с белым?

С белым можно совмещать любые цвета и оттенки. Все будут одинаково гармоничны. На белоснежном фоне ни один тон не покажется вам лишним.

Сочетание серого цвета с другими цветами

Отлично сочетается с базовыми – белым, черным, бежевым, коричневым, со светлыми пастельными, например, молочно-сливочным. Хорошую компанию составят также светло-сиреневый, голубой, розовый. Удачно можно комбинировать с монохромным оформлением – черно-белым.

Цветовые гаммы в бежевом интерьере

Классический вариант – сочетание с оттенками, которые близки к бежевому, например, с белым, светло- коричневым, песчаным, карамельным, персиковым. В комбинацию удачно войдут и природные краски – зеленый, голубой, бирюзовый, розовый.

Для контрастных акцентов к бежевому подойдут глубокие синие, красные, фиолетовые, черные оттенки.

Правильные сочетания с коричневым цветом

Коричневый – не спектральный тон, а полученный путем смешивания зеленого и красного или оранжевого и синего. Идеально, если дополнить его природными тонами, например, зеленым, желтым.

Не нужно делать оформление помещения в одних только коричневых оттенках, иначе будет выглядеть скучным.

Коричневый преображается, если в комнате многоуровневое освещение, а также многообразные фактуры и текстуры.

Идеальные сочетания зеленого цвета в интерьере

Зеленый имеет множество полутонов, выбрать для него компанию сложно. Но можно совмещать с любыми красками одной насыщенности.

Совместимость цветов с фиолетовым

Можно в одной комнате сочетать сразу несколько родственных оттенков это тона, но главное не перебарщивать. Оптимально, если базой является белый, серый или бежевый, а фиолетовый используется как яркое дополнение.

Подходящие цвета к синему

Классика – сочетание белого и насыщенного синего. Такой дуэт придает помещению роскошности, легкости, свежести. Неординарным личностям подойдет союз синего с солнечным желтым, который задает позитивное настроение. Комбинация с красным возможна, но смотрится экстравагантно.

Для оформления детской комнаты подойдет союз синего с нежными голубыми полутонами или бирюзовым цветом.

Удачные сочетания мятного цвета в интерьере

Мятный тон – идеальное решение, если хотите создать воздушный дизайн в квартире, который способствует расслаблению и отдыху. Палитра универсальная, гармонирует со многими оттенками.

Прекрасно смотрится со своими производными – зелеными и синими полутонами. Еще мяту можно смешать с бирюзой, фуксией, ярко-желтым, красным.

Гармоничный дизайн в оливковой цветовой гамме

Оливковый относится к теплой гамме, дружелюбен со многим тонами. Если сочетать с холодными и светлыми, комната будет шире визуально, а если с темными – создастся приватная, интимная атмосфера, что подходит для интерьеров спальни.

Гармоничные сочетания голубого, бирюзового оттенка

Бирюза вступает в гармонию со многими цветами, позволяя воплощать необычные дизайнерские решения. С ней красиво смотрятся и пастельные (белый, бежевый, голубой), и сочные оттенки (красный, фиолетовый, зеленый) тона.

Сочетание серебряного цвета в интерьере

Серебристые краски можно комбинировать с позолотой, пурпурным, розовым, синим тоном, а также со светлыми оттенками серого – кварцевым, стальным, перламутровым.

Очень надеемся, что вы узнали много нового и полезного для себя в нашей статье. С нетерпением ждем ваших комментариев. Спасибо, что вы с нами.

Варианты сочетания цветов в интерьере

Цвет играет огромную роль в создании интерьера, с его помощью можно создать комфорт и уют, визуально увеличить или уменьшить пространство, поэтому надо ответственно относиться к такому вопросу, как сочетание.

Комплексное сочетание

Этот вариант считается универсальным. Используются классические оттенки, к ним относятся бежевый, серый и белый. Комбинируя эти тона с другими, вы сможете создать классическое решение, которое будет всегда выглядеть современно и красиво. В таком случае вам не надо будет постоянно менять интерьер комнаты при покупке новой мебели, замене покрытия пола или других элементов.

Комплексное сочетание

Триада или сочетание 3 цветов

Использование трех основных цветов, которые всегда гармонично сочетаются между собой и могут использоваться в равных мерах. Сочетание красного, синего и желтого вызывает прилив эмоций и бодрость. Если они используются в чистом виде, то получается яркое и насыщенное решение. Если же использовать полутона, то оформление комнаты получается менее агрессивным и более комфортным.

Триада оттенков

Аналогичное сочетание

Этот вариант предусматривает использование 2-3 типов оттенков, которые в цветовом круге расположены рядом. Вам надо выбрать подходящий, в котором решили оформить комнату и в цветовом круге справа или слева от него выбрать несколько тонов. Данное решение простое и оригинальное, а подобрать два-три аналогичных цвета несложно.

Аналогичное сочетание

Раздельно-комплементарное сочетание

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

Раздельно-комплементарное сочетание

Тетрада или сочетание 4 цветов

В этом случае схема состоит из основного цвета и есть еще два, которые его дополняют, а четвертый служит для выделения акцента. Это создает довольно интересный эффект, который вызывает положительные эмоции. В основном такие расцветки предпочитает молодежь или люди, находящиеся в постоянном движении и быстром ритме.

Тетрада в интерьере

Тип 2 – Корпоративные сайты и сервисы

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

В зависимости от того, какова цель вашего сайта, фоновый цвет должен отличаться.

Продвижение бренда

Если вы хотите создать запоминающийся образ компании, используйте для фона различные оттенки преобладающего цвета или цвета бренда.

Все потому, что цвет напрямую влияет на узнаваемость бренда (помните пример про Кока-Колу?) Когда вы используете различные оттенки цвета своего бренда в качестве фона, вы усиливаете его и делаете более запоминающимся для клиентов.

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

Продвижение сервиса

Если вашей целью является привлечение внимания к сервису или к портфолио с вашими работами, используйте белый или нейтральный цвет фона.

Как и в случае с информационными ресурсами, не нужно перегружать сайт и отвлекать внимание пользователей от контента, который вы хотите донести. Добавив белый или светлый фон в цветовые схемы для сайта, вы заострите внимание на контенте:

Новые генераторы цветовой палитры для веб-дизайна

49. Sip APP

Приложение Sip создает, редактирует, систематизирует и обменивается цветами. Приложение позволяет настраивать цветовой формат, а также генерировать и передавать новые. Эта функция «быстрого доступа» действительно полезна, она предлагает вам быстрее выбирать и использовать цвета. Он имеет сенсорную панель для непосредственного взаимодействия с вашими цветами.

50. Цветовые данные в Интернете

Данные веб-цвета дают цветовую палитру, используемую на популярных веб-сайтах. Вы входите с помощью цветового круга. Прежде всего, это также дает возможность разбить объединение цветов на веб-сайте.

51. ФОТОКОПА

PHOTOCOPA – продвинутый дизайнер цветовых схем от colourlover. Созданные цветовые палитры вдохновлены фотографиями. Вам необходимо загрузить фотографию из Интернета, а затем поместить ее в галерею для последующего использования или сохранить в качестве вдохновения для других пользователей.

52. Цвета

Colorion имеет три основных варианта: основные цвета, кнопки градиента и палитру изображения для материала. Кроме того, палитры имеют полный цвет, материальный дизайн и плоский дизайн пользовательского интерфейса. Вы нажимаете на цвет, чтобы получить подходящую цветовую палитру. Генератор цветовой палитры поставляется с панелью поиска, в которой вы можете найти корневой цвет и связанные палитры, которые лучше всего соответствуют вашим целям.

53. Палитра материального дизайна.

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

54. Безопасный цвет

Безопасные для цвета дизайнеры визуализации с красивыми и доступными цветовыми схемами, основанными на рекомендациях WCAG по соотношению фона и текста. Чтобы использовать генераторы цветовой палитры, вы вводите цвет фона, а затем выбираете стиль вашего текста. Генератор цветовой палитры также имеет возможность редактирования текста. Для получения окончательного результата нажмите на цветовую палитру создания. Он создаст цветовую палитру, которая идеально сочетается и обеспечит высокий контраст в соответствии с рекомендациями WCAG.

55. В дизайне семян

В Design seed для вас уже созданы цветовые палитры. Палитры, вдохновленные изображениями, не создаются с помощью компьютерной палитры цветов. Человеческий аспект этих цветовых схем делает их более вдохновляющими.

56. Цветовая гамма.

В разделе «Подача цветов» вы выбираете один основной цвет, а затем выбираете стиль из следующих вариантов: Аналогичный, Триадный, Квадратный, дополнительный и разделенный-дополнительный. Таким образом, Color supply – это генераторы цветовой схемы, которые затем выбирают оттенки и смеси, а затем определяют, какой цвет лучше всего соответствует вашим требованиям. Он известен среди новых генераторов цветовой палитры.

57. Цвета материала

Материальный дизайн – это продукт Google. Он набирает обороты в дизайнерском сообществе. На голову выше остальных – чистый и простой пользовательский интерфейс генератора цветовой палитры. Карточки – это основная часть материального дизайна. Инструмент генерации цветовой палитры ориентирован на универсальную доступность.

58. ColorDrop.io

В галерее цветовых схем ColorDrop есть различные комбинации плоских цветов. Вы выбираете цветовую палитру. Кроме того, вы также можете скопировать шестнадцатеричные / RGB коды цветов.

59. BrandColors

BrandColors имеет коллекцию цветовых кодов официальных брендов по всему миру. Генератор цветовой палитры предоставляет информацию о том, какие цвета используют ведущие бренды. Красный и Синий более популярны среди ведущих брендов и стартапов.

Таблица сочетания цветов в интерьере в зависимости от типа помещения

Так как цвет влияет на психоэмоциональное состояние человека и биохимические процессы в организме, в комнатах, имеющих различное назначение, сочетание оттенков при оформлении интерьера будет разным.

Интерьер гостиной

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

Создаём палитру

Иногда создание палитры кажется легче, чем это есть на самом деле.  Некоторые опытные дизайнеры могут создавать палитру с нуля; другие черпают вдохновение с других сайтов или внешних источников (рассматривая цвета на упаковке с чипсами  в хозяйственном магазине или находя нужные решения в природе).

Палитры разрабатываются различными способами, всё зависит от мыслительного процесса дизайнера. У некоторых так намётан  глаз, что они могут сочетать цвета на лету, просматривая цветную книгу или глядя на фотографию.  Создавая палитру, удостоверьтесь, что сделали цветовые комбинации для каждого элемента Вашего веб-сайта.

Чтобы использовать цвета, которые Вы нашли на других источниках, возьмите цифровую фотографию и откройте ее в каком-нибудь графическом редакторе, например в Adobe Photoshop. Увеличьте масштаб изображения, пока пиксели не станут  чётко видны и используйте инструмент «Пипетка», чтобы выбрать оттенки, которые Вам понравились,  затем запишите их значения.

Таблица Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.

• 255 255 204#FFFFCC
• 255 255 153#FFFF99
• 255 255 102#FFFF66
• 255 255 51#FFFF33
• 255 255 0#FFFF00
• 204 204 0#CCCC00
• 255 204 102#FFCC66
• 255 204 0#FFCC00
• 255 204 51#FFCC33
• 204 153 0#CC9900
• 204 153 51#CC9933
• 153 102 0#996600
• 255 153 0#FF9900
• 255 153 51#FF9933
• 204 153 102#CC9966
• 204 102 0#CC6600
• 153 102 51#996633
• 102 51 0#663300
• 255 204 153#FFCC99
• 255 153 102#FF9966
• 255 102 0#FF6600
• 204 102 51#CC6633
• 153 51 0#993300
• 102 0 0#660000
• 255 102 51#FF6633
• 204 51 0#CC3300
• 255 51 0#FF3300
• 255 0 0#FF0000
• 204 0 0#CC0000
• 153 0 0#990000
• 255 204 204#FFCCCC
• 255 153 153#FF9999
• 255 102 102#FF6666
• 255 51 51#FF3333
• 255 0 51#FF0033
• 204 0 51#CC0033
• 204 153 153#CC9999
• 204 102 102#CC6666
• 204 51 51#CC3333
• 153 51 51#993333
• 153 0 51#990033
• 51 0 0#330000
• 255 102 153#FF6699
• 255 51 102#FF3366
• 255 0 102#FF0066
• 204 51 102#CC3366
• 153 102 102#996666
• 102 51 51#663333
• 255 153 204#FF99CC
• 255 51 153#FF3399
• 255 0 153#FF0099
• 204 0 102#CC0066
• 153 51 102#993366
• 102 0 51#660033
• 255 102 204#FF66CC
• 255 0 204#FF00CC
• 255 51 204#FF33CC
• 204 102 153#CC6699
• 204 0 153#CC0099
• 153 0 102#990066
• 255 204 255#FFCCFF
• 255 153 255#FF99FF
• 255 102 255#FF66FF
• 255 51 255#FF33FF
• 255 0 255#FF00FF
• 204 51 153#CC3399
• 204 153 204#CC99CC
• 204 102 204#CC66CC
• 204 0 204#CC00CC
• 204 51 204#CC33CC
• 153 0 153#990099
• 153 51 153#993399
• 204 102 255#CC66FF
• 204 51 255#CC33FF
• 204 0 255#CC00FF
• 153 0 204#9900CC
• 153 102 153#996699
• 102 0 102#660066
• 204 153 255#CC99FF
• 153 51 204#9933CC
• 153 51 255#9933FF
• 153 0 255#9900FF
• 102 0 153#660099
• 102 51 102#663366
• 153 102 204#9966CC
• 153 102 255#9966FF
• 102 0 204#6600CC
• 102 51 204#6633CC
• 102 51 153#663399
• 51 0 51#330033
• 204 204 255#CCCCFF
• 153 153 255#9999FF
• 102 51 255#6633FF
• 102 0 255#6600FF
• 51 0 153#330099
• 51 0 102#330066
• 153 153 204#9999CC
• 102 102 255#6666FF
• 102 102 204#6666CC
• 102 102 153#666699
• 51 51 153#333399
• 51 51 102#333366
• 51 51 255#3333FF
• 51 0 255#3300FF
• 51 0 204#3300CC
• 51 51 204#3333CC
• 0 0 153#000099
• 0 0 102#000066
• 102 153 255#6699FF
• 51 102 255#3366FF
• 0 0 255#0000FF
• 0 0 204#0000CC
• 0 51 204#0033CC
• 0 0 51#000033
• 0 102 255#0066FF
• 0 102 204#0066CC
• 51 102 204#3366CC
• 0 51 255#0033FF
• 0 51 153#003399
• 0 51 102#003366
• 153 204 255#99CCFF
• 51 153 255#3399FF
• 0 153 255#0099FF
• 102 153 204#6699CC
• 51 102 153#336699
• 0 102 153#006699
• 102 204 255#66CCFF
• 51 204 255#33CCFF
• 0 204 255#00CCFF
• 51 153 204#3399CC
• 0 153 204#0099CC
• 0 51 51#003333
• 153 204 204#99CCCC
• 102 204 204#66CCCC
• 51 153 153#339999
• 102 153 153#669999
• 0 102 102#006666
• 51 102 102#336666
• 204 255 255#CCFFFF
• 153 255 255#99FFFF
• 102 255 255#66FFFF
• 51 255 255#33FFFF
• 0 255 255#00FFFF
• 0 204 204#00CCCC
• 153 255 204#99FFCC
• 102 255 204#66FFCC
• 51 255 204#33FFCC
• 0 255 204#00FFCC
• 51 204 204#33CCCC
• 0 153 153#009999
• 102 204 153#66CC99
• 51 204 153#33CC99
• 0 204 153#00CC99
• 51 153 102#339966
• 0 153 102#009966
• 0 102 51#006633
• 102 255 153#66FF99
• 51 255 153#33FF99
• 0 255 153#00FF99
• 51 204 102#33CC66
• 0 204 102#00CC66
• 0 153 51#009933
• 153 255 153#99FF99
• 102 255 102#66FF66
• 51 255 102#33FF66
• 0 255 102#00FF66
• 51 153 51#339933
• 0 102 0#006600
• 204 255 204#CCFFCC
• 153 204 153#99CC99
• 102 204 102#66CC66
• 102 153 102#669966
• 51 102 51#336633
• 0 51 0#003300
• 51 255 51#33FF33
• 0 255 51#00FF33
• 0 255 0#00FF00
• 0 204 0#00CC00
• 51 204 51#33CC33
• 0 204 51#00CC33
• 102 255 0#66FF00
• 102 255 51#66FF33
• 51 255 0#33FF00
• 51 204 0#33CC00
• 51 153 0#339900
• 0 153 0#009900
• 204 255 153#CCFF99
• 153 255 102#99FF66
• 102 204 0#66CC00
• 102 204 51#66CC33
• 102 153 51#669933
• 51 102 0#336600
• 153 255 0#99FF00
• 153 255 51#99FF33
• 153 204 102#99CC66
• 153 204 0#99CC00
• 153 204 51#99CC33
• 102 153 0#669900
• 204 255 102#CCFF66
• 204 255 0#CCFF00
• 204 255 51#CCFF33
• 204 204 153#CCCC99
• 102 102 51#666633
• 51 51 0#333300
• 204 204 102#CCCC66
• 204 204 51#CCCC33
• 153 153 102#999966
• 153 153 51#999933
• 153 153 0#999900
• 102 102 0#666600
• 255 255 255#FFFFFF
• 204 204 204#CCCCCC
• 153 153 153#999999
• 102 102 102#666666
• 51 51 51#333333
• 0 0 0#000000

Coolors.Co

Сервис Coolors.co включает в себя самые разнообразные и мощные инструменты для создания цветовых палитр. Вы можете не только самостоятельно пробовать свои силы, но и вдохновляться тысячами цветовых сочетаний, которые составили другие пользователи.

Как и на Colorscheme.ru и Adobe Color, разработчики предусмотрели функционал, который позволит создать дизайн, доступный для дальтоников. Считаю это важным, т.к. этой проблеме много времени никто не уделяет.

Сервис также отлично справляется с задачами, опирающимися на составление палитр, опираемых на различные классические цветовые схемы.

Дополнительный функционал

• Генерация палитры из загруженной фотографии
• Создание коллажа из загруженной фотографии + сгенерированная палитра
• Палитры градиентов
• Создание градиентов
• Проверка контрастности цвета текста и фона
• Поддерживает HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, RAL, HKS, COPIC, PRISMACOLOR, LUV и HWB
• Приложение для IOS + аддон для Adobe + расширение для Chrome

Всё семейство

И так, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета — монохроматической (monochromatic) и аналогичной/сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании, эта схема может придать веб-сайту аккуратный, чистый вид. Аналогичная схема цветов с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. аналогичная схема весьма похожа на монохроматическую.

Рис. F.: «Аналогичная» схема очень напоминает монохроматическую

Ликбез: что важно учитывать

Сочетания цветов в web-дизайне подбираются под задачу. Важна не только гармония, но и правильное визуальное сообщение. Ведь по статистике только одни цвета (без учёта графики и других элементов дизайна) на 90% определяют первое впечатление пользователя.

Цветовой круг: гармония, тёплые и холодные цвета

Самый примитивный вариант цветового круга

Цветовой круг — основа теории цвета в веб-дизайне. Он помогает подобрать сочетаемые цвета — например, те, которые находятся напротив, гармонично соотносятся между собой. Это самый простой вариант комбинации — комплементарная цветовая схема. И таких схем очень много.

Другие варианты гармоничных цветовых схем

Также цветовой круг делится на две части — холодная (синий, зелёный, фиолетовый) и тёплая (желтый, оранжевый, красный). Зачастую тёплые оттенки считают стимулирующими, бодрящими, жизнерадостными, энергичными, а холодные — расслабляющими, умиротворяющими, успокаивающими.

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

Цвет как инструмент управления вниманием и настроением

Грамотное использование цветов улучшает юзабилити и повышает конверсию, помогает пользователям принимать решения. Но нужно помнить, что цвет — субъективная категория. Зачастую люди понимают цвета индивидуально и это зависит от их личного опыта. Кого-то желтый цвет в веб-дизайне  стимулирует к покупке, а кого-то будет раздражать.
Поэтому чтобы создавать интуитивно понятные интерфейсы и не допускать ошибок, не стоит закапываться в психологию цветов, достаточно знать их популярные значения в UI.

Красный

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

Он часто ассоциируется с эмоцией недовольства, поэтому опции «Пожаловаться» и «Заблокировать пользователя» нередко имеют этот цвет.

Фрагмент интерфейса Telegram

Зелёный. Означает успешный результат, завершение процесса. Побуждает к действию, поэтому им часто маркируются кнопки «Зарегистрироваться» и «Купить».

Сообщение об успешном завершении регистрации

Синий. Синий цвет в веб-дизайне по данным исследования Джо Халлока предпочитает 42% пользователей. Он создаёт нейтральный фон и вызывает чувство доверия, спокойствия и безопасности. Именно поэтому многие соцсети и мессенджеры выбирают его в качестве основного. Кроме того, дальтоникам легче увидеть синие оттенки.

Синий в интерфейсе ВКонтакте

Чёрный. Черный цвет в веб-дизайне часто используют в качестве фона. Также возможность выбрать dark mode или тёмный режим — признак заботы о пользователе. Ведь он уменьшает нагрузку на глаза, что увеличивает комфорт и эффективность работы, а на некоторых устройствах тёмная тема помогает экономить заряд батареи.

Тёмный режим в Google Chrome

Серый. Серый цвет в веб-дизайне выглядит нейтрально, поэтому серо-голубые оттенки часто используются для второстепенных элементов интерфейсов. Также отказ от ярких цветов и пёстрых сочетаний — забота о людях с эпилепсией. Ведь они могут вызвать приступ. Поэтому серый — это не скучно, а предусмотрительно.

Большая часть интерфейса — оттенки серого

Как выбирать, смешивать и сочетать цвета в UI-дизайне

Если у вас природное чутье на подбор и смешивание цветов — смело полагайтесь на него. Однако если при выборе цветов вы не чувствуете себя уверенно, можете воспользоваться специальные приемами.

Цветовой круг RGB

Здесь мы используем цветовой RGB-круг с 12 сегментами (которые представляют собой первичные, вторичные и третичные цвета). Я для простоты разбила его на секции — но в приложениях для дизайна обычно для выбора цвета будет предложен цветовой круг с мягким переходом цветов. У Adobe также есть отличный инструмент, который поможет с подбором цвета.

Однотонные цвета

Однотонные цвета

Выбрав один цвет, двигайтесь к центру круга — и вы получите красивый оттенок. Такое цветовое сочетание выглядит аккуратно и продуманно.

Близкие по оттенку цвета

Близкие по оттенку цвета

В этом случае выбираются цвета, находящиеся рядом, — двигаться можно в любом направлении цветового круга. Хороший результат дают цвета, расположенные в пределах 90°. Такой подход добавляет динамики и позволяет сохранить изящество.

Дополняющие цвета

Дополняющие цвета

Если нужно что-то очень яркое — это ваш вариант. Сначала выберите основной цвет, а затем добавьте дополняющий — с противоположной стороны круга. Добавляя однотонные цвета, можно получить красивое сочетание.

Раздельные дополняющие цвета

Раздельные дополняющие цвета

К дополняющим цветам можно добавить близкий по оттенку цвет — тогда палитра будет еще ярче: такой подход называется «раздельные дополняющие цвета».

Эти три подхода помогут сформировать палитру, но есть и другие методы — например, триадный и тетрадный, — на которых тоже можно поучиться выбирать цвета.

Похожие записи:

Клиент-сервис: как определить, что не так с вашим сервисом, и исправить это Как устроен бизнес по производству шоколада Как проверить позиции сайта в поисковых системах Ирина зарькова жена бориса зарькова кто она Десять книг, которые научат ребенка программированию Где можно взять машину в лизинг физическому лицу и какими будут условия в 2021 году?