Таблица «безопасных» цветов
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Таблица «безопасных» цветов
При создании изображения для публикации в сети главной проблемой является правильная передача цвета на разных типах мониторов и в разных браузерах. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов. В результате пользователь на своем экране может увидеть совсем не то, что хотел изобразить автор.
Вашему вниманию предлагается палитра цветов, рекомендуемых для экранного дизайна.
Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов. Эти цвета везде будут отображаться без искажений.
Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего. Эти градации — 00, 33, 66, 99, CC, FF. Над каждым цветом указаны значения RGB (для создания цвета в графическом редакторе или задания в CSS).
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 |
FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 |
FFCC99 | FF9966 | FF6600 | CC6633 | 993300 | 660000 |
FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 |
FFCCCC | FF9999 | FF6666 | FF3333 | FF0033 | CC0033 |
CC9999 | CC6666 | CC3333 | 993333 | 990033 | 330000 |
FF6699 | FF3366 | FF0066 | CC3366 | 996666 | 663333 |
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 |
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 |
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 |
CC99CC | CC66CC | CC00CC | CC33CC | 990099 | 993399 |
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 |
CC99FF | 9933CC | 9933FF | 9900FF | 660099 | 663366 |
9966FF | 6600CC | 6633CC | 663399 | 330033 | |
CCCCFF | 9999FF | 6633FF | 6600FF | 330099 | 330066 |
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 |
3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 |
6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 |
0066FF | 0066CC | 3366CC | 0033FF | 003399 | 003366 |
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 |
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 |
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 |
CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC |
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 |
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 |
66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 |
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 |
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 |
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 |
66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 |
CCFF99 | 99FF66 | 66CC00 | 66CC33 | 669933 | 336600 |
99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 |
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 |
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 |
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 |
Смотрите также:
Приятные Flat цвета (hex + rgb). Подобрать цвет
- Главная
- Услуги по веб-сайту
- Работы по сайту
- Cоздание | запускНаписание технического задания, разработка и тестирование
- Поддержка | редактированиеВедение и сопровождение, исправление ошибок и сбоев
- Анализ | продвижениеАнализ, улучшение и оптимизация, реклама и раскрутка
- Заказать работу
- Заказать создание сайтаФорма заказа на разработку сайта
- Заказать обслуживаниеФорма заказа на ведение, исправление, поддержку сайта сайта
- Заказать продвижениеФорма заказа по анализу и продвижению сайта
- Тарифы и цены на работы
- Тарифы, цены и срокиГотовые тарифы на разработку, сопровождение и продвижение сайта. Сроки и перечень работ
- Рассчитать стоимостьУдобная форма-калькулятор для расчёта стоимости создания сайта под ключ
- Komp-Msk
- Наше портфолиоКлиенты, которым мы создали/продвинули сайт
- Гарантия на работыПо веб-сайту. Создание. Поддержка. Продвижение
- Работы по сайту
- Компьютерная помощь
- Проблемы и их решения
- Компьютеры и ноутбукиДиагностика, ремонт, настройка, сборка, чистка
- Вирусы | ПрограммыУдаление вирусов. Установка, настройка Windows и программ. Настройка интернета и сети
- Абонентское обслуживание | Удаленная помощь через интернет
- Поддержка и обслуживание пользователейДистанционные и профилактические работы. Удаленное решение проблем
- Цены | Оставить заявку
- Вызвать мастераОтправить нам заявку
- Цены и тарифыЦены на компьютерную помощь на дому, удаленно, тарифы на обслуживание
- Komp-Msk
- Как мы работаем. О Komp-MskВсе услуги. Коротко о нас. Чем мы Вам поможем.
- Гарантия на работыПо ремонту и настройке компьютера
- Проблемы и их решения
- Услуги дизайнера
- Разработка дизайна, стиля
- Дизайн полиграфииРазработка макетов логотипа, визитки, баннера, этикетки, буклета, листовки
- Услуги фотографа, обработка фото и видео
- Работа фотографа. Монтаж видеоСъемка и обработка фотографий. Создание и редактирование видеороликов
- Цены | Оставить заявку
- Цены на все услугиПрайс на работы дизайнера полиграфии, фотографа, видеомонтаж
- ПортфолиоНекоторые наши работы
- Разработка дизайна, стиля
- Статьи и работы
- Все содержимоеЛента статей. Главная страница с рубриками
- Веб-сайтыВеб-сервер и хостинг. Системы управления сайтами. Домены. Верстка. Модули.
- Ремонт и настройка компьютеровОшибки, неисправности, варианты решений. Настройка программ
- Дизайн и внешний видГрафические редакторы. Сервисы. Цвета, фоны, картинки, иконки
- Разное
- Трудовые будни IT-мастераНекоторые примеры повседневных работ.
- Играть в 2048Побъете наш рекорд?
- Смешные заявки по ремонту компьютеровНекоторые слова и фразы, которые я услышал настраивая и ремонтируя компьютеры, добавляйте свои
- Все содержимоеЛента статей. Главная страница с рубриками
- Контакты
- О насОсобенности работы и отличия от других компаний. Преимущества
- Контакты и обратная связьРежим работы. Как с нами связаться. Отправить сообщение
- 7-(977)-896-96-26
- Прием звонков ежедневно с 10:00 до 20:00
- [email protected]
- Прием онлайн заказов ежедневно с 9:00 до 21:00
- Главная
- Услуги по веб-сайту
- Работы по сайту
- Cоздание | запуск – Написание технического задания, разработка и тестирование
- Поддержка | редактирование – Ведение и сопровождение, исправление ошибок и сбоев
- Анализ | продвижение – Анализ, улучшение и оптимизация, реклама и раскрутка
- Работы по сайту
- Заказать работу
- Заказать создание сайта – Форма заказа на разработку сайта
- Заказать обслуживание – Форма заказа на ведение, исправление, поддержку сайта сайта
- Заказать продвижение – Форма заказа по анализу и продвижению сайта
- Заказать работу
- Тарифы и цены на работы
- Тарифы, цены и сроки – Готовые тарифы на разработку, сопровождение и продвижение сайта. Сроки и перечень работ
- Рассчитать стоимость – Удобная форма-калькулятор для расчёта стоимости создания сайта под ключ
- Тарифы и цены на работы
- Komp-Msk
- Наше портфолио – Клиенты, которым мы создали/продвинули сайт
- Гарантия на работы – По веб-сайту. Создание. Поддержка. Продвижение
- Komp-Msk
- Close
- Компьютерная помощь
- Проблемы и их решения
- Компьютеры и ноутбуки – Диагностика, ремонт, настройка, сборка, чистка
- Вирусы | Программы – Удаление вирусов. Установка, настройка Windows и программ. Настройка интернета и сети
- Проблемы и их решения
- Абонентское обслуживание | Удаленная помощь через интернет
- Поддержка и обслуживание пользователей – Дистанционные и профилактические работы. Удаленное решение проблем
- Абонентское обслуживание | Удаленная помощь через интернет
- Цены | Оставить заявку
- Вызвать мастера – Отправить нам заявку
- Цены и тарифы – Цены на компьютерную помощь на дому, удаленно, тарифы на обслуживание
- Цены | Оставить заявку
- Komp-Msk
- Как мы работаем. О Komp-Msk – Все услуги. Коротко о нас. Чем мы Вам поможем.
- Гарантия на работы – По ремонту и настройке компьютера
- Komp-Msk
- Close
- Услуги дизайнера
- Разработка дизайна, стиля
- Дизайн полиграфии – Разработка макетов логотипа, визитки, баннера, этикетки, буклета, листовки
- Разработка дизайна, стиля
- Услуги фотографа, обработка фото и видео
- Работа фотографа. Монтаж видео – Съемка и обработка фотографий. Создание и редактирование видеороликов
- Услуги фотографа, обработка фото и видео
- Цены | Оставить заявку
- Цены на все услуги – Прайс на работы дизайнера полиграфии, фотографа, видеомонтаж
- Портфолио – Некоторые наши работы
- Цены | Оставить заявку
- Close
- Статьи и работы
- Все содержимое – Лента статей. Главная страница с рубриками
- Веб-сайты – Веб-сервер и хостинг. Системы управления сайтами. Домены. Верстка. Модули.
- Все содержимое – Лента статей. Главная страница с рубриками
Вы когда-нибудь замечали, что предприятия быстрого питания пользуются одной палитрой? Преобладают красный и желтый оттенки, немногие бренды, которые не используют эти цвета, замещают их оранжевым, розовым и другими теплыми, яркими цветами. Все потому, что они следуют Теории Цвета. Она гласит, что некоторые цвета обладают способностью вызывать определенные чувства, эмоции или поведение людей. Если вы знаете эти скрытые свойства, то сможете использовать их на своем сайте для достижения желаемого результата, как это делают предприятия быстрого питания
Оказывается, красный цвет действует как стимулятор (вызывая аппетит, пробуждая голод) и привлекает к себе внимание, тогда как желтый создает ощущение скорости и срочности. Классические примеры – Макдональдс, KFC, Стардог!s. Теперь подумайте о Вашем собственном сайте и его дизайне. С большой долей вероятности в процессе его создания цвета выбирались без учета Теории Цвета, обходясь привычными цветами Вашего бренда.
Познакомившись с этой теорией, Вы сможете проанализировать, какие чувства испытывают посетители на вашем сайте, и заставить психологию цвета работать на Вас.
Что такое Теория Цвета
Интересный факт, о котором мало кто знает — художники используют Теорию Цвета уже сотни лет. Но история ее применения в бизнесе и маркетинге намного короче.
Одна из первых современных трактовок Теории Цвета была написана около ста лет назад Альбертом Манселлом (Albert Munsell). Манселл придумал для описания цветовых свойств трехкомпонентную модель, в которой цвет выявляется с помощью трех понятий – значения/ценности (англ. value), оттенка (англ. hue) и насыщенности/яркости (англ. croma).
В последние несколько десятилетий, использование Теории Цвета пришло и в интернет-маркетинг. Веб-дизайнерам пришлось сильно потрудиться, чтобы описать понимание того, как человеческий мозг воспринимает цвета в цифровом контексте.
Зачем применять Теорию Цвета на ваших сайтах
В настоящее время Теория Цвета становится все актуальнее в сфере интернет-маркетинга в связи с ростом значимости показателя отказов и других статистик взаимодействия. Когда посетитель за доли секунды решает, доверять сайту или нет, важна любая мелочь. И применение Теории Цвета на практике в данном случае может оказать решающее воздействие на сознание посетителя, заставив его остаться на странице.
При создании сайтов дизайнеры используют Теорию Цвета для улучшения эстетики, читабельности страниц, и, что более важно, для получения нужного психологического воздействия. Вместо того чтобы использовать цвета, которые просто будут неплохо смотреться, Вы можете основать свой дизайн на получении реального эффекта — используя опыт исследований воздействия цвета на наше мышление. Опираясь на Теорию Цвета, Вы сможете достигнуть максимальной вовлеченности пользователей и свести к минимуму вероятность того, что они не заинтересуются.
Как подбирать цвета для сайта
Заманчиво использовать минималистичный дизайн при разработке веб-сайта. Скромность привлекает, поскольку Вы можете выбрать, на что пользователь обратит своё внимание в первую очередь — выделяя необходимый контент в нужных местах страницы. Но играя с цветовыми сочетаниями Вы получаете один из самых простых способов выделить ваш сайт из общего «серого» интернета.
Использование контрастных цветов поможет в этом, и Ваш сайт покажется пользователям свежим и интересным. Наш мозг естественным образом интерпретирует контрастные цвета как четкий и смелый дизайн, из-за чего целевые страницы будут казаться привлекательнее.
Как найти взаимодополняющие, но контрастирующие цвета? Используйте цветовое «колесо». Цветовой круг – это проверенный инструмент, который используется, чтобы показать отношения между первичными, вторичными и третичными цветами. Но не стоит выбирать цвета, находящиеся друг напротив друга на цветовом круге – получится слишком агрессивный контраст. В интернете много вариаций подобного инструмента, которые помогут вам выбрать яркие, контрастные, но сочетаемые цвета.
Психология цвета
Перейдем к самому важному в этой статье — главным постулатам Теории Цвета. Все цвета спектра уникально красивы, но при этом каждый из них по-своему влияет на человеческое настроение и эмоции.
Настроение и эмоции
Отвлекитесь на минутку от дел и задумайтесь о цветах, которые Вы используете, осмотрите Ваш сайт и представьте — какие чувства Вы хотите вызвать у пользователя?
Красный
Красный — интуитивный, цвет физической силы. Цвет крови. Когда Вы смотрите на красный, у Вас учащается пульс, возникает чувство срочности; цвет придает мужества, силы и пробуждает бунтарский дух – это один из самых мощных цветов. Сайт онлайн-консультанта RedHelper прекрасный пример использования красного в оформлении и расстановке акцентов.
Оранжевый
Строительный гипермаркет OBI отлично показывает, как оранжевый символизирует фразу “заказать здесь и сейчас!”. Сайт OBI — хороший пример использования контрастных цветов в оформлении сайта. Оранжевый — еще один агрессивный цвет, который символизирует призыв к действию, хоть и кажется беззаботней, теплей и безопасней, чем красный. Он очень хорош в сочетании с голубым цветом.
Желтый
Желтый — цвет молодости. Он символизирует оптимизм и игривость, творческие порывы и спонтанность. Желтый — смелый цвет. Он не агрессивный, но очень заметный. Отличный пример — сайт представительства Nikon в России.
Зеленый
Зеленый ассоциируется с деньгами (по понятным причинам), но это не самое главное. Зеленый скорее успокаивающий, естественный цвет, способный ассоциировать Ваш сайт с чувством безопасности и спокойствия. Зеленый — отличный выбор, если Вы хотите вселить чувство доверия в своих посетителей.
Сеть закусочных Subway показывает, как можно использовать цвет в дополнение к ценности бренда. В данном случае корпоративные цвета ассоциируется со свежестью.
Синий
Синий — это цвет искренности. Цвет воды и неба, а так же — главный цвет интернета (вспомните, какого цвета ссылки по умолчанию). По этой причине, его уникальность в онлайн-бизнесе не так велика, как у других цветов. В этом цвете по минимуму импульсивности и спонтанности, он связан с логикой и прохладой. Хороший пример — сайт гипермаркета оптовых закупок METRO Cash&Carry.
Фиолетовый
В некотором роде фиолетовый работает как сочетание синего и зеленого, придавая Вашей странице ощущение защищенности и безопасности. Этот цвет несет легкий налет мистики, но в то же время он транслирует честные намерения разработчика.
Сайт мессенджера Viber отлично демонстрирует, как фиолетовый вызывает ощущение простоты и честности.
Розовый
Романтичный, женственный цвет. Розовый даёт сильный эффект при правильном использовании, хоть и может оттолкнуть определенные группы людей. Из-за своих гендерных ассоциаций, розовым нужно пользоваться осторожно, так как в неправильном контексте он вызовет чувство незрелости, либо намекает на интимные или неформальные отношения. Вряд ли Вы найдете хоть один спортивный сайт, в оформлении которого используется розовый. А вот для кафе мороженого Baskin Robbins — в самый раз.
Черный
Первоклассный, утонченный цвет, цвет роскоши. Он свидетельствует о профессионализме, вкусе, заставляет прочувствовать всю изысканность предложения. Рассматривается как мужской аналог розового, и может слегка оттолкнуть женскую аудиторию. Красноречивый пример — интернет-магазин якутских бриллиантов ЭПЛ.
Теория Цвета в дизайне сайта
Весь текст выше укладывается в простую идею — грамотное сочетание цветов на целевых страницах оказывает большое влияние на показатель отказа и конверсию.
Использование основных правил Теории Цвета при разработке дизайна сайта поможет Вам увеличить его привлекательность для посетителей. В сфере, где от успеха до провала отделяет несколько секунд, используя грамотную стратегию управления цветом Вы сможете в разы увеличить конверсию. Цветовые решения — один из самых недооцененных способов влиять на привлекательность Вашего сайта в глазах посетителей. Теория Цвета поможет понять, что испытывают пользователи при первом взгляде на Ваш сайт. Обратите на него внимание, кстати. О чем говорят ваши фирменные цвета?
Исследованием KISSmetrics подтверждено, что 93% решений принимаются лишь на основании того, что что-то выглядело лучше. Из этой группы респондентов 85% ответили, что именно цвет – причина, по которой они выбрали этот конкретный товар, а не продукт производителя-конкурента.
Landing pages и товарные страницы, конечно, стоит делать максимально лаконичными, однако существуют также проверенные на опыте правила, которых действительно стоит придерживаться. Мы решили не загружать читателей многочисленной информацией о психологическом воздействии цвета, а предоставить вам применимое на практике руководство с яркими примерами, которое вы сможете незамедлительно реализовать.
Цвета эмоций
Фирменные цвета должны вызывать у пользователей и покупателей правильные эмоциональные ассоциации, одновременно подчеркивая ваш неповторимый стиль. Прежде всего, вам нужно выбрать эмоцию, которую должна чувствовать целевая аудитория. После чего выберите цвет, ассоциирующийся в массовом сознании с выбранной вами эмоцией. Приведенные ниже примеры могут стать для вас простым путеводителем по пространству цветовых ассоциаций. И, наконец, определив, какую эмоцию вы хотите передать с помощью цвета, вы должны решить, будете ли вы строить брендинг своего бизнеса на визуальном доминировании одного цвета или же дополните его другими.
Теплый уютный коричневый
Коричневый – идеальный вариант для создания чувства надежности. Он подчеркивает основательный характер. Коричневый цвет ассоциируется с домом, очагом, уютом и теплом. Кстати, комбинирование различных оттенков коричневого или смешивание их с серым, синим и другими цветами дает приятный для глаза результат.
Коричневый — Основательность, Приземленность, Надежность, Принципы
Игривый зеленый
Известно, что зеленый цвет успокаивает. Его используют в больницах и везде, где нужно убедить людей в безопасности и призвать их к действию. Этот цвет можете использовать для кнопок скачивания, пожертвований и пробуждения чувства расслабленности.
Если вы позиционируете свой бренд как «игривый», «энергичный» или «экологически сознательный», то зеленый цвет, а также его оттенки в сочетании с голубым или оранжевым будут как раз тем, «что доктор прописал».
Зеленый — мир, развитие, прирост, здоровье.
Серьезный синий
Синий цвет (в особенности его темно-синие оттенки) ассоциируется с уверенностью, надежностью и спокойствием. Он прекрасно сочетается с серым, коричневым и желтым. Но если вы не хотите «потерять» серьезность, то эти оттенки должны применяться крайне аккуратно: в самых ненасыщенных тонах и на небольших площадях.
Замечали, что многие банки используют синий цвет? Синий отражает зависимость. Его также можно выбрать для элементов управления, которые требуют от пользователя действий, связанных с денежными трансакциями.
Синий/голубой — Традиционность, Надежность, Безопасность, Солидность, Эталон
Энергичный красный
Хотите подчеркнуть мощь, энергию и динамику? Создайте комбинацию из оттенков красного. Все оттенки красного ассоциируются с торжеством и праздничным настроением, поэтому можете смело использовать его в своих предновогодних кампаниях. Но будьте осторожны — не причините глазам посетителей «цветовой удар». Дайте им возможность отдохнуть визуально на больших белых пространствах.
Используйте красный цвет, если хотите привлечь внимание и продать товар по указанной на ярлычке цене. И не используйте его, если распространяете бесплатный софт (это будет ассоциироваться с вирусами и опасностью).
Красный — Энергичность, Спешка, Дефицит, Распродажа, Срочность, Страсть
Оранжевый
Используйте оранжевый цвет, если необходимо призвать к действию. Наиболее подходящий цвет для подписки на рассылки, кнопок регистрации и «купить сейчас».
Оранжевый — Умеренная Агрессивность, Активность, Решительность, Смелость, Побуждение к действию
Желтый
Желтый цвет – лучший захватчик внимания. Он выделяется на общем фоне, не вызывая тревоги. Можете использовать его для персонализированных рассылок, кнопок отправки форм и подписки на бесплатные сообщения электронной почты.
Желтый — Свежесть, Счастье, Ненавязчивое Стимулирование, Оптимизм
Бирюзовый
Самый удачный цвет для рынка новинок и аудитории с изысканным вкусом. Этот цвет привлекает внимание любителей распродаж и ищущих вечные ценности.
Бирюзовый — Утонченность, Экономичность, Находчивость, Утешение, Роскошь
Фиолетовый
Фиолетовый цвет символизирует изобилие, высокое происхождение и креативность. Он прекрасно подойдет для продажи потребительских товаров. Но будьте осторожны, не задушите пользователя угнетающей фиолетовостью.
Фиолетовый — Престижность, Достоверность, Спокойствие, Изобилие, Творчество
Серый/комбинация черного и белого
Черный будет удачным выбором, если вы продаете такие потребительские товары, как роскошный автомобиль или технику. Мощный и глянцевый, он используется для продвижения предметов роскоши и великолепно подойдет, если вы хотите сделать смелое утверждение или создать впечатление.
Серый/комбинация черного и белого — баланс, нейтралитет, спокойствие. Черный — Роскошь, Уважение, Власть, Блеск, Смелость
Вместо заключения
Вне зависимости от фирменного стиля бренда, выберите цвета, способные безмолвно выразить его «личность».
Не забывайте про необходимость сплит-тестирований выбранных вами цветов и их комбинаций! И помните о том, что в каждой маркетинговой нише существуют цветовые стандарты, и вы должны выделить свои landing page или сайт среди веб-ресурсов конкурентов, не выходя за рамки устоявшейся в вашей отрасли эстетической концепции. Это вполне достижимая цель.
Крутая шпаргалка по сочетанию цветов
Крутая шпаргалка по сочетанию цветов Правильное сочетание цветов — одна из важных составляющих совершенного образа и стильного и целостного интерьера. Именно поэтому мы решили поделиться шпаргалкой, с которой вы точно не промахнетесь при выборе одежды или дизайна квартиры.
Схема № 1. Комплиментарное сочетание
Комплиментарными, или дополнительными, контрастными, являются цвета, которые расположены на противоположных сторонах цветового круга Иттена. Выглядит их сочетание очень живо и энергично, особенно при максимальной насыщенности цвета.
Схема № 2. Триада — сочетание 3 цветов
Сочетание 3 цветов, лежащих на одинаковом расстоянии друг от друга. Обеспечивает высокую контрастность при сохранении гармонии. Такая композиция выглядит достаточно живой даже при использовании бледных и ненасыщенных цветов.
Сочетание от 2 до 5 цветов, расположенных рядом друг с другом на цветовом круге (в идеале — 2–3 цвета). Впечатление: спокойное, располагающее. Пример сочетания аналогичных приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.
Вариант комплиментарного сочетания цветов, только вместо противоположного цвета используются соседние для него цвета. Сочетание основного цвета и двух дополнительных. Выглядит эта схема почти настолько же контрастно, но не настолько напряженно. Если вы не уверены, что сможете правильно использовать комплиментарные сочетания, — используйте раздельно-комплиментарные
Цветовая схема, где один цвет — основной, два — дополняющие, а еще один выделяет акценты. Пример: сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый.
Сочетание 4 цветов, равноудаленных друг от друга. Цвета здесь несхожи по тону, но также комплиментарны. За счет этого образ будет динамичным, игривым и ярким. Пример: фиолетовый, красно-оранжевый, желтый, сине-зеленый.
Сочетания отдельных цветов
- Белый: сочетается со всем. Наилучшее сочетание с синим, красным и черным.
- Бежевый: с голубым, коричневым, изумрудным, черным, красным, белым.
- Серый: с цветом фуксии, красным, фиолетовым, розовым, синим.
- Розовый: с коричневым, белым, цветом зеленой мяты, оливковым, серым, бирюзовым, нежно-голубым.
- Фуксия (темно-розовый): с серым, желто-коричневым, цветом лайма, зеленой мяты, коричневым.
- Красный: с желтым, белым, бурым, зеленым, синим и черным.
- Томатно-красный: голубой, цвет зеленой мяты, песчаный, сливочно-белый, серый.
- Вишнево-красный: лазурный, серый, светло-оранжевый, песчаный, бледно-желтый, бежевый.
- Малиново-красный: белый, черный, цвет дамасской розы.
- Коричневый: ярко-голубой, кремовый, розовый, палевый, зеленый, бежевый.
- Светло-коричневый: бледно-желтый, кремово-белый, синий, зеленый, пурпурный, красный.
- Темно-коричневый: лимонно-желтый, голубой, цвет зеленой мяты, пурпурно-розовый, цветом лайма.
- Рыжевато-коричневый: розовый, темно-коричневый, синий, зеленый, пурпурный.
- Оранжевый: голубой, синий, лиловый, фиолетовый, белый, черный.
- Светло-оранжевый: серый, коричневый, оливковый.
- Темно-оранжевый: бледно-желтый, оливковый, коричневый, вишневый.
- Желтый: синий, лиловый, светло-голубой, фиолетовый, серый, черный.
- Лимонно-желтый: вишнево-красный, коричневый, синий, серый.
- Бледно-желтый: цвет фуксии, серый, коричневый, оттенки красного, желтовато-коричневый, синий, пурпурный.
- Золотисто-желтый: серый, коричневый, лазурный, красный, черный.
- Оливковый: апельсиновый, светло-коричневый, коричневый.
- Зеленый: золотисто-коричневый, оранжевый, салатный, желтый, коричневый, серый, кремовый, черный, сливочно-белый.
- Салатный цвет: коричневый, желтовато-коричневый, палевый, серый, темно-синий, красный, серый.
- Бирюзовый: цвет фуксии, вишнево-красный, желтый, коричневый, кремовый, темно-фиолетовый.
- Электрик красив в сочетании с золотисто-желтым, коричневым, светло-коричневым, серым или серебряным.
- Голубой: красный, серый, коричневый, оранжевый, розовый, белый, желтый.
- Темно-синий: светло-лиловый, голубой, желтовато-зеленый, коричневый, серый, бледно-желтый, оранжевый, зеленый, красный, белый.
- Лиловый: оранжевый, розовый, темно-фиолетовый, оливковый, серый, желтый, белый.
- Темно-фиолетовый: золотисто-коричневый, бледно-желтый, серый, бирюзовый, цвет зеленой мяты, светло-оранжевый.
- Черный универсален, элегантен, смотрится во всех сочетаниях, лучше всего с оранжевым, розовым, салатным, белым, красным, сиреневатым или желтым.
Как подтвердит большинство маркетологов, психология восприятия цвета имеет огромное влияние на отношение посетителей к online ресурсу. То, как целевая аудитория отреагирует на рекламную кампанию или воспримет ваш лендинг, тоже во многом определяет цвет.
Проще говоря, выбор оформления является весьма весомым фактором конвертации вашего сайта. В рамках этой статьи мы остановимся на трех самых популярных вариантах цветовых решений: синий, зеленый и оранжевый, и рассмотрим их влияние на восприятие и пользовательское поведение.
Цвет очень важен
Около 85% покупателей отмечают, что цвет является основной причиной выбора продукта, и это справедливо для всего, от автомобилей до обуви. К продаже услуг данный фактор относится не меньше. Но почему? Узнаваемость бренда зависит на 80% от цветового оформления, которое вызывает доверие потребителя.
В интернет-маркетинге ситуация не менее серьезна — цвет существенно влияет на показатели продаж. 42% покупателей формируют мнение о веб-сайте на основе его дизайна, в том числе и благодаря цветовой гамме. Более того, 52% покупателей не посетят лендинг или сайт снова, если им не понравилось его оформление.
Цвет, по данным исследований нейробиологов, обладает способностью притягивать определенные сегменты людей, менять предпочтения и влиять на поведение аудитории.
1. Голубой символизирует безопасность
Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Но что подразумевается под словом «безопасность» в данном контексте?
Синий — любимый у большинства людей, независимо от пола, возраста и т. д. Кроме того, синий цвет ассоциируется с уверенностью, властью и надежностью.
Статистика не врет: 57% мужчин и 35% женщин заявили, что синий — их любимый цвет. В подавляющем большинстве участники исследования выбрали его как наиболее предпочтительный оттенок.
Если посмотреть на вопрос с другой стороны, то практически никто из респондентов не счел синий раздражающим или просто нелюбимым. По данным опроса, только 1% мужчин и 0% женщин заявили, что синий — самый отталкивающий оттенок для них.
Почему он так популярен? Теорий на этот счет несколько. Некоторые основаны на том, что синева ясного неба («безопасная» погода) или океана (который отражает безоблачное небо) ассоциируются у людей с надежностью, уверенностью и властью.
Многие сайты используют цвет «безопасности», за примерами не стоит ходить далеко. Самая крупная социальная сеть, Facebook, оформлена в оттенках синего.
Twitter не отстает.
И, да, даже LinkedIn любит синий цвет.
Wal-Mart — крупнейшая в мире розничная сеть — пошла той же дорогой.
Многие банки используют этот подход. Основной цвет Citibank — синий с ярко-красной дугой.
Bank of America использует красный, но основной цветовой акцент в их логотипе — на синем цвете.
У Chase Bank светло-синий сайт и логотип.
Большинство компаний, работающих в отраслях, где доверие и надежность очень важны, используют много синего в своем брендировании. Ниже показана целевая страница First American Home Warranty — компании, предлагающей услуги по техническому обслуживанию домов.
USAA, Американская ассоциация автосервисов — основной дистрибьютор страховых полисов. На их сайте преобладает синий цвет.
New York Life, один из лидеров по страхованию жизни, использует хорошо известный синий квадратный логотип.
Среди российских брендов можно выделить Yota:
И, конечно же, социальная сеть ВКонтакте:
Подводя итог: вы не ошибетесь, если выберете оттенки синего для оформления своего ресурса. Даже если его слишком много, он все равно «работает».
Карен Галлер (Karen Haller), специалист в области прикладной психологии цвета, пишет о синем следующее:
«Этот цвет символизирует интеллект, ум, коммуникацию. А когда речь идет о социальных медиа, акцент на общение очень важен. Синий цвет также воспринимается как заслуживающий доверие, надежный, безопасный. Эти положительные качества передаются и бренду, выбравшему подобные оттенки».
2. Зеленый символизирует рост
Основной посыл зеленого — рост. Причины ассоциации очевидны: большинство растений — зеленые.
Зеленый имеет еще одно свойство — это один из самых простых цветов для восприятия человеческим глазом. Когда люди думают об этом цвете, у них автоматически возникают ассоциации с чем-то здоровым, живым, растущим и натуральном.
Бренд Subway позиционирует себя как здоровая альтернатива фастфуду и использует зеленый в качестве корпоративного цвета на логотипе и официальном сайте.
Зеленый используется в оформлении крупнейшего IT блога Techcrunch.
Envato использует зеленый цвет, чтобы обратиться к своей целевой аудитории — стартапам.
Некоторые из крупнейших и наиболее известных мировых брендов используют зеленый для продвижения определенных идей или передачи необходимых ощущений.
Российский пример напрашивается сам собой. Разумеется, это Сбербанк:
3. Будьте осторожны с оранжевым
Оранжевый — один из тех цветов, которых стоит опасаться. Как утверждают психологи, он наиболее тесно связан с риском. Но почему? Прислушайтесь к инстинктам. Когда вы видите надпись оранжевого цвета, что-то внутри говорит: «Стой! Здесь может быть опасно!»
Охотники носят оранжевые жилеты, чтобы их не подстрелили по ошибке. Строители в опасных ситуациях тоже надевают оранжевые жилеты или каски.
Немногие бренды используют оранжевый цвет, но решившиеся на это имеют четкое намерение. Их цель — демонстрация энергии, динамизма, азарта, а иногда и обещание риска.
Home Depot апеллирует к духу авантюризма у покупателей товаров категории DIY («Сделай сам»). Цвет их логотипа красноречиво отражает эту философию.
Есть риск использования оранжевого цвета — он воспринимается «дешево». Гипотеза, выдвинутая в исследовании Forbes в 1991 г., подтверждает это: почти четверть опрошенных назвали оранжевый «дешевым».
Писатель и бизнес-психолог Эми Морин (Amy Morin) тактично назвал «дешевыми» оттенки оранжевого, говоря об этом так: «Люди часто ассоциируют оранжевый цвет с хорошей скидкой, низкой ценой. Но «хорошая цена» редко говорит о высоком качестве».
Обозреватель Washington Post Джефф Туринтайн (Jeff Turrentine) предпринял мучительную попытку реабилитировать оранжевый цвет. Он отметил, что «нет ничего сомнительного в ярко-оранжевом», но признал, что иногда тот вызывает «вульгарные ассоциации».
Независимо от вашего намерения, будьте осторожны с этим цветом.
У HootSuite в логотипе присутствует оранжевый.
Тем не менее, в большинстве случаев бренд не использует главный цвет своего логотипа. Чаще всего в оформлении встречается черный, а основной оттенок на домашней странице — зеленый.
Однако многие компании используют оранжевый цвет достаточно успешно. Кстати, если вы обратите внимание, то увидите, что многие эффективные CTA-кнопки — оранжевые.
Российская сеть супермаркетов Дикси носит логотип, выполненный в ярко-оранжевом цвете. Вычурное использование этого оттенка недвусмысленно намекает целевой аудитории, что цены здесь должны быть предельно низкими.
Вывод
При выборе цветов для оформления ресурса лучшим решением будут зеленый и синий.
Зеленый подойдет, если вы хотите подчеркнуть развитие, рост (вашего бизнеса, клиентских активов, качества жизни пользователей и т. д) или если ваш бизнес связан с экологией, питанием, здоровым образом жизни. Не забывайте, что зеленый и сам по себе обладает успокаивающим действием и вызывает доверие.
Голубой внушает чувство спокойной уверенности, при этом он наиболее легкий для восприятия. Менее 1% пользователей считают этот цвет раздражающим. Поэтому большинство успешных социальных сетей оформлены в оттенках синего и голубого — люди проводят многие часы своей жизни, читая ленты новостей ВК или Facebook, постоянно проверяют Twitter и т. д. А чтобы человек мог провести в социальной сети действительно долгое время, ее оформление должно минимально отвлекать и не раздражать посетителя.
Применение оранжевого связано с определенным риском. Но тем не менее он идеально подходит в ряде случаев. Например, если вы хотите специально подчеркнуть «дешевизну» бренда — это полезно для сайтов онлайн-распродаж или для бизнесов, делающих упор на большие скидки в своей маркетинговой стратегии. Кроме того, если вы работаете в сфере активного отдыха, туризма, или чего-то еще, связанного с риском и приключениями, вам стоит задуматься об использовании оранжевого в дизайне.
Но что бы вы ни выбрали, убедитесь, что можете предсказать реакцию своей аудитории на конкретную цветовую гамму.
А теперь забудьте все, что прочитали выше :). Цвет лишь инструмент в процессе оптимизации конверсии.
Цвет лендинга не сделает ваш бизнес успешным, а вот соотношение активных и пассивных цветов — да. Важно только то, на чем вы акцентируете внимание целевой аудитории и какого действия ждете от нее.
Высоких вам конверсий!
По материалам: blog.crazyegg.com, image source splitshire
16-12-2014
Цвет является важным фактором при выборе продукта. Это может подтвердить большинство покупателей различных товаров – от автомобилей до обуви.
Цвет существенно влияет на показатели продаж в интернете и посещаемости сайтов в целом. Почти половина пользователей формируют мнение о веб-сайте на основе его дизайна. Цветовая гамма играет здесь далеко не последнюю роль.
Дизайнер Пол Хеберт проанализировал 10 популярных сайтов. Он собрал статистику распределения цветов, используемых на главной странице сайта и в таблице стилей.
«Я часто испытываю проблемы при создании цветовых схем, и мне стало любопытно как поступают в этом случае другие компании», рассуждал он.
Для начала Пол изучил рейтинг Alexa и произвольно выбрал 10 из числа самых посещаемых сайтов – Google.com, Youtube.com, Facebook.com, Baidu.com, Yahoo.com, Wikipedia.org, Amazon.com, Google.co.in, Qq.com и Twitter.com.
Дизайнер разработал скрипт, который возвращает значения всех цветов, используемых на каждом сайте в формате CSV. Получился набор из 10 записей такого формата:
http://www.Google.com|#fff|#000|#767676|#2d2d2d|#bebebe|rgba(0,0,0,.2)|#ccc|#c0c0c0|#36c|#4c4c4c|#dd4b39|#dd8e27|#900|#eee|black|#f5f5f5|rgba(0,0,0,.12)|#666|#fef9db|#4d90fe|rgba(255,255,255,0.5)|rgba(0,0,0,.1)|#3079ed|#dcdcdc|#444|#4787ed|#2f5bb7|#357ae8|rgba(0,0,0,0.3)|#f1f1f1|#f8f8f8|#fbfbfb|#ffffff|#c6c6c6|#222|rgba(0,0,0,.8)|rgba(0,0,0,0)|#ebebeb|rgba(0,0,0,.3)|#00c|#11c|#551a8b|#999
Исходный код данного скрипта он разместил на Github. Проект с этим и другими скриптами доступен здесь.
После этого Хеберт проанализировал полученную выборку и наглядно отобразил разброс значений на графиках.
Оказалось, что при оформлении сайтов было использовано вдвое больше оттенков синего, чем желтого или красного, и втрое больше, чем зеленого. Для упрощения расчетов прозрачный цвет Хеберт не учитывал.
Изображение сайта Пола Хеберта
Засилье синего цвета в глобальной сети настолько явно, что дизайнеру пришлось выделить бирюзовый цвет в отдельную категорию.
Изображение сайта Пола Хеберта
Расстояние от центра круга до точки, показывающей тот или иной цвет, показывает степень его насыщенности. Чем жирнее точка, относящаяся к цвету, тем чаще он появляется на десяти самых популярных сайтах.
«Магия» цвета
Цвет, по данным исследований нейробиологов и психологов, обладает способностью влиять на определенные сегменты аудитории.
Голубой цвет символизирует безопасность
Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Синий — любимый у большинства людей, независимо от пола, возраста и прочих параметров.
Некоторые психологи полагают, что синева ясного неба («безопасная» погода) или океана (который отражает безоблачное небо) ассоциируются у людей с надежностью, уверенностью и властью.
Многие сайты используют цвет «безопасности». За примерами далеко ходить не нужно.
И, конечно же, социальная сеть «ВКонтакте»:
Зеленый цвет символизирует рост
Основной посыл зеленого — рост. Для большинства исследователей причины такой ассоциации очевидны: большинство растений — зеленые.
Прочие выводы
Каждому пользователю известно, что в дизайне сайта популярной социальной платформы Facebook много синего цвета. Однако, наряду с ним на сайте достаточно широко используется диапазон других цветов, которых, к примеру, на сайтах Baidu, Google и Wikipedia в три раза меньше.
Тем не менее, разработчики Amazon стараются как можно меньше использовать в оформлении сайта синий цвет, предпочитая ему более теплые оттенки, а на сайте Yahoo Хеберту, вообще, не удалось определить доминирующий цвет.
Дизайнер намерен провести повторный анализ палитры ведущих веб-ресурсов, включив в выборку 100 или даже 1 000 сайтов. Хеберт выразил убеждение в том, что результаты более масштабного эксперимента помогут ему найти ответы сразу на несколько фундаментальных вопросов, которые его давно волнуют.
Например, он хотел бы узнать, являются ли цветовые предпочтения того или иного индивидуума врожденной особенностью или же они способны меняться в зависимости от времени и культуры.
Ознакомиться с анализом цвета каждого из сайтов можно на этой странице.
Тенденции Цвета
Каждый год Институт Цвета Pantone оценивает цвета, показанные модными дизайнерами на Неделе моды в Нью-Йорке.
Эта информация используется для создания отчета Pantone Color of the Year и Pantone Fashion Color Report с верхним Модные цвета для предстоящего сезона:
2019 — Живой Коралл
HEX: # FF6F61
PANTONE 16-1546
2018 — Ультрафиолетовый
HEX: # 6B5B95
PANTONE 18-3838
2017 Зелень
Hex # 88B04B
RGB (136, 176, 75)
Pantone 15-0343
2016 Розовый Кварц
Hex # F7CAC9
RGB (247, 202, 201)
Pantone 13-1520
2016 Serenity
Hex # 92A8D1
RGB (146, 168, 209)
Pantone 15-3919
цветов года 2015-2000
2015 Marsala
Hex # 955251
RGB (149, 82, 81)
Pantone 18-1438
2014 Радиан и Орхидея
Hex # B565A7
RGB (181, 101, 167)
Pantone 18-3224
2013 Изумруд
Hex # 009B77
RGB (0, 155, 119)
Pantone 17-5641
2012 Tangerine Tango
Hex # DD4124
RGB (221, 65, 36)
Pantone 17-1463
2011 Жимолость
Hex # D65076
RGB (214, 80, 118)
Pantone 18-2120
2010 Бирюзовый
Hex # 45B8AC
RGB (68, 184, 172)
Pantone 15-5510
2009 Мимоза
Hex # EFC050
RGB (239, 192, 80)
Pantone 14-0848
2008 Blue Izis
Hex # 5B5EA6
RGB (91, 94, 166)
Pantone 18-3943
2007 Перец чили
Hex # 9B2335
RGB (155, 35, 53)
Pantone 19-1557
Песочный Доллар 2006
Hex #DFCFBE
RGB (223, 207, 190)
Pantone 13-1106
2005 Голубая бирюза
Hex # 55B4B0
RGB (85, 180, 176)
Pantone 15-5217
2004 Tigerlily
Hex # E15D44
RGB (225, 93, 68)
Pantone 17-1456
2003 Aqua Sky
Hex # 7FCDCD
RGB (127, 205, 205)
Pantone 14-4811
2002 True Red
Hex # BC243C
RGB (188, 36, 60)
Pantone 19-1664
2001 Фуксия розовая
Hex # C3447A
RGB (195, 68, 122)
Pantone 17-2031
2000 Cerulean Blue
Hex # 98B4D4
RGB (152, 180, 212)
Pantone 15-4020
,
c # — создайте красивую цветовую палитру
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
Серый / Серый цветовые коды — RGB серого цвета
Серый / Серый цветовые коды RGB.
серый RGB цветовой код
Код цвета RGB Грея = # 808080 = 128 * 65536 + 128 * 256 + 128 = (128,128,128)
КРАСНЫЙ = 128, ЗЕЛЕНЫЙ = 128, СИНИЙ = 128
Таблица кодов серого цвета
Цвет | HTML / CSS Наименование цвета | шестнадцатеричный код #RRGGBB | Десятичный код (R, G, B) |
---|---|---|---|
Генсборо | #DCDCDC | RGB (220 220 220) | |
светло-серый / светло-серый | # D3D3D3 | RGB (211 211 211) | |
серебро | # C0C0C0 | RGB (192 192 192) | |
темно-серый / темно-серый | # A9A9A9 | RGB (169 169 169) | |
серый / серый | # 808080 | RGB (128 128 128) | |
димгрей / димгрей | # 696969 | RGB (105 105 105) | |
светло-серый / светло-серый | # 778899 | RGB (119 136 153) | |
слантергрей / сланегрей | # 708090 | RGB (112 128 128) | |
дарклатегрей / darkslategrey | # 2F4F4F | руб. (47,79,79) | |
черный | # 000000 | ргб (0,0,0) |
RGB цвет ►