Содержание

Цвета в HTML — Как создать сайт

Способы указания цвета в языке HTML

Цвета HTML
HTML цвета и способы их указания

В языке HTML, существует два способа указать цвет:

1. С помощью имени цвета,
2. С помощью системы RGB, где цвета заданы в шестнадцатеричном формате.

Имя цвета

Имя цвета в HTML указывается английскими словами, например red или green. Имя цвета выступает в качестве значения атрибута HTML-тега. Имён цветов очень много, в этой статье мы рассмотрим лишь основные из них.

Обычно для задания цвета, в языке HTML используют два атрибута:

1. Атрибут color="имя_цвета" — цвет текста,
2. Атрибут bgcolor="имя_цвета" — цвет фона.

Примеры использования цветовых атрибутов:
color="red" — назначаем тексту красный цвет,
bgcolor="green" — назначаем фону зелёный цвет.

Таблица основных имён цветов HTML:

Имя цветаЕго видПеревод
whiteБелый
ivoryСлоновая кость
silverСеребряный
grayСерый
blackЧёрный
maroonТёмно-бордовый
redКрасный
orangeОранжевый
goldЗолотой
yellowЖёлтый
oliveОливковый
limeЛайм
greenЗелёный
aquaМорская волна
blueСиний
navyНави
tealБирюзовый
fuchsiaФуксиновый
purpleПурпурный

Шестнадцатеричная система счисления

В повседневной жизни мы пользуемся десятичной системой счисления от 0 до 9. Программисты и дизайнеры часто используют шестнадцатеричную систему счисления от 0 до 15, где:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Практически каждый цвет и оттенок видимый нашему зрению можно записать в шестнадцатеричной системе, например красный цвет

red (красный) в шестнадцатеричной системе будет равен ff0000

color="red" — красный цвет, по имени,
color="#ff0000" — красный цвет, в шестнадцатеричной системе счисления.

В языке HTML, перед шестнадцатеричным числом, в значении атрибута ставят знак решётки #

RGB

Перед тем как начать указывать цвета в HTML с помощью шестнадцатеричной системы счисления, вам для начала нужно узнать о таком понятии как RGB

RGB — это сокращение от слов Red Green Blue (Красный Зелёный Синий).

Цвет в HTML, записанный в шестнадцатеричной системе состоит из трех блоков чисел

00 00 00, где каждый блок отвечает за один из цветов RGB, первый блок за красный цвет, второй за зелёный цвет, третий за синий цвет. Числа могут варьироваться от 00 до ff.

Где, ff — это 255 в десятичной системе счисления.

Схема RGB:
Red — от 00 до ff
Green — от 00 до ff
Blue — от 00 до ff

В итоге получаем число из шести цифр 000000, где первые два числа отвечают за красный цвет, вторые два числа отвечают за зелёный цвет, третьи два числа отвечают за синий цвет.

Если мы хотим получить красный цвет, то пишем ff0000, зелёный цвет 00ff00, синий цвет 0000ff. Например, если хотим получить тёмно красный цвет, то нужно уменьшить первый блок чисел и вместо ff (который равен в десятичной системе счисления 255), записать например 96 (который равен в десятичной системе счисления 150).

Приведём для наглядности, примеры цветов и их шестнадцатеричный код:

ЦветЕго видШестнадцатеричный код
Красный#ff0000
Тёмно-красный#960000
Зелёный#00ff00
Тёмно-зелёный#009600
Синий#0000ff
Тёмно-синий#000096
Белый#ffffff
Чёрный#000000

Смешиваем цвета в HTML

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

Цвета, заданные с помощью шестнадцатеричной системы счисления и RGB, тоже можно смешивать:

 Цвет Его видШестнадцатеричный кодЧто смешали
Желтый		#ffff00Красный и зелёный
Оранжевые оттенки#ff8800Красный и немного зелёного
Фиолетовый#ff00ffКрасный и синий
Фиолетовые оттенки#8800ffНемного красного и синий
Голубой#00aaffСиний и немного зелёного
Голубые оттенки#0055ffНемного зелёного и синий
Серые оттенки#aaaaaaРавномерно смешать все три цвета

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

Программы подбора цвета

(На данный момент, сервис от Яндекса отключили, обещают скоро включить.)
В мире существуют множество программ, которые помогут вам подобрать цвет. Например, если в Яндексе набрать слово RGB, то под поиском появится виджет, в котором можно подобрать для себя цвет.

Читать далее: Единицы измерения в HTML


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014


Навигация по записям

Код цвета в HTML и CSS: как прописать цвет

От автора: всем привет. Сегодня я бы хотел поговорить о цвете в веб-разработке, а именно о том, как формируются коды цветов в html и css. Ну и вообще о способах задания цвета.

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

Задание цвета с помощью ключевых слов

Например, color: red. И даже те из вас, кто спал в школе на уроках английского, понимают, что мы задали красный цвет. Но таких вот ключевых слов в html не сильно много, чуть более сотни. То есть с их помощью вы не сможете задать миллион разных оттенков, да и запомнить все названия очень трудно. Я могу лишь порекомендовать держать в уме самые основные значения, остальное лучше задавать не с помощью ключевых слов, а по-другому.

С помощью шестнадцатеричного кода

Звучит, может быть, страшно, но на деле ничего сложного. Цвет в таком формате записывается через решетку, далее записывается 3 или 6 символов, которые и определяют оттенок. Чтобы брать значения, я рекомендую вам использовать сайт //color.hailpixel.com

А также палитру программы Adobe Photoshop, где также отображается шестнадцатеричный код или как его еще называют – hex-код.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

В форматах rgb и rgba

Эти способы используются уже реже, потому что обычно хватает варианта с hex-кодом. Объяснить суть записи цвета в формате rgb очень просто. Есть красный, зеленый и синий цвета. Они являются основными. Вот на основании их смешивания мы и получаем нужный нам цвет. Для этого нужно в скобках указать первым значение насыщенности красным цветом от 0 до 255, далее через запятую проделать то же самое с зеленым и синим. Например, так:

Как вы понимаете, это позволяет задавать миллионы разных оттенков, которые будут отличаться совсем незначительно. Значение (0, 0, 0) приравнивается к черному цвету, а (255, 255, 255) – белому. Здесь действует правило, что если смешать все цвета в их максимальной насыщенности, то получится белый цвет.

Формат rgba отличается лишь тем, что добавляется четвертое значение – альфа канал. Допустимо использовать значения от 0 до 1, значения с десятичной дробью, естественно, допускаются. Это позволяет задать полупрозрачный цвет. Например, если написать так:

То наш цвет будет уже не абсолютно черным, а более светлым, а также через него будет видно содержимое заднего слоя, если оно есть.

В форматах hsl и hsla

Это последние форматы, которые мы рассмотрим. В веб-разработке они используются еще реже. Расшифровывается hsl так: цвет, насыщенность, светлота. Первое значение задается числом от 0 до 360, а второе и третье в процентах.

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

Собственно, hsla добавляет только тот самый альфа-канал. То есть это еще один формат, в котором вы можете получить полупрозрачный цвет. Кому-то удобнее будет использовать rgb, кому-то hsl.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Ярко красный цвет код – АвтоТоп

Таблица (палитра) цветов html предоставляет вам возможность самостоятельно подобрать нужный вам тон. Значение цвета отображается в трех форматах: Hex, RGB и HSV.

  • Hex состоит из трех двух символьных значений в шестнадцатеричной системе счисления. Например: #ff00b3, где первая пара чисел – красный, вторая – зеленый, а третья – синий.
  • RGB (RedGreenBlue) имеет вид «200,100,255», обозначающее количество соответствующего тона(красный,зеленый,синий) в получаемом цвете.
  • HSV (Hue, Saturation, Value – тон, насыщенность, значение) – цветовая модель, в которой в качестве координат являются:
  • Hue — цветовой тон, может варьироваться в пределах от 0° до 360°.
  • Saturation — насыщенность, варьируется в пределах 0—100 или 0—1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
  • Value (значение цвета) – задает яркость, значение так же может варьироваться в пределах 0—100 или 0—1.

Список цветов с названиями

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

Цвета html обозначаются шестью символами после символа слеш – например, #000000. Эти шесть символов обозначают доли различных цветов (Красного, Зеленого и Синего цветов (Red, Green, Blue)) в итоговом цвете. В мониторе вашего комьютера изображение формируется из огромного количества точек, называемых пикселями. Каждый пиксел – это маленький источник света, назовём его «фонарик», который в свою очередь состоит из трех фонариков – красного, зеленого и синего цвета. Уменьшая или увеличивая интенсивность свечения отдельных цветных фонариков, мы получаем нужный цвет.

Коды цветов html

Цвета в HTML обозначаются шестнадцатиричным (HEX) обозначением сочетания красного, синего и зеленого цвета (RGB).

Наименьшим значением цвета является 0 (шестнадцатиричное 00). Наибольшим значением цвета является 255 (шестнадцатиричное FF).

Шестнадцатиричное значение цвета представляет из себя три цифры, начинающиеся со знака #.

Коды (значения) цветов

ЦветКод HEXКод RGB
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)

16 миллионов оттенков

Сочетание красного, синего и зеленого цветов со значениями с долей каждого цвета от 0 до 255 дают в сумме более 16 миллионов оттенков (256 x 256 x 256).

Большинство современных мониторов способны отобразить не меньше 16384 различных оттенков (ЖК-мониторы, в основном, способны отображать 262 тысячи 16 миллионов (обновлено в октябре 2013 г.) цветов, а ЭЛТ-мониторы способны отображать практически неограниченное количество цветов).

В цветовой таблице ниже приведено изменение доли красного цвета с 0 до 255 при нулевых значениях синего и зеленого цветов:

КрасныйКод HEXКод RGB
#000000rgb(0,0,0)
#080000rgb(8,0,0)
#100000rgb(16,0,0)
#180000rgb(24,0,0)
#200000rgb(32,0,0)
#280000rgb(40,0,0)
#300000rgb(48,0,0)
#380000rgb(56,0,0)
#400000rgb(64,0,0)
#480000rgb(72,0,0)
#500000rgb(80,0,0)
#580000rgb(88,0,0)
#600000rgb(96,0,0)
#680000rgb(104,0,0)
#700000rgb(112,0,0)
#780000rgb(120,0,0)
#800000rgb(128,0,0)
#880000rgb(136,0,0)
#900000rgb(144,0,0)
#980000rgb(152,0,0)
#A00000rgb(160,0,0)
#A80000rgb(168,0,0)
#B00000rgb(176,0,0)
#B80000rgb(184,0,0)
#C00000rgb(192,0,0)
#C80000rgb(200,0,0)
#D00000rgb(208,0,0)
#D80000rgb(216,0,0)
#E00000rgb(224,0,0)
#E80000rgb(232,0,0)
#F00000rgb(240,0,0)
#F80000rgb(248,0,0)
#FF0000rgb(255,0,0)

Оттенки серого

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

Оттенки серогоКод HEXКод RGB
#000000rgb(0,0,0)
#080808rgb(8,8,8)
#101010rgb(16,16,16)
#181818rgb(24,24,24)
#202020rgb(32,32,32)
#282828rgb(40,40,40)
#303030rgb(48,48,48)
#383838rgb(56,56,56)
#404040rgb(64,64,64)
#484848rgb(72,72,72)
#505050rgb(80,80,80)
#585858rgb(88,88,88)
#606060rgb(96,96,96)
#686868rgb(104,104,104)
#707070rgb(112,112,112)
#787878rgb(120,120,120)
#808080rgb(128,128,128)
#888888rgb(136,136,136)
#909090rgb(144,144,144)
#989898rgb(152,152,152)
#A0A0A0rgb(160,160,160)
#A8A8A8rgb(168,168,168)
#B0B0B0rgb(176,176,176)
#B8B8B8rgb(184,184,184)
#C0C0C0rgb(192,192,192)
#C8C8C8rgb(200,200,200)
#D0D0D0rgb(208,208,208)
#D8D8D8rgb(216,216,216)
#E0E0E0rgb(224,224,224)
#E8E8E8rgb(232,232,232)
#F0F0F0rgb(240,240,240)
#F8F8F8rgb(248,248,248)
#FFFFFFrgb(255,255,255)

Кросс-браузерные (для всех браузеров) названия цветов html

Коллекция из 150 названий цветов в html, поддерживаемых во всех браузерах.

Стандартизированные названия цветов

Консорциум W3C перечисляет 16 валидных названий цветов для HTML и CSS: aqua (аквамарин), black (черный), blue (синий), fuchsia (фуксиновый), gray (серый), green (зеленый), lime (лайм или салатовый), maroon (каштановый), navy (ультрамарин), olive (оливковый), purple (пурпурный), red (красный), silver (серебристый), teal (сизый), white (белый) и yellow (желтый).

При использовании цветов, не входящих в этот список, правильнее будет использовать их шестнадцатиричный код (HEX) или код RGB.

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

Несколько лет назад, когда компьютеры могли поддерживать максимум 256 различных цветов, был предложен список из 216 «Безопасных web-цветов» с 40 цветами, зарезервированными для системы.

Эта 216-цветная палитра была создана для того, чтобы правильно отобразить цвета в режиме 256-цветной палитры.

Теперь это не важно, потому что большинство компьютеров во всем мире поддерживают миллионы оттенков цвета. В любом случае вот список этих цветов:

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

Интересное:

Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

В HTML цвет чаще всего задаются RGB-кодом. Любой цвет разлагается на три основные составляющие:

Любой цвет задается сочетанием трех чисел, каждое из которых отражает долю одного из трех основных цветов. Каждая доля занимает 1 байт и может варьироваться от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 (в десятичной системе счисления).

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

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

Для наиболее популярных цветов были введены символьные имена.

Пример серебристого цвета

Подбор RGB цвета

Таблица цветов

Цветовая константаRedGreenBlueОбразецalicemblueF0F8FFantiquewhiteFAEBD7aqua00FFFFaquamarine7FFFD4azureF0FFFFbeigeF5F5DCbisqueFFE4C4black000000blanchedalmondFFEBCDblue0000FFblueviolet8A2BE2brownA52A2AburlywoodDEB887cadetblue5F9EA0chartreuse7FFF00chocolateD2691EcoralFF7F50cornflowerblue6495EDcornsilkFFF8DCcrimsonDC143Ccyan00FFFFdarkblue00008Bdarkcyan008B8BdarkgoldenrodB8860BdarkgrayA9A9A9darkgreen006400darkkhakiBDB76Bdarkmagenta8B008bdarkolivegreen556B2FdarkorangeFF8C00darkochid9932CCdarkred8B0000darksalmonE9967Adarkseagreen8FBC8Fdarkslateblue483D8Bdarkslategray2F4F4Fdarkturquoise00CED1darkviolet9400D3deeppinkFF1493deepskyblue00BFFFdimgray696969dodgerblue1E90FFfirebrickB22222floralwhiteFFFAF0forestgreen228B22fushsiaFF00FFgainsboroDCDCDCghostwhiteF8F8FFgoldFFD700goldenrodDAA520gray808080green008000greenyellowADFF2FhoneydewF0FFF0hotpinkFF69B4indiandredCD5C5Cindigo4B0082ivoryFFFFF0khakiF0E68ClavenderE6E6FAlavenderblushFFF0F5lawngreen7CFC00lemonchiffonFFFACDligtblueADD8E6lightcoralF08080lightcyanE0FFFFlightgoldenrodyellowFAFAD2lightgreen90EE90lightgreyD3D3D3lightpinkFFB6C1lightsalmonFFA07Alightseagreen20B2AAlightscyblue87CEFAlightslategray778899lightsteelblueB0C4DElightyellowFFFFE0lime00FF00limegreen32CD32linenFAF0E6magentaFF00FFmaroon800000mediumaquamarine66CDAAmediumblue0000CDmediumorchidBA55D3mediumpurple9370DBmediumseagreen3CB371mediumslateblue7B68EEmediumspringgreen00FA9Amediumturquoise48D1CCmedium violetredC71585midnightblue191970mintcreamF5FFFAmistyroseFFE4E1moccasinFFE4B5navajowhiteFFDEADnavy000080oldlaceFDF5E6olive808000olivedrab6B8E23orangeFFA500orengeredFF4500orchidDA70D6palegoldenrodEEE8AApalegreen98FB98paleturquoseAFEEEEpalevioletredDB7093papayawhopFFEFD5peachpuffFFDAB9peruCD853FpinkFFC0CBplumDDA0DDpowderblueB0E0E6purple800080redFF0000rosybrownBC8F8Froyalblue4169E1saddlebrown8B4513salmonFA8072sandybrownF4A460seagreen2E8B57seashellFFF5EEsiennaA0522DsilverC0C0C0skyblue87CEEBslateblue6A5ACDslategray708080snowFFFAFAspringgreen00FF7Fsteelblue4682B4tanD2B48Cteal008080thistleD8BFD8tomatoFF6347turquose40E0D0violetEE82EEwheatF5DEB3whiteFFFFFFwhitesmokeF5F5F5yellowFFFF00yellowgreen9ACD32

Ассоциативный ряд цветов:

  • Таблица «безопасных» цветов
  • Правильное сочетание цветов
  • Сводная таблица стилей
  • Сводная таблица специальных символов
  • Accessibility color wheel – сервис подбора цветов для фона и текста с учетом пользователей с ограниченными способностями.
    Accessibility color wheel поможет выбрать оптимальную пару цветов. В интерфейсе присутствует панель, имитирующая 3 вида цветовой слепоты.
    Для использования локально на компьютере, можно скачать архив.

.

Цвет на сайте: создаем настроение, управляем эмоциями

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

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

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

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

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

Конечно же, выбирать цвет для сайта нужно не случайным образом, а руководствуясь будущими целями сайта. Если его в дальнейшем планируется продвигать в поиске или контекстной рекламе, то лучше просмотреть Топ 20, или Топ 30 (включая рекламные площадки) сайтов конкурентов. Это необходимо сделать для того, чтобы найти цвета, оттенки и их сочетания которые реже используются в вашей тематике. Сайт должен запоминаться как самим дизайном, так и его уникальными цветовыми решениями, а не быть похожим на сайты конкурентов.

О цветовых моделях

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

1. Цветовая модель RGB.

Данная модель чаще всего используется в веб-дизайне. Аббревиатура RGB — это сокращение от названий трех цветов: Red (красный), Green (зеленый), Blue (синий). Исходный цвет данной модели — черный (экран монитора). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать белый цвет. В HTML документах цвета задаются символами от 00 до FF в шестнадцатеричном коде перед которыми ставится символ #.

2. Цветовая модель CMYK.

Она присуща полиграфии и печати. Аббревиатура CMYK — это сокращение от названий четырех цветов: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (черный). Исходным цветом данной модели является белый (лист бумаги). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать черный цвет.

Поскольку модель RGB охватывает больший цветовой диапазон, чем модель CMYK, то все изображения, предназначенные для печати и полиграфии, должны быть переведены из системы RGB в CMYK. Так, создавая логотип для сайта, используется одна система (RGB). А для печати визиток и фирменных бланков, используется CMYK модель.

Выбираем основной цвет

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

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

Существует три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Их невозможно получить путем смешивания других цветов. А как раз составные и дополнительные цвета мы можем получить, смешав основные.

Составные цвета

Также используются три составных цвета: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Не забываем, что получить их можно, смешав красный и желтый, желтый и синий, красный и синий цвета.

Третичные цвета

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

Значение цветов

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

Красный цвет

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

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

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

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

Также часто цвет используется при оформлении ресторанов быстрого питания — McDonalds, Ростикс, KFC.

Код красного цвета — #FF0000

  • Восприятие красного цвета в разных странах:
  • В Китае красный цвет воспринимается хорошо, он означает цвет удачи, торжества, свадьбы. 
  • В Индии считается цветом чистоты
  • Южная Африка относит красный цвет к траурным цветам
  • На Востоке означает радость, особенно в сочетании с белым
  • На Западе воспринимается по стандарту, как цвет, символизирующий возбуждение, любовь, страсть
  • В США, конечно же, ассоциируется с Рождеством, если используется с зеленым, а также с Днем Святого Валентина (с белым)
  • Иврит: красный цвет означает жертву, грех, поэтому использовать нужно с осторожностью
  • В Япония красный — это жизнь
  • Христианство: восприятие чуть отличается от Иврита — жертва, страсть, любовь
  • Фэн-шуй: красный цвет — это Янь, огонь, удача, уважение, защита, живучесть, деньги, признание.

Синий цвет

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

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

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

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

Код синего цвета — #0000FF

Голубой цвет

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

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

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

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

Как воспринимается голубой цвет в различных странах мира:

  • В Европе считается цветом успокоения, умиротворения
  • В Иране используется с осторожностью, ведь голубой — это цвет траура, а с другой стороны — цвет неба и духовности
  • В Китае означает бессмертие
  • В Индуизме это цвет Кришны
  • В Иудаизме — цвет святости
  • В Христианство – это цвет Христа
  • В Католицизме — цвета одежды Марии
  • На Ближнем Востоке голубой цвет считается цветом защиты
  • Вообще в мире голубой цвет означает безопасность
  • Фэн-шуй: голубой — это Инь, вода, спокойствие, исцеление, релаксация, доверие, приключения
  • На Западе, увы, этот цвет ассоциируется с печалью, депрессией

Желтый цвет

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

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

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

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

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

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

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

Желтый обозначается так — #FFFF00

Восприятие желтого цвета в разных странах:

  • В Европе желтый цвет считается цветом счастья, надежды, радости, но при этом слабости
  • В Азии считается имперским цветом
  • В Египте это цвет траура
  • В Японии — цвет мужества
  • В Буддизме желтый цвет символизирует мудрость
  • По фэн-шуй: желтый цвет — это Янь, Земля, солнечные лучи, тепло, движение

Оранжевый цвет

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

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

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

  • Как воспринимается оранжевый цвет в странах мира:
  • В Европе оранжевый цвет символизирует осень, урожай, творчество
  • В Ирландии ассоциируется с религиозными протестантами
  • В США первые ассоциации, конечно же, с Хэллоуином (в сочетании с черным)
  • В Индуизме оранжевый вообще считается священным цветом
  • Фэн-шуй: символ Янь, Земли, также оранжевый цвет усиливает концентрацию

Фиолетовый цвет

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

Фиолетовый прекрасно сочетается с черным цветом и придает некоторую таинственность, элегантность.

Фиолетовый цвет можно получить, смешав красный и синий. Красный цвет — яркий, активный, который воплощает самый короткий, но одновременно самый рискованный путь к заветной цели. Сливаясь с синим, получается единство противоположностей. Возможно, поэтому фиолетовый считается самым таинственным, чарующим оттенком.

О фиолетовом цвете говорил Гёте: «Движение этого цвета непрерывно. Так человек хочет идти вперед вместе с ним, но не просто шагать вверх по карьерной лестнице, но и достичь также внутренней гармонии».

Код фиолетового цвета — #8000FF

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

Зеленый цвет

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

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

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

Еще зеленый колер означает безопасность. Зеленый свет светофора разрешает продолжить путь, а области, помеченные зеленым на карте безопасны.

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

Зеленый цвет обозначается так — #008000

Восприятие зеленого цвета в разных странах:

  • В Японии он означает жизнь
  • Ислам: зеленый цвет — это символ надежды, добродетели, жизни
  • Ирландия: конечно же, это символ всей страны
  • Европа / США: здесь зеленый цвет ассоциируется с весной, новым рождением, с Днем Святого Патрика, с Рождеством (в сочетании с красным)
  • Фэн-шуй: это символ Инь, дерево, исцеление, здоровье

Коричневый цвет

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

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

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

Этот цвет создает тепло и уют, также он воспринимается и в дизайне.

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

Серый цвет

Серый цвет — это цвет серьезности, консерватизма и традиционализма. Вызывает ощущение чистоты и невинности, разумности и стабильности.

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

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

Розовый цвет

Розовый цвет выражает нежность, романтичность, женственность, воспитание, слабость. Это символ спокойствия и безмятежности.

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

Черный цвет

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

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

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

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

Код черного цвета — #000000

Восприятие черного цвета в разных странах мира:

  • В Европе считается символом траура, похорон, смерти, бунта, спокойствия
  • В Таиланде и Иудаизме означает несчастье, зло
  • У австралийских аборигенов это цвет людей
  • Фэн-шуй: символ Инь, воды, денег, успеха в карьере, дохода, стабильности, эмоциональной защиты и силы

Белый цвет

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

Код белого цвета — #FFFFFF

Как воспринимается белый цвет в мире:

  • В Европе он связан с браком, ангелами, врачами, больницей, миром
  • В Японии и Китае считается символом траура, а белая гвоздика символизирует смерть
  • На Востоке символ похорон
  • По фэн-шуй это Янь, металл, означает смерть, траур, равновесие, уверенность

Серебряный цвет

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

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

Автомобильные концерны предпочитают использовать в дизайне своих сайтов серебряный в сочетании серо-синей и белой красками.
Так обозначается серебристый цвет — #С0С0С0

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

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

Таблица цветовых кодов | Html | Статьи | Программирование Realcoding.Net

Русское название

In English

Код / Сode

БелоснежныйSnow

FFFAFA

Призрачно-белыйGhostwhite

F8F8FF

Белый-антикAntique White

FAEBD7

КремовыйCream

FFFBF0

ПерсиковыйPeachpuff

FFDAB9

Белый-навахоNavajo White

FFDEAD

Шелковый оттенокCornsilk

FFF8DC

Слоновая костьIvory

FFFFF0

ЛимонныйLemon Chiffon

FFFACD

Морская раковинаSeashell

FFF5EE

МедовыйHoneydew

F0FFF0

ЛазурныйAzure

F0FFFF

Бледно-лиловыйLavender

E6E6FA

Голубой с красным отливомLavender Blush

FFF0F5

Тускло-розовыйMisty Rose

FFE4E1

БелыйWhite (*)

FFFFFF

ЧерныйBlack (*)

000000

Тускло-серыйDim Gray

696969

Синевато-серыйSlate Gray

708090

Грифельно-серыйLight Slate Gray

778899

СерыйGray

BEBEBE

Светло-серыйLight Gray

C0C0C0

Серый нейтральныйMedium Gray

A0A0A4

Темно-серыйDark Gray

808080

Полуночно-синийMidnight Blue

191970

Темно-синийNavy (*), Dark Blue

000080

ВасильковыйCornflower

6495ED

Грифельно-синийSlate Blue

6A5ACD

Светлый грифельно-синийLight Slate Blue

8470FF

Голубой королевскийRoyal Blue

4169E1

СинийBlue

0000FF

Небесно-голубойSky Blue

87CEEB

Небесно-голубой светлыйLight Sky Blue

87CEFA

Синий со стальным оттенкомSteel Blue

4682B4

Голубой со стальным оттенкомLight Steel Blue

B0C4DE

Светло-синийLight Blue

A6CAF0

Синий с пороховым оттенкомPowder Blue

B0E0E6

Бледно-бирюзовыйPale Turquoise

AFEEEE

БирюзовыйTurquoise

40E0D0

Зеленовато-голубойCyan (*)

00FFFF

Светлый цианLight Cyan

E0FFFF

Темный цианDark Cyan

008080

Серо-синийCadet Blue

5F9EA0

АквамаринAquamarine

7FFFD4

Цвет морской волныSeagreen

54FF9F

Цвет морской волны, светлыйLight Seagreen

20B2AA

Бледно-зеленыйPale Green

98FB98

Весенне-зеленыйSpring Green

00FF7F

Зеленая лужайкаLawn Green

7CFC00

ЗеленыйGreen (*)

00FF00

Средне-зеленыйMedium Green

C0DCC0

Темно-зеленыйDark Green

008000

Зеленовато-желтыйChartreuse

7FFF00

Зелено-желтыйGreen Yellow

ADFF2F

Лимонно-зеленыйLime Green

32CD32

Желто-зеленыйYellow Green

9ACD32

Зеленый леснойForest Green

228B22

ХакиForest Green

F0E68C

Бледно-золотистыйPale Goldenrod

EEE8AA

Светло-желтый золотистыйLight Goldenrod Yellow

FAFAD2

Светло-желтыйLight Yellow

FFFFE0

ЖелтыйYellow (*)

FFFF00

Темно-желтыйDark Yellow

808000

ЗолотойGold

FFD700

Светло-золотистыйLight Goldenrod

FFEC8B

ЗолотистыйGoldenrod

DAA520

ЖелтоватыйBurly Wood

DEB887

Розово-коричневыйRosy Brown

BC8F8F

Кожано-коричневыйSaddle Brown

8B4513

ОхраSienna

A0522D

БежевыйBeige

F5F5DC

ПшеничныйWheat

F5DEB3

Рыжевато-коричневыйTan

D2B48C

ШоколадныйChocolate

D2691E

КирпичныйFirebrick

B22222

КоричневыйBrown

A52A2A

СомонSalmon

FA8072

Светлый сомонLight Salmon

FFA07A

ОранжевыйOrange

FFA500

КоралловыйCoral

FF7F50

Коралловый светлыйLight Coral

F08080

Оранжево-красныйOrange Red

FF4500

КрасныйRed (*)

FF0000

Темно-красныйDark Red

800000

Теплый розовыйHot Pink

FF69B4

РозовыйPink

FFC0CB

Светло-розовыйLight Pink

FFB6C1

Красно-фиолетовый бледныйPale Violet Red

DB7093

Темно-бордовыйMaroon (*)

B03060

Красно-фиолетовыйViolet Red

D02090

ФуксинMagenta (*)

FF00FF

Фуксин темныйDark Magenta

800080

ФиолетовыйViolet

EE82EE

Темно-фиолетовыйPlum

DDA0DD

ОрсельOrchid

DA70D6

Фиолетово-синийBlue Violet

8A2BE2

ПурпурныйPurple

A020F0

Как использовать психологию цвета в маркетинге

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

Что такое психология цвета?

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

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

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

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

Совсем недавно швейцарский психиатр Карл Юнг назвал цвет «родным языком подсознания». Его психологические исследования привели его к развитию арт-терапии. Он считал, что самовыражение с помощью изображений и цветов может помочь пациентам оправиться от травм или страданий.

Вы заметили, как цвета входят в моду и выходят из нее? В 1970-х годах были популярны землистые тона, но в 80-х уступили место бирюзовому и розовато-лиловому. Позже на сцену вышли розовые и серо-голубые.

Например, посмотрите сериал « Безумцы », который шел с 2007 по 2015 год, но чей вымышленный временной интервал — с марта 1960 по ноябрь 1970 года. Зрители могут вспомнить, как цветовые палитры менялись с годами. Приглушенные коричневые и серые тона эпохи Эйзенхауэра уступили место смелым оттенкам шартреза, хурмы и бананово-желтого цвета конца 60-х годов.

Как цвета в маркетинге влияют на людей?

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

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

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

Подумайте о своих любимых брендах и о преобладании определенных цветов. У их логотипов ярко-красный цвет, как у Target или Netflix? Или вы тот человек, которому нравятся черный и белый цвета, как Nike? Возможно, вы предпочитаете желтый и предпочитаете Best Buy или Subway.

Цвет часто может быть единственной причиной покупки продукта.Исследование, проведенное секретариатом Сеульской международной выставки цветов, показало, что 93% покупателей уделяют внимание внешнему виду. И около 85% утверждают, что цвет является основной причиной, когда они совершают покупку!

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

Психология красного цвета

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

Красный в маркетинге: McDonald’s и Target

McDonald’s выбирает высокоэнергетический красный цвет (в сочетании с желтым), который привлекает детей, разжигает аппетит и вызывает чувство срочности.Эта тактика отлично подходит для Micky D’s. Возможно, это была бы не та самая до смешного большая сеть, какой она является сегодня, без столь эффективного использования цвета. Красный — это эмоции и страсть, именно так McDonald’s хочет, чтобы вы относились к своей продукции. Вспомните рекламную кампанию McDonald’s «Люблю».

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

Зеленый цвет Психология

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

Экологичность в маркетинге: Starbucks, John Deere, Whole Foods и BP

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

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

Whole Foods также использует этот цвет в своем логотипе. Бренд ассоциируется со здоровьем и природой и гордится высококачественными, натуральными и органическими продуктами. Фактически, добросовестность — это сама суть того, что отстаивает компания.

Интересно, что BP также намеренно или случайно использует цвет, ассоциируя его с окружающей средой.

Психология фиолетового цвета

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

Фиолетовый в маркетинге: Hallmark, Yahoo и Craigslist

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

В то же время с этой цветовой схемой ассоциируются некоторые другие причудливые бренды. Думаю, Yahoo! и Craigslist — два известных бренда с креативными названиями или подходами.

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

Психология синего цвета

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

Синий в маркетинге: Honda и American Express

Бренд Honda — это надежность. Хонде можно доверять (еще одно сильное предложение синего цвета), чтобы пробежать 200 000 миль или больше. American Express использует синий цвет, чтобы передать чувство безопасности и стабильности.Это два наиболее важных аспекта доверия компании своими деньгами и кредитом.

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

Оранжевый и желтый Психология цвета

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

Оранжевый и желтый в маркетинге: Harley Davidson и Snapchat

Harley Davidson использует оранжевый для передачи приключений, азарта и жизненной силы. Это основные вещи, которые ищет каждый мотоциклист. Логотип Snapchat желтого цвета, что является отходом от обычной синей темы социальных сетей.Желтый цвет обращается к своей молодой целевой аудитории идеями счастья, азарта и творчества.

Психология черного цвета

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

Черный в маркетинге: Nike и Chanel

Логотип Nike, сочетание черного и белого цветов, олицетворяет силу, силу и стабильность.Шанель использует черный цвет, чтобы передать роскошь, элегантность, изысканность, вневременность и, возможно, намек на таинственность. Это как раз те качества, которые Коко Шанель создала для воплощения своего бренда.

Серый цвет Психология

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

Серый в маркетинге: Lexus и Apple

Использование Lexus светло-серого цвета предполагает высокое качество, роскошь, элегантность и стабильность.Он также представляет зрелость тех, кто достиг в жизни. Хотя логотип Apple представляет собой буквально радугу цветов, в его фирменном стиле используется полностью серое яблоко. Таким образом, Apple, будучи новаторской и захватывающей, также заставляет задуматься. Компания чиста в своем подходе к продвижению продуктов будущего, а также сегодня. И является беспрецедентным лидером в области передовых технологий.

Психология белого цвета

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

Белый в маркетинге: Subway и Lego

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

Как цвета влияют на настроение

Вы когда-нибудь замечали, как цвета влияют на настроение? Например, желтый заставляет многих людей чувствовать себя счастливыми. Желтый цвет ассоциируется с солнцем; отсюда и использование таких фраз, как «солнечный нрав» или «солнечная сторона жизни».

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

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

Как цвет влияет на мозг

Хотя древние считали, что настроение коренится в жизненно важных органах — сердце, печени, желчном пузыре и селезенке — мы знаем, что источник находится в другом не менее важном органе: мозге.

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

Ни один из эксплойтов цветов психологии не теряется для брендов.

Мелисса Хьюз, доктор философии, основательница Andrick Group, организации профессионального развития и автор книги «Счастливый час с Эйнштейном», называет себя «фанатом нейробиологии». Она говорит, что маркетологи годами знали, насколько эффективна цветовая психология и цветовые значения для узнаваемости бренда и отношения потребителей к продуктам и компаниям.

«Рассмотрим успех кетчупа Heinz Squirt Blastin’ Green в 2000 году », — говорит она. «Хотя с тех пор Heinz прекратил выпуск этого продукта, за первые семь месяцев было продано более 10 миллионов бутылок, в результате чего объем продаж составил 23 миллиона долларов — самый высокий рост продаж в истории бренда».

Как использовать цвета в бизнесе

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

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

В теории цвета красный — это цвет силы. Розовый идеально подходит для охвата женской демографии, но обычно не идеален, если вы хотите быть нейтральным в гендерном отношении. Зеленый цвет теплый, гостеприимный и обозначает здоровье, экологичность и доброжелательность. (Это также цвет денег, поэтому он вызывает мысли о богатстве.) Пурпурный — это цвет королевской власти, который добавляет нотку элегантности и престижа.Оранжевый — это энергия. Браун расслабляет… и так далее.

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

Выберите два основных цвета

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

Эта идея особенно важна при разработке вашего логотипа. Подумайте о цветовой гамме основных брендов. FedEx, McDonald’s и Best Buy ограничивают свои логотипы двумя цветами и выстраивают вокруг них всю цветовую лексику.

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

Веб-сайт

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

Конечно, выбор цвета не ограничивается вашим логотипом, но распространяется и на продукты или услуги, которые вы предлагаете.

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

Это тоже зависит от вашей целевой аудитории.Женщины предпочитают синий, фиолетовый и зеленый, а мужчины — синий, зеленый и черный.

Кнопки с призывом к действию

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

Наибольшую конверсию имеют яркие первичные и вторичные цвета — красный, зеленый, оранжевый и желтый. Красные привлекают внимание. Желтый обычно ассоциируется с предупреждениями (подумайте о знаках «мокрый пол»). Зеленый лучше всего подходит для экологичных и уличных товаров.Синий также иногда используется, поскольку он означает надежность. Худшие цвета — черный (мрачный и негативный), белый (отсутствие цвета) и коричневый (тусклый и некрасивый).

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

Вывески

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

Покрытия для транспортных средств

Помните о следующих цветовых ассоциациях, думая о покрытиях для транспортных средств. В порядке приоритета: Яркие цвета> Насыщенные и темные цвета> Светлые цвета> Оттенки серого и приглушенные цвета. Используйте эту инфографику об автомобилях в качестве руководства.

Обложка профиля в социальных сетях

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

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

Локальный маркетинг

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

Первичные, вторичные и третичные цвета

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

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

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

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

Основной

Основные цвета — красный, желтый и синий, как и в детских игрушках. Основные цвета являются основой всех других цветов и присутствуют в самых основных элементах, с которыми люди сталкиваются на Земле: огне, воде и солнечном свете.

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

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

Вторичный

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

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

Третичный цвет

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

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

Оттенки, оттенки и тона

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

Оттенки

Оттенки возникают в результате добавления белого к цвету. Тонирование делает цвет более светлым, тем самым уменьшая его темноту и интенсивность.

Оттенки

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

Тона

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

Сравнение теплых и холодных цветов

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

Использование оранжевого цвета в логотипе Home Depot — идеальное использование теплых цветовых ассоциаций, потому что тепло и счастье — это то, что каждый хочет иметь в своем доме. Frito Lay использует значения красного и желтого цветов, чтобы выразить предвкушение желания вкусных чипсов и удовлетворение, которое вы испытываете, утоляя голод.

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

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

Высокая и низкая контрастность

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

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

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

Дополнительные цвета

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

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

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

Наконец, иногда можно встретить аббревиатуры RGB, CMYK и PMS. Это термины графического дизайна. RGB лучше всего подходит для цифровых изображений, а CMYK — для печати. PMS (Pantone) — палитра, широко используемая во многих отраслях промышленности.

Лучшие цвета в маркетинге

Каким образом вы применяете цвета в психологии для создания различных значений в маркетинге и рекламе? Вы выбираете наилучшие цвета для своего бренда, рекламных и маркетинговых материалов?

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

Если вам нужна дополнительная информация о психологии цвета, см. Инфографику ниже.

[Щелкните, чтобы увеличить]

См. Еще одну инфографику о психологии цвета.

Источник изображения: Homestead

Подробнее в: Marketing 101

Сдать кровь | Найти местную пробку крови

Сдать кровь | Найдите местный Blood Drive | Американский Красный Крест