Психология цвета в веб-дизайне
Во-первых, хорошо выглядеть. Во-вторых, обладать удобной и понятной навигацией. В-третьих, как можно дольше удерживать внимание посетителей. И, наконец, ненавязчиво вести их через все этапы воронки конверсии, подталкивая к совершению действий, которые соответствуют целям компании.
Поскольку предназначение веб-дизайна состоит в том, чтобы влиять на поведение людей, дизайнеры все чаще обращаются к психологии цвета, правильное применение которой помогает создавать более эффективные интерфейсы. Цвет позволяет сыграть на культурных особенностях, внушить целевой аудитории доверие, создать ощущение срочности или таинственности.
Если вы хотите разрабатывать более успешные проекты, необходимо изучить основы психологии цвета. Правильные цвета помогут настроить клиентов на нужный лад, чтобы они совершали определенные действия. Грамотно подобранный цвет способен повысить конверсию, привлекая внимание пользователей и вызывая у них необходимые для приобретения товаров эмоции.
Именно от цветовой палитры зачастую зависит, как люди будут воспринимать бренд и его ценности. При этом главный вопрос остается без ответа: какой цвет подойдет моему бренду? Какой оттенок выбрать, чтобы произвести сильное впечатление?
Психология играет важную роль в процессе убеждения. Помните, что убеждение следует отличать от принуждения, манипуляции или излишней настойчивости. Суть в том, чтобы изменить отношение человека к определенным вещам и побудить его к совершению покупки или другого целевого действия.
Цвет и конверсия
Исследования показали, что между цветом продукта и желанием человека его приобрести есть определенная связь. Каждый раз, когда мы видим тот или иной цвет, в специальном отделе мозга, гипоталамусе, происходит цепочка реакций. В щитовидную железу попадают гормоны, вызывающие эмоции, которые влияют на наше поведение.
На самом деле от 62 до 90% решений о покупке обусловлены именно цветом! Таким образом, более тщательное изучение психологии цвета поможет значительно повысить конверсию вашего сайта.
В каких случаях цвет особенно важен?
Возможно, вы не всегда задумываетесь о том, правильные ли цвета используете, однако все они имеют значение. Обратите особое внимание на:
- изображения
- всплывающие окна
- рамки
- заголовки
- оттенки фона
- важные баннеры и первый экран на главной странице
- кнопки, особенно призывы к действию
То, какой именно цвет будет наиболее эффективен для каждого из указанных элементов, зависит от целевой аудитории сайта. Давайте рассмотрим эту тему подробнее.
Контраст и яркость
Яркость играет одну из ключевых ролей в успехе вашего сайта. В целом считается, что женщины предпочитают приглушенные цвета, а мужчины — более яркие.
Контраст — еще один важный фактор, который влияет на читабельность текстового контента. Никто не захочет излишне напрягаться, чтобы понять, что написано на CTA-кнопке или другом элементе интерфейса.
Не добавляйте слишком яркие или, наоборот, бледные надписи поверх другого контента.
Представьте себе черную кнопку “Купить сейчас” на темно-сером фоне. Скорее всего, вы ее даже не заметите.
Цветовая схема вашего сайта влияет на его доступность и юзабилити. Незаметные элементы навигации и раскрывающиеся списки — это так же плохо, как и их полное отсутствие. Откройте свой сайт и изучите его, поставив себя на место пользователя, и вы поймете, о чем идет речь.
Исследования в области психологии цвета
В блоге Moz был опубликован следующий кейс: компания-разработчик цифровых игровых автоматов просто изменила цвет кнопки призыва к действию с зеленого на желтый. Это привело к умопомрачительному росту конверсии — на 187,4%!
Протестируйте на своем сайте разные цветовые схемы, например, сравните несколько вариантов с помощью А/Б-теста. В результате вы сможете выбрать те цвета, которые окажут на целевую аудиторию максимальное воздействие.
Рассмотрим еще одно исследование, доказывающее, что психология цвета играет в дизайне важную роль.
В академическом сообществе красный цвет обычно ассоциируется с ошибками. Исследователи из Университета Рочестера решили проверить эту гипотезу и провели 4 разных эксперимента. Они обнаружили, что, если учащийся использует красный цвет, например, носит красную футболку, это действительно негативно влияет на его успеваемость.
10 цветов с точки зрения маркетинга
Опираясь на психологию цвета, мы составили список цветов и эмоций, которые они вызывают. При правильном использовании они придадут интерфейсу индивидуальность и помогут повысить конверсию.
1. Розовый
Розовый станет отличной опцией, если ваша целевая аудитория преимущественно состоит из женщин. Он ассоциируется с радостью и романтикой, а также юностью и женственностью. Этот игривый цвет напоминает о жевательной резинке и невинности. Вы не ошибетесь, выбрав его, если сайт имеет ретро-тематику или ориентирован на женскую аудиторию.
Вы найдете больше вдохновляющих примеров в нашей подборке розовых веб-сайтов.
2. Синий
Синий цвет ассоциируется с надежностью и создает ощущение прохлады. Он отлично подойдет для сайтов, где пользователи получают рецепты на лекарства, переводят денежные средства или совершают любые другие операции, требующие определенной степени доверия.
Вы найдете больше вдохновляющих примеров в нашей подборке синих веб-сайтов.
3. Красный
Никакой другой цвет не способен так привлечь внимание человека, как красный. Именно поэтому его считают одним из наиболее эффективных для обозначения призыва к действию. Если в вашем проекте есть кнопка “Действуйте прямо сейчас”, не задумываясь выбирайте для нее красный цвет.
Он будоражит, возбуждает и бодрит. Красный ассоциируется со страстью, властью и иногда гневом. Его часто используют для обозначения предупреждений или опасности, однако этот цвет также может символизировать силу, решимость и смелость.
Теплые оттенки красного, к примеру, кирпичные или бордовые, действуют успокаивающе и обладают особой силой.
Это прекрасный выбор для компании, которая хочет показать, что она является надежной и долговечной, прямо как кирпичная стена. Яркие красные оттенки, например, “настоящий красный” или томатный, будут отлично смотреться на молодежных сайтах, выражающих энергию и решительность.
Вы найдете больше вдохновляющих примеров в нашей подборке красных веб-сайтов.
4. Зеленый
Зеленый — это цвет умиротворения и природы. Глядя на него, пользователи успокаиваются, восстанавливаются, испытывают положительные эмоции. Темные оттенки часто ассоциируются с деньгами, поэтому их обычно используют бренды, которые обещают клиентам процветание, рост и стабильность. Светлые — с весной и развитием: они транслируют расслабление, свежесть и искренность.
Поэтому, если ваш сайт посвящен какой-то экологической проблеме или продаже органических продуктов, смело выбирайте для фона зеленый цвет.
Вы найдете больше вдохновляющих примеров в нашей подборке зеленых веб-сайтов.
5. Желтый
В маркетинге желтый цвет символизирует здоровую психику без тревожных и депрессивных мыслей.
Он лучше всего подходит для оформления интернет-магазинов, где продаются игрушки и детская одежда. Кроме того, желтый зачастую воспринимается как цвет предостережения.
Многие считают, что желтый цвет является самым энергичным. Люди с детства привыкают ассоциировать его с солнцем, теплом и счастьем. Именно поэтому он идеально подходит для сайтов, целевой аудиторией которых являются дети, поскольку он сразу привлекает их внимание.
Нежные оттенки желтого вызывают более сложные ассоциации. Темные — могут указывать на значительный возраст, богатую историю, поскольку напоминают пожелтевший пергамент. С помощью подобных оттенков дизайнер может отразить мудрость или вызывать любопытство. Желтый станет отличной опцией для брендов, которые хотят выглядеть авторитетно и интеллигентно.
Вы найдете больше вдохновляющих примеров в нашей подборке желтых веб-сайтов.
6. Фиолетовый
Фиолетовый цвет излучает элегантность и утонченность. Он идеально подойдет для сайта, на котором представлены нишевые и люксовые продукты.
Вы найдете больше вдохновляющих примеров в нашей подборке фиолетовых веб-сайтов.
7. Оранжевый
Оранжевый также может выглядеть изысканно, в то же время он привлекает внимание пользователей. Этот цвет является более сбалансированным и менее вызывающим, чем красный. Яркий, активный, дружелюбный и уютный, он идеально подходит для проектов, в которых требуется показать движение и энергию.
Оранжевый зачастую выбирают бренды, желающие продемонстрировать свою креативность, ведь это уникальный и интересный цвет, который остается теплым и создает ощущение комфорта. Фон оранжевого цвета отлично смотрится на сайтах технологических компаний, деятельность которых связана с гаджетами.
8. Золотой
Золотой — цвет драгоценного металла, символизирующий власть и престиж. Он прекрасно сочетается с другими элегантными цветами, например, зеленым и фиолетовым.
9. Черный
Черный — универсальный цвет, который гармонично смотрится в комбинации с любыми другими оттенками.
Лучше всего он подходит для создания контраста с остальными цветами на сайте.
Вы найдете больше вдохновляющих примеров в нашей подборке черных веб-сайтов.
10. Коричневый
Коричневый — неприметный цвет, который успокаивает и расслабляет пользователей. Его часто можно встретить на сайтах компаний, деятельность которых связана с поддержанием здорового образа жизни.
Кремовые оттенки — спокойные, элегантные, чистые. Они подойдут для фона, если бренд хочет выглядеть традиционно. Темно-бежевые оттенки — консервативные, символизируют почтительность и благочестие. Кому то они могут показаться скучными, а кого-то будут успокаивать, поэтому на них следует остановить свой выбор, если хочется сделать сайт не слишком смелым или бросающимся в глаза.
Темно-коричневый цвет выглядит надежным и безопасным, как буханка хлеба. Он ассоциируется с теплом и уютом. Его используют компании, которые хотят продемонстрировать свой опыт и показать, что на них можно положиться.
Вы найдете больше вдохновляющих примеров в нашей подборке коричневых веб-сайтов.
Заключение
Цвета могут создавать на сайте особенную атмосферу или настроение. Когда цвет производит неверное впечатление, показатель отказов растет, поскольку интерфейс выглядит непрофессиональным и ненадежным.
Если же цвет отражает индивидуальность бренда, пользователи понимают, что сайт заслуживает доверия и занимает свою нишу. Неудивительно, что правильное применение цвета остается одной из главных задач веб-дизайнера.
Чтобы вам было проще, воспользуйтесь этими инструментами для создания цветовых палитр. Поэкспериментируйте — проверьте, насколько хорошо выглядит тот или иной цвет. Выбирая самые эффективные оттенки, применяйте основные принципы психологии цвета. Грамотно подобранные цвета, несомненно, помогут значительно повысить коэффициент конверсии.
Наш мир становится все более многообразным. Помните, что значения цветов в разных культурах отличаются: то, что в одной из них воспринимается положительно, в другой может считаться негативным.
Например, в Китае белый цвет ассоциируется со смертью, в то время как в христианских странах невесты носят платья белого цвета.
Практически везде фиолетовый считается женственным, а в Бразилии — он также связан со смертью.
Таким образом, вы должны точно знать, представители каких культур составляют вашу целевую аудиторию, чтобы выбрать то сочетание цветов, которое лучше всего будет работать для потенциальных клиентов.
Безопасные веб цвета » Инструменты вебмастера
Главная » Безопасные веб цвета
Когда было время 256-цветных мониторов применялась «безопасная палитра», конечно она применяется и сейчас. У безопасной палитры всего три главных цвета для смешивания — R G B и соответствуют значениям: 00, 33, 66, 99, CC, FF.
Вообще, цветовая палитра 6x6x6 является приоритетной при выборе цвета для фона или цвета шрифта.
Вашему вниманию представляется палитра «безопасных веб цветов», которые одинаково хорошо будут отображаться во всех браузерах и во всех оперативных системах.
| Имя цвета для HTML | Код для HTML | R G B |
|---|---|---|
Красные | ||
| IndianRed | CD 5C 5C | 205 92 92 |
| LightCoral | F0 80 80 | 240 128 128 |
| Salmon | FA 80 72 | 250 128 114 |
| DarkSalmon | E9 96 7A | 233 150 122 |
| LightSalmon | FF A0 7A | 255 160 122 |
| Crimson | DC 14 3C | 220 20 60 |
| Red | FF 00 00 | 255 0 0 |
| FireBrick | B2 22 22 | 178 34 34 |
| DarkRed | 8B 00 00 | 139 0 0 |
Розовые | ||
| Pink | FF C0 CB | 255 192 203 |
| LightPink | FF B6 C1 | 255 182 193 |
| HotPink | FF 69 B4 | 255 105 180 |
| DeepPink | FF 14 93 | 255 20 147 |
| MediumVioletRed | C7 15 85 | 199 21 133 |
| PaleVioletRed | DB 70 93 | 219 112 147 |
Оранжевые | ||
| LightSalmon | FF A0 7A | 255 160 122 |
| Coral | FF 7F 50 | 255 127 80 |
| Tomato | FF 63 47 | 255 99 71 |
| OrangeRed | FF 45 00 | 255 69 0 |
| DarkOrange | FF 8C 00 | 255 140 0 |
| Orange | FF A5 00 | 255 165 0 |
Жёлтые | ||
| Gold | FF D7 00 | 255 215 0 |
| Yellow | FF FF 00 | 255 255 0 |
| LightYellow | FF FF E0 | 255 255 224 |
| LemonChiffon | FF FA CD | 255 250 205 |
| LightGoldenrodYellow | FA FA D2 | 250 250 210 |
| PapayaWhip | FF EF D5 | 255 239 213 |
| Moccasin | FF E4 B5 | 255 228 181 |
| PeachPuff | FF DA B9 | 255 218 185 |
| PaleGoldenrod | EE E8 AA | 238 232 170 |
| Khaki | F0 E6 8C | 240 230 140 |
| DarkKhaki | BD B7 6B | 189 183 107 |
Фиолетовые | ||
| Lavender | E6 E6 FA | 230 230 250 |
| Thistle | D8 BF D8 | 216 191 216 |
| Plum | DD A0 DD | 221 160 221 |
| Violet | EE 82 EE | 238 130 238 |
| Orchid | DA 70 D6 | 218 112 214 |
| Fuchsia | FF 00 FF | 255 0 255 |
| Magenta | FF 00 FF | 255 0 255 |
| MediumOrchid | 186 85 211 | |
| MediumPurple | 93 70 DB | 147 112 219 |
| BlueViolet | 8A 2B E2 | 138 43 226 |
| DarkViolet | 94 00 D3 | 148 0 211 |
| DarkOrchid | 99 32 CC | 153 50 204 |
| DarkMagenta | 8B 00 8B | 139 0 139 |
| Purple | 80 00 80 | 128 0 128 |
| Indigo | 4B 00 82 | 75 0 130 |
| SlateBlue | 6A 5A CD | 106 90 205 |
| DarkSlateBlue | 48 3D 8B | 72 61 139 |
Зелёные | ||
| GreenYellow | AD FF 2F | 173 255 47 |
| Chartreuse | 7F FF 00 | 127 255 0 |
| LawnGreen | 7C FC 00 | 124 252 0 |
| Lime | 00 FF 00 | 0 255 0 |
| LimeGreen | 32 CD 32 | 50 205 50 |
| PaleGreen | 98 FB 98 | 152 251 152 |
| LightGreen | 90 EE 90 | 144 238 144 |
| MediumSpringGreen | 00 FA 9A | 0 250 154 |
| SpringGreen | 00 FF 7F | 0 255 127 |
| MediumSeaGreen | 3C B3 71 | 60 179 113 |
| SeaGreen | 2E 8B 57 | 46 139 87 |
| ForestGreen | 22 8B 22 | 34 139 34 |
| Green | 00 80 00 | 0 128 0 |
| DarkGreen | 00 64 00 | 0 100 0 |
| YellowGreen | 9A CD 32 | 154 205 50 |
| OliveDrab | 6B 8E 23 | 107 142 35 |
| Olive | 80 80 00 | 128 128 0 |
| DarkOliveGreen | 55 6B 2F | 85 107 47 |
| MediumAquamarine | 66 CD AA | 102 205 170 |
| DarkSeaGreen | 8F BC 8F | 143 188 143 |
| LightSeaGreen | 20 B2 AA | 32 178 170 |
| DarkCyan | 00 8B 8B | 0 139 139 |
| Teal | 00 80 80 | 0 128 128 |
Синие | ||
| Aqua | 00 FF FF | 0 255 255 |
| Cyan | 00 FF FF | 0 255 255 |
| LightCyan | E0 FF FF | 224 255 255 |
| PaleTurquoise | AF EE EE | 175 238 238 |
| Aquamarine | 127 255 212 | |
| Turquoise | 40 E0 D0 | 64 224 208 |
| MediumTurquoise | 48 D1 CC | 72 209 204 |
| DarkTurquoise | 00 CE D1 | 0 206 209 |
| CadetBlue | 5F 9E A0 | 95 158 160 |
| SteelBlue | 46 82 B4 | 70 130 180 |
| LightSteelBlue | B0 C4 DE | 176 196 222 |
| PowderBlue | B0 E0 E6 | 176 224 230 |
| LightBlue | AD D8 E6 | 173 216 230 |
| SkyBlue | 135 206 235 | |
| LightSkyBlue | 87 CE FA | 135 206 250 |
| DeepSkyBlue | 00 BF FF | 0 191 255 |
| DodgerBlue | 1E 90 FF | 30 144 255 |
| CornflowerBlue | 64 95 ED | 100 149 237 |
| MediumSlateBlue | 7B 68 EE | 123 104 238 |
| RoyalBlue | 41 69 E1 | 65 105 225 |
| Blue | 00 00 FF | 0 0 255 |
| MediumBlue | 00 00 CD | 0 0 205 |
| DarkBlue | 00 00 8B | 0 0 139 |
| 00 00 80 | 0 0 128 | |
| MidnightBlue | 19 19 70 | 25 25 112 |
Коричневые | ||
| Cornsilk | FF F8 DC | 255 248 220 |
| BlanchedAlmond | FF EB CD | 255 235 205 |
| Bisque | FF E4 C4 | 255 228 196 |
| NavajoWhite | FF DE AD | 255 222 173 |
| Wheat | F5 DE B3 | 245 222 179 |
| BurlyWood | DE B8 87 | 222 184 135 |
| Tan | D2 B4 8C | 210 180 140 |
| BC 8F 8F | 188 143 143 | |
| SandyBrown | F4 A4 60 | 244 164 96 |
| Goldenrod | DA A5 20 | 218 165 32 |
| DarkGoldenrod | B8 86 0B | 184 134 11 |
| Peru | CD 85 3F | 205 133 63 |
| Chocolate | D2 69 1E | 210 105 30 |
| SaddleBrown | 8B 45 13 | 139 69 19 |
| Sienna | A0 52 2D | 160 82 45 |
| Brown | A5 2A 2A | 165 42 42 |
| Maroon | 80 00 00 | 128 0 0 |
Белые | ||
| White | FF FF FF | 255 255 255 |
| Snow | FF FA FA | 255 250 250 |
| Honeydew | F0 FF F0 | 240 255 240 |
| MintCream | F5 FF FA | 245 255 250 |
| Azure | F0 FF FF | 240 255 255 |
| AliceBlue | F0 F8 FF | 240 248 255 |
| GhostWhite | F8 F8 FF | 248 248 255 |
| WhiteSmoke | F5 F5 F5 | 245 245 245 |
| Seashell | FF F5 EE | 255 245 238 |
| Beige | F5 F5 DC | 245 245 220 |
| OldLace | FD F5 E6 | 253 245 230 |
| FloralWhite | FF FA F0 | 255 250 240 |
| Ivory | FF FF F0 | 255 255 240 |
| AntiqueWhite | FA EB D7 | 250 235 215 |
| Linen | FA F0 E6 | 250 240 230 |
| LavenderBlush | FF F0 F5 | 255 240 245 |
| MistyRose | FF E4 E1 | 255 228 225 |
Серые | ||
| Gainsboro | DC DC DC | 220 220 220 |
| LightGrey | D3 D3 D3 | 211 211 211 |
| Silver | C0 C0 C0 | 192 192 192 |
| DarkGray | A9 A9 A9 | 169 169 169 |
| Gray | 80 80 80 | 128 128 128 |
| DimGray | 69 69 69 | 105 105 105 |
| LightSlateGray | 77 88 99 | 119 136 153 |
| SlateGray | 70 80 90 | 112 128 144 |
| DarkSlateGray | 2F 4F 4F | 47 79 79 |
| Black | 00 00 00 | 0 0 0 |
Если случилось так, что ваш компьютер не доступен и необходимо отладить Java скрипт, то можете воспользоваться JavaScript редактором онлайн, который подсвечивает синтаксис в языке JavaScript
Категории
Таблица цветовWeb Safe Colors
Простой ответ заключается в том, что две системы по-разному обрабатывают цвета.
Хотя они оба используют палитру из 256 цветов, палитры не включают одни и те же цвета.
Системная палитра Windows резервирует для своего использования 20 цветов, а Netscape резервирует для своего использования 13 дополнительных цветов.
Поскольку эти цвета зарезервированы для других целей, ваша система создает цвета, которые она не может использовать, путем сглаживания. Чтобы решить эту проблему, была создана палитра 6 x 6 x 6 с 216 цветами, общими для платформ.
Хотя палитра 216 не является хорошим выбором для каждого изображения, чью палитру вы уменьшаете для формата GIF (особенно фотографии и картины), во многих случаях она может быть очень полезной. Например, при выборе тегов цвета фона или шрифта в HTML или при создании простой графики, такой как маркеры, стрелки, кнопки и текстовая графика.
Два веб-сайта, которые создали палитру из 216 цветов в форме образца для использования в PhotoShop. Их можно загрузить по адресу: http://webreference.com/dev/graphics/palette.
html или http://www.homepage.co.uk/webcolour/.
Эти полезные страницы также содержат инструкции по использованию палитры и очень подробную информацию о цветах в Интернете.
Ниже приведена цветовая диаграмма палитры 216, которая включает значения RGB и шестнадцатеричный код для каждого цвета.
| RGB 0, 0, 0 HEX 000000 | RGB 0, 0, 51 HEX 000033 | RGB 0, 0, 102 HEX 000066 | RGB 0, 0, 153 HEX 000099 | RGB 0, 0, 204 HEX 0000CC | RGB 0, 0, 255 HEX 0000FF | |
| RGB 0, 51, 0 HEX 003300 | RGB 0, 51, 51 HEX 003333 | RGB 0, 51, 102 HEX 003366 | RGB 0, 51, 153 HEX 003399 | RGB 0, 51, 204 HEX 0033CC | RGB 0, 51, 255 HEX 0033FF | |
| RGB 0, 102, 0 HEX 006600 | RGB 0, 102, 51 HEX 006633 | RGB 0, 102, 102 HEX 006666 | RGB 0, 102, 153 HEX 006699 | RGB 0, 102, 204 HEX 0066CC | RGB 0, 102, 255 HEX 0066FF | |
| RGB 0, 153, 0 HEX 009900 | RGB 0, 153, 51 HEX 009933 | RGB 0, 153, 102 HEX 009966 | RGB 0, 153, 153 HEX 009999 | RGB 0, 153, 204 HEX 0099CC | RGB 0, 153, 255 HEX 0099FF | |
| RGB 0, 204, 0 HEX 00CC00 | RGB 0, 204, 51 HEX 00CC33 | RGB 0, 204, 102 HEX 00CC66 | RGB 0, 204, 153 HEX 00CC99 | RGB 0, 204, 204 HEX 00CCCC | RGB 0, 204, 255 HEX 00CCFF | |
| RGB 0, 255, 0 HEX 00FF00 | RGB 0, 255, 51 HEX 00FF33 | RGB 0, 255, 102 HEX 00FF66 | RGB 0, 255, 153 HEX 00FF99 | RGB 0, 255, 204 HEX 00FFCC | RGB 0, 255, 255 HEX 00FFFF | |
| RGB 51, 0, 0 HEX 330000 | RGB 51, 0, 51 HEX 330033 | RGB 51, 0, 102 HEX 330066 | RGB 51, 0, 153 HEX 330099 | RGB 51, 0, 204 HEX 3300CC | RGB 51, 0, 255 HEX 3300FF | |
| RGB 51, 51, 0 HEX 333300 | RGB 51, 51, 51 HEX 333333 | RGB 51, 51, 102 HEX 333366 | RGB 51, 51, 153 HEX 333399 | RGB 51, 51, 204 HEX 3333CC | RGB 51, 51, 255 HEX 3333FF | |
| RGB 51, 102, 0 HEX 336600 | RGB 51, 102, 51 HEX 336633 | RGB 51, 102, 102 HEX 336666 | RGB 51, 102, 153 HEX 336699 | RGB 51, 102, 204 HEX 3366CC | RGB 51, 102, 255 HEX 3366FF | |
| RGB 51, 153, 0 HEX 339900 | RGB 51, 153, 51 HEX 339933 | RGB 51, 153, 102 HEX 339966 | RGB 51, 153, 153 HEX 339999 | RGB 51, 153, 204 HEX 3399CC | RGB 51, 153, 255 HEX 3399FF | |
| RGB 51, 204, 0 HEX 33CC00 | RGB 51, 204, 51 HEX 33CC33 | RGB 51, 204, 102 HEX 33CC66 | RGB 51, 204, 153 HEX 33CC99 | RGB 51, 204, 204 HEX 33CCCC | RGB 51, 204, 255 HEX 33CCFF | |
| RGB 51, 255, 0 HEX 33FF00 | RGB 51, 255, 51 HEX 33FF33 | RGB 51, 255, 102 HEX 33FF66 | RGB 51, 255, 153 HEX 33FF99 | RGB 51, 255, 204 HEX 33FFCC | RGB 51, 255, 255 HEX 33FFFF | |
| RGB 102, 0, 0 HEX 6000200 9600200 | ||||||
| RGB 102, 0, 51 HEX 660033 | RGB 102, 0, 102 HEX 660066 | RGB 102, 0, 153 HEX 660099 | RGB 102, 0, 204 HEX 6600CC | RGB 102, 0, 255 HEX 6600FF | ||
| RGB 102, 51, 0 HEX 663300 | RGB 102, 51, 51 HEX 663333 | RGB 102, 51, 102 HEX 663366 | RGB 102, 51, 153 HEX 663399 | RGB 102, 51, 204 HEX 6633CC | RGB 102, 51, 255 HEX 6633FF | |
| RGB 102, 102, 0 HEX 666600 | RGB 102, 102, 51 HEX 666633 | RGB 102, 102, 102 HEX 666666 | RGB 102, 102, 153 HEX 666699 | RGB 102, 102, 204 HEX 6666CC | RGB 102, 102, 255 HEX 6666FF | |
| RGB 102, 153, 0 HEX 669900 | RGB 102, 153, 51 Шестнадцатеричный 669933 | RGB 102, 153, 102 HEX 669966 | RGB 102, 153, 153 HEX 669999 | RGB 102, 153, 204 HEX 6699CC | RGB 102, 153, 255 HEX 6699FF | |
| RGB 102, 204, 0 HEX 66CC00 | RGB 102, 204, 51 HEX 66CC33 | RGB 102, 204, 102 HEX 66CC66 | RGB 102, 204, 153 Шестнадцатеричный 66CC99 | RGB 102, 204, 204 HEX 66CCCC | RGB 102, 204, 255 HEX 66CCFF | |
| RGB 102, 255, 0 HEX 66FF00 | RGB 102, 255, 51 HEX 66FF33 | RGB 102, 255, 102 HEX 66FF66 | RGB 102, 255, 153 HEX 66FF99 | RGB 102, 255, 204 HEX 66FFCC | RGB 102, 255, 255 HEX 66FFFF | |
| RGB 153, 0, 0 HEX 9 | RGB 153, 0, 51 HEX 9 | RGB 153, 0, 102 HEX 9 | RGB 153, 0, 153 HEX 9 | RGB 153, 0, 204 HEX 9900CC | RGB 153, 0, 255 HEX 9900FF | |
| RGB 153, 51, 0 HEX 993300 | RGB 153, 51, 51 Шестигранник 993333 | RGB 153, 51, 102 HEX 993366 | RGB 153, 51, 153 HEX 993399 | RGB 153, 51, 204 HEX 9933CC | RGB 153, 51, 255 HEX 9933FF | |
| RGB 151, 102, 0 HEX 996600 | RGB 153, 102, 51 HEX 996633 | RGB 153, 102, 102 HEX 996666 | RGB 153, 102, 153 Шестнадцатеричный 996699 | RGB 153, 102, 204 HEX 9966CC | RGB 153, 102, 255 HEX 9966FF | |
| RGB 153, 153, 0 HEX 999900 | RGB 153, 153, 51 HEX 999933 | RGB 153, 153, 102 HEX 999966 | RGB 153, 153, 153 HEX 999999 | RGB 53, 153, 204 HEX 9999CC | RGB 153,153, 255 HEX 9999FF | |
| RGB 153, 204, 0 HEX 99CC00 | RGB 153, 204, 51 HEX 99CC33 | RGB 153, 204, 102 HEX 99CC66 | RGB 153, 204, 153 HEX 99CC99 | RGB 153, 204, 204 HEX 99CCCC | RGB 153, 204, 255 HEX 99CCFF | |
| RGB 153, 255, 0 HEX 99FF00 | RGB 153, 255, 51 HEX 99FF33 | RGB 153, 255, 102 HEX 99FF66 | RGB 153, 255, 153 HEX 99FF99 | RGB 153, 255, 206 HEX 99FFCC | RGB 155, 255, 255 HEX 99FFFF | |
| RGB 204, 0, 0 HEX CC00200 90 | RGB 204, 0, 51 HEX CC0033 | RGB 204, 0, 102 HEX CC0066 | RGB 204, 0, 153 HEX CC0099 | RGB HEX CC00CC | RGB 204, 0, 255 HEX CC00FF | |
| RGB 204, 51, 0 HEX CC3300 | RGB 204, 51, 102 HEX CC3333 | RGB 204, 51, 152 HEX CC3366 | RGB 204, 51, 153 HEX CC3399 | RGB 204, 51, 204 HEX CC33CC | RGB 204, 51, 255 HEX CC33FF | |
| RGB 204, 102, 0 HEX CC6600 | RGB 204, 102, 51 HEX CC6633 | RGB 204, 102, 102 HEX CC6666 | RGB 204, 102, 153 HEX CC6699 | RGB 204, 102, 204 HEX CC66CC | RGB 204, 102, 255 HEX CC66FF | |
| RGB 204, 153, 0 HEX CC9900 | RGB 204, 153, 51 HEX CC9933 | RGB 204, 153, 102 HEX CC9966 | RGB 204, 153, 153 HEX CC9999 | RGB 204,153, 204 HEX CC99CC | RGB 204, 153, 255 HEX CC99FF | |
| RGB 204, 204, 0 HEX CCCC00 | RGB 204, 204, 51 HEX CCCC33 | RGB 204, 204, 102 HEX CCCC66 | RGB 204, 204, 153 HEX CCCC99 | RGB 204, 204, 204 HEX CCCCCC | RGB 204, 204, 255 HEX CCCCFF | |
| RGB 204, 255, 0 HEX CCFF00 | RGB 204, 255, 51 HEX CCFF33 | RGB 204, 255, 102 HEX CCFF66 | RGB 204, 255, 153 HEX CCFF99 | RGB 204, 255, 204 HEX CCFFCC | RGB 204, 255, 255 HEX CCFFFF | |
| RGB 255, 0, 0 HEX FF0020 0 0 | ||||||
| RGB 255, 0, 51 HEX FF0033 | RGB 255, 0, 102 HEX FF0066 | RGB 255, 0, 153 HEX FF0099 | RGB 255, 0, 204 HEX FF00CC | RGB 255, 0, 255 HEX FF00FF | ||
| RGB 255, 51, 0 HEX FF3300 | RGB 255, 51, 51 HEX FF3333 | RGB 255, 51, 102 HEX FF3366 | RGB 255, 51, 153 HEX FF3399 | RGB 255, 51, 204 HEX FF33CC | RGB HEX FF33FF | |
| RGB 255, 102, 0 HEX FF6600 | RGB 255, 102, 51 HEX FF6633 | RGB 255, 102, 102 Шестигранник FF6666 | RGB 255, 102, 153 HEX FF6699 | RGB 255, 102, 204 HEX FF66CC | RGB 255, 102, 255 HEX FF66FF | |
| RGB 255, 153, 0 HEX FF9900 | RGB 255, 153, 51 HEX FF9933 | RGB 255, 153, 102 HEX FF9966 | RGB 255, 153, 153 HEX FF9999 | RGB 255, 153, 204 Шестнадцатеричный FF99CC | RGB 255, 153, 255 HEX FF99FF | |
| RGB 255, 204, 0 HEX FFCC00 | RGB 255, 204, 51 HEX FFCC33 | RGB 255, 204, 102 HEX FFCC66 | RGB 255, 204, 153 HEX FFCC99 | RGB 255, 204, 204 HEX FFCCCC | 255, 204, 255 HEX FFCCFF | |
| RGB 255, 255, 0 HEX FFFF00 | RGB 255, 255, 51 HEX FFFF33 | RGB 255, 255, 102 HEX FFFF66 | RGB 255, 255, 153 HEX FFFF99 | RGB 255, 255, 206 HEX FFFFCC | RGB 255, 255, 255 HEX FFFFFF | |
Web Colors | Университет маркетинга и коммуникаций
com/XSL/Variables»> На этой странице: - Основные цвета
- Дополнительные цвета
- Доступные для Интернета цветовые комбинации
- Примечание о специальных возможностях
Основные цвета
Синий
R0 G85 B162
#0055A2
Золото
R229 G168 B35
#E5A823
Серый
R147 G149 B151
#939597
com/XSL/Variables»/>Дополнительные цвета
Светло-серый
R210 G210 B210
#D2D2D2
Темно-серый
R102 G102 B102
#666666
Перекидной синий
Р28 Г136 Б244
#1К88Ф4
Градиент
Синий #0055A2, Серый #939597, Золотой #E5A823
Градиент можно использовать как фон или как наложение на черно-белые фотографии.
Градиент символизирует трансформацию и используется в кампании SJSU «Преобразование».
Доступные для Интернета цветовые комбинации
На всех цифровых платформах, в том числе на веб-сайтах, в блогах и социальных сетях, будьте внимательны цветового контраста. Пользователи с проблемами или ограничениями зрения могут столкнуться с трудностями. время различения цветов.
Доступный
Белый текст на синем фоне
Синий текст на белом фоне
Серый #666666 или более темный текст на белом фоне
Синий текст на сером #D2D2D2 или более светлом фоне
Черный текст на сером #D2D2D2 или более светлом фоне
Белый текст на сером фоне #666666 или темнее
Недоступно
Белый текст на желтом фоне
Синий текст на желтом фоне
Желтый текст на синем фоне
Желтый текст на белом фоне
Серый #939597 текст на белом фоне
Серый текст #D2D2D2 на белом фоне
Черный текст на сером #939597 фон
Черный текст на сером фоне #666666
Синий текст на сером фоне #939597
Синий текст на сером фоне #666666
Использование всех официальных цветов, включая желтый и серый, в качестве переднего плана или фона цвета в графических элементах в сети допустимы.
