На данной странице представлены специальные ключевые слова, которые можно применять для обозначения того или иного цвета на интернет сайтах, и при разработке на языках программирования для Web, таких как HTML, CSS, JavaScript, Flash, и др.
В ранних спецификациях W3C было определено всего 16 ключевых цветов. В более поздних спецификациях дополнительно было определено ещё 130 различных названий цветов. Следующая таблица содержит имена, и образцы цветов, которые ассоциируются с этими именами.
Таблица HTML цветов
Имена цветов в HTML не чувствительны к регистру, и могут записываться в любой форме
Также стоит отметить, что имея 147 различных ключевых слов (17 старых и 130 новых), не все цвета в этом списке уникальны. Некоторые имена обозначают один и тот же цвет. Так, например, и Grey, и Gray обозначают 50-процентный серый цвет #808080, а Magenta — это лишь синоним HTML цвета Fuchsia, и ссылается на шестнадцатеричный код цвета #FF00FF.
Правильное сочетание 30 цветов: от белого до чёрного.
- Белый сочетается со всеми цветами. Наилучшее сочетание с синим, красным и черным.
#FFFFFF #0000FF #FF0000 #000000 - Бежевый сочетается с голубым, коричневым, изумрудным, черным, красным.
#F5F5DC #00BFFF #A52A2A #50C878 #FF0000 - Серый (базовый цвет) сочетается с "капризными" цветами: фуксия, красный, фиолетовый, розовый, синий.
#808080 #FF00FF #FF0000 #8B00FF #FFC0CB #0000FF - Розовый сочетается с коричневым, зеленой мятой, оливковым, серым, бирюзовым, светло-голубым.
#FFC0CB #A52A2A #98FF98 #808000 #808080 #30D5C8 #E0FFFF - Фуксия сочетается с серым, желто-коричневым, зеленым лаймом, зеленой мятой, коричневым.
#FF00FF #808080 #D2B48C #32CD32 #98FF98 #A52A2A - Красный сочетается с желтым, бурым, зеленым, синим, черным.
#FF0000 #FFFF00 #45161C #008000 #0000FF #000000 - Томатно–красный сочетается с голубым, зеленой мятой, песочным, сливочно–белым, серым.
#EC2D01 #00BFFF #98FF98 #FCDD76 #FDF4E3 #808080 - Вишнево-красный сочетается с лазурным, серым, светло-оранжевым, песочным, бледно-желтым, бежевым.
#911E42 #007FFF #808080 #FFA000 #FCDD76 #FDEAA8 #F5F5DC - Малиново-красный сочетается с белым, черным и дамасской розой.
#DC143C #FFFFFF #000000 #FF4364 - Коричневый сочетается с ярко-голубым, кремовым, розовым, палевым, зеленым, бежевым.
#A52A2A #00FFFF #FFFDD0 #FFC0CB #FFF9D0 #008000 #F5F5DC - Светло-коричневый сочетается с бледно-желтым, кремовым, синим, зеленым, пурпурным, красным.
#CD853F #FDEAA8 #FFFDD0 #0000FF #008000 #C5007F #FF0000 - Темно-коричневый сочетается с лимонно-желтым, голубым, зеленой мятой, пурпурно-розовым, зеленым лаймом.
#654321 #FFF44F #00BFFF #98FF98 #FF99CC #32CD32 - Рыжевато-коричневый сочетается с розовым, темно-коричневым, синим, зеленым, пурпурным.
#B7410E #FFC0CB #654321 #0000FF #008000 #C5007F - Оранжевый сочетается с голубым, синим, лиловым, фиолетовым.
#FF8000 #00BFFF #0000FF #CC99FE #8B00FF - Светло–оранжевый сочетается с серым, коричневым, оливковым.
#FFA000 #808080 #A52A2A #808000 - Темно–оранжевый сочетается с бледно–желтым, оливковым, коричневым, вишнёвым.
#FF5300 #FDEAA8 #808000 #A52A2A #911E42 - Желтый сочетается с синим, лиловым, светло-голубым, фиолетовым, серым, черным.
#FFFF00 #0000FF #CC99FE #E0FFFF #8B00FF #808080 #000000 - Лимонно-желтый сочетается с вишнево-красным, коричневым, синим, серым.
#FFF44F #911E42 #A52A2A #0000FF #808080 - Бледно-желтый сочетается с фуксией, серым, коричневым, красным, желтовато-коричневым, синим, пурпурным.
#FDEAA8 #FF00FF #808080 #A52A2A #FF0000 #CC7722 #0000FF #C5007F - Золотисто-желтый сочетается с серым, коричневым, лазурным, красным.
#FFD700 #808080 #A52A2A #007FFF #FF0000 - Оливковый сочетается с апельсиновым, светло-коричневым, коричневым.
#808000 #FF8800 #CD853F #A52A2A - Зеленый сочетается с золотисто-коричневым, оранжевым, салатовым, желтым, коричневым, серым, кремовым, черным, сливочно-белым.
#008000 #DAA520 #FF8000 #7FFF00 #FFFF00 #A52A2A #808080 #FFFDD0 #000000 #FDF4E3 - Салатовый цвет сочетается с коричневым, желтовато-коричневым, палевым, серым, темно-синим, красным.
#7FFF00 #A52A2A #CC7722 #FFF9D0 #808080 #000080 #FF0000 - Бирюзовый сочетается с фуксией, вишнево-красным, желтым, коричневым, кремовым, темно-фиолетовым.
#30D5C8 #FF00FF #911E42 #FFFF00 #A52A2A #FFFDD0 #800080 - Электрик сочетается с золотисто-желтым, коричневым, светло-коричневым, серым, серебряным.
#2C75FF #FFD700 #A52A2A #CD853F #808080 #C0C0C0 - Голубой сочетается с красным, серым, коричневым, оранжевым, розовым, желтым.
#00BFFF #FF0000 #808080 #A52A2A #FF8000 #FFC0CB #FFFF00 - Темно-синий сочетается с светло-лиловым, голубым, желтовато-зеленым, коричневым, серым, бледно-желтым, оранжевым, зеленым, красным.
#000080 #DCD0FF #00BFFF #ADFF2F #A52A2A #808080 #FDEAA8 #FF8000 #008000 #FF0000 - Лиловый сочетается с оранжевым, розовым, темно-фиолетовым, оливковым, серым, желтым.
#CC99FE #FF8000 #FFC0CB #800080 #808000 #808080 #FFFF00 - Темно-фиолетовый сочетается с золотисто-коричневым, бледно-желтым, серым, бирюзовым, зеленой мятой, светло-оранжевым.
#800080 #DAA520 #FDEAA8 #808080 #30D5C8 #98FF98 #FFA000 - Черный универсален, сочетается со всеми цветами. Наилучшее сочетание с оранжевым, розовым, салатовым, красным, сиреневым, желтым, белым.
#000000 #FF8000 #FFC0CB #7FFF00 #FF0000 #C8A2C8 #FFFF00 #FFFFFF
- Таблица RGB цветов
- Таблица «безопасных» цветов
- Сводная таблица стилей
- Сводная таблица специальных символов
- Accessibility color wheel – сервис подбора цветов для фона и текста с учетом пользователей с ограниченными способностями.
Accessibility color wheel поможет выбрать оптимальную пару цветов. В интерфейсе присутствует панель, имитирующая 3 вида цветовой слепоты.
.
Прокомментировать/Отблагодарить
Выбор цвета и шрифта для рекламного обращения – параметр не менее важный, чем структура самого обращения.
В данном аспекте важно во-первых, привлечь внимание, во-вторых, создать максимально комфортные условия для зрительного восприятия обращения – тогда больше шансов, что его прочитают до конца.
Прежде всего, определимся, делать рекламу цветной или черно-белой.
Психологами доказано, что цветные объявления привлекают внимание намного больше, чем черно-белые. Поэтому если есть возможность использовать палитру из хотя бы двух цветов, этим желательно воспользоваться.
Согласно исследованиям, воспринимаются наиболее положительно и больше притягивают взгляд следующие цветовые сочетания:
- Черные буквы на желтом фоне.
- Зеленые буквы на белом фоне.
- Красные буквы на белом фоне.
Также следует обратить внимание на то, как воспринимаются различные цвета:
Красный – очень интенсивный, «активный» цвет, он сразу обращает на себя внимание. Это цвет страсти, который просто не может оставить наблюдателя равнодушным. Однако с ним надо быть осторожнее, потому что переизбыток будет оказывать нежелательное воздействие: утомит и вызовет раздражение.
Желтый – цвет радости, позитива. Используя его, вы получите и другое преимущество: желтый зрительно увеличивает площадь, на которой используется, придает ощущение объема. Однако не стоит использовать слишком много интенсивно-желтых элементов: этот цвет способен легко утомить.
Голубой, синий – цвета холодной части спектра. Светлые оттенки также придают ощущение объема. Они дают чувство спокойствия (темные оттенки – стабильности и шика), подталкивая вдумчиво и рассудительно вчитываться в информацию.
Оранжевый и черный – буквально притягивают внимание человека. Однако это сочетание вызывает чувство тревоги (обратите внимание, многие сигналы или, скажем, знаки, которые вызваны предупреждать, имеют именно такую окраску).
Зеленый – цвет спокойствия, уверенности и надежности. Светлые оттенки более игривы. Как правило, зеленый воспринимается достаточно положительно, главное – подобрать хорошее «обрамление» для этого цвета.
Белый – цвет чистоты, придает дополнительный объем, как бы «расширяет» пространство рекламного обращения. Белый – универсальный фон для какого-либо текста, он традиционно используется наиболее широко.
Выбирая палитру для рекламного обращения, следует избегать следующих решений:
- Ни в коем случае нельзя давать большие объемы текста «вывороткой» (светлые буквы на более темном фоне). Это очень быстро утомляет и в конечном итоге приводит к тому, что рекламное обращение игнорируют. Однако допустимо использовать этот прием для небольших частей рекламного обращения, дабы особенно выделить их, подчеркнуть значимость подаваемой таким образом информации.
- Использование несочетаемых цветов. Зеленые буквы на красном фоне, вне всякого сомнения, очень оригинальное решение. Вот только привлечет оно разве что маленьких детей, которым интересны все яркие предметы. Более взрослая аудитория будет воспринимать такую рекламу как безвкусную, уже не говоря о том, что снижение читаемости информации приводит к ее игнорированию.
- Использование бледных оттенков для текста при белом или светлом же фоне. Для того, чтобы «зацепить» аудиторию, пастельные тона не всегда годятся.
Помните: не люди должны читать вашу рекламу просто благодаря тому факту, что она есть, а вы должны создавать такие условия, чтобы ее прочли. Всегда найдется определенный процент целевой аудитории, который не имеет активной заинтересованности в вашем предложении. Если вы не склоните их на свою сторону при первых же секундах контакта, можно считать, что этих людей вы потеряли.
Шрифт
Современные технологии предлагают колоссальную свободу в выборе шрифта для рекламы.
Однако вы помните, что руководствоваться исключительно своими предпочтениями нежелательно, выше мы уже уточняли, почему.
Поговорим теперь о том, как должны выглядеть сами буквы, чтобы они вызывали интерес.
- Для рекламы рекомендуется использовать шрифт с засечками. Мы привели для вас пример букв такого шрифта. Посмотрев на рисунок, вы сразу сможете понять, что означает этот термин: вертикальные элементы каждой буквы сделаны с горизонтальными «палочками» (могут быть выполнены как в виде прямоугольников, так и иметь скругления). Эти «палочки» — ориентиры для наших глаз: взрослый человек, обладающий достаточными навыками в чтении, читает «по вершинам» — то есть, взгляд направлен на верхнюю часть букв, по их очертаниям и распознаются знакомые символы.
- В целом же шрифт должен быть легкочитаемым (то есть, давать большие объемы информации рукописным шрифтом или буквами с оригинальными очертаниями бессмысленно – изящная вязь может вызвать интерес, но будет препятствовать быстрому прочтению и восприятию информации).
- Кегль шрифта следует выбирать исходя из конкретной ситуации. Большие буквы привлекают внимание, выделяют информацию. Однако не стоит давать большие объемы текста только заглавными буквами – это утомляет.
- С выделениями текста полужирным начертанием тоже следует быть осторожными: это может утомлять и снижать читаемость.
В целом, универсальный совет, который можно дать тому, что выбирает цветовую палитру и шрифт для рекламы, будет звучать так: во всем хороша умеренность. Используя простые приемы, которые проверены многолетней практикой и воздерживаясь от крайностей, можно создать такую рекламу, которая только своим внешним видом будет привлекать людей и располагать к себе.
