Rgb красный цвет код: Red / Красный / #ff0000 / #f00 Схемы Шестнадцатеричных Кодов Цветов, Графики, Палитры и Краски

Содержание

Как использовать цветовые коды для цветов. Учeбник 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 с помощью шестнадцатеричной системы счисления, вам для начала нужно узнать о таком понятии как R G B

RGB — это сокращение от слов R ed G reen B lue (Красный Зелёный Синий).

Цвет в 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) .

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

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

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

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

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

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

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

Ниже более подробно описаны перечисленные форматы.

Цвета CSS — шестнадцатеричные коды

Шестнадцатеричный код цвета — это шестизначное представление цвета. Первые две цифры (RR) — представляют собой красное значение, следующие две — это зеленое значение (GG), а последние — синее значение (BB).

Цвета CSS — короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета — это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвета CSS — RGB значения

RGB значение — это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.

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

Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.

Генератор цветовых кодов

Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .

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

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

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

>>Управление цветом

Шестнадцатеричные значения цвета RGB

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

Во втором же случае за основу принимается черный цвет экрана монитора, каждая ячейка которого, светится одним из трех цветов: red -красный, green -зеленый и blue -синий. Тогда при полном отсутствии какого-либо свечения мы получаем чистый черный цвет экрана, а любой из требуемых цветов задается соотношением каждого из трех цветов. В этом случае мы получим RGB -способ передачи цвета. Основные цвета могут иметь значения от 0 до 255 , или от 0% до 100% , либо могут быть представлены в виде шестнадцатеричного значения. На рисунке ниже можно увидеть результаты смешения основных цветов.

Шестнадцатеричная система счисления, в отличии от десятичной в своём ряду цифр имеет не десять знаков, а шестнадцать — отсюда и название. Соответственно не повторяющихся вариантов сочетаний из двух цифр может быть только — 256 , для продолжения ряда цифр после 9 используются буквы от A до F , следовательно, ряд будет выглядеть так —

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Для перевода чисел из одной системы счисления в другую и наоборот воспользуйтесь калькулятором, приведенным ниже. Максимальное значение здесь может быть FF — 255 .

В этом случае цвет задается тремя шестнадцатеричными числами, каждое из которых состоит из двух цифр. Первое число определяет интенсивность красного цвета, среднее- зеленого , последнее- синего цвета. Все числа могут принимать значения в диапазоне от 00 до FF (от 0 до 255). Например: зеленый цвет задается как #00FF00 , красный — как #FF0000 , синий — как #0000FF , белый — как #FFFFFF , полное отсутствие цвета или черный задается как #000000 .

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

Примеры некоторых шестнадцатеричных значений цветов RGB: градации красного, синего и зеленого цветов.

вид	код	вид	код	вид	код	вид	код	вид	код	вид	код
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

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

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

вид	имя	вид	имя	вид	имя	вид	имя
	White		Red		Orange		Yellow
	Green		Blue		Purple		Black
	Aliceblue		Antiquewhite		Aqua		Aquamarine
	Azure		Beige		Bisque		Blanchedalmond
	Blueviolet		Brown		Burlywood		Cadetblue
	Chartreuse		Chocolate		Coral		Cornflowerblue
	Cornsilk		Crimson		Cyan		Darkblue
	Darkcyan		Darkgoldenrod		Darkgray		Darkgreen
	Darkkhaki		Darkmagenta		Darkolivegreen		Darkorange
	Darkorchid		Darkred		Darksalmon		Darkseagreen
	Darkslateblue		Darkslategray		Darkturquoise		Darkviolet
	Deeppink		Deepskyblue		Dimgray		Dodgerblue
	Firebrick		Floralwhite		Forestgreen		Fuschia
	Gainsboro		Ghostwhite		Gold		Goldenrod
	Gray		Greenyellow		Honeydew		Hotpink
	Indianred		Indigo		Ivory		Khaki
	Lavender		Lavenderblush		Lemonchiffon		Lightblue
	Lightcoral		Lightcyan		Lightcoldenrodyellow		Lightgreen
	Lightgray		Lightpink		Lightsalmon		Lightseagreen
	Lightskyblue		Lightslategray		Lightsteelblue		Lightyellow
	Lime		Limegreen		Linen		Magenta
	Maroon		Mediumaquamarine		Mediumblue		Mediumorchid
	Mediumpurple		Mediumseagreen		Mediumslateblue		Mediumspringgreen
	Mediumturquoise		Mediumvioletred		Midnightblue		Mintcream
	Mistyrose		Navajowhite		Navy		Oldlace
	Olive		Olivedrab		Orangered		Orchid
	Palegoldenrod		Palegreen		Paleturquoise		Palevioletred
	Papayawhip		Peachpuff		Peru		Pink
	Plum		Powderblue		Rosybrown		Royalblue
	Saddlebrown		Seagreen		Seashell		Sienna
	Silver		Skyblue		Slateblue		Slategray
	Snow		Springgreen		Steelblue		Tan
	Teal		Thistle		Tomato		Turquoise
	Violet		Wheat		Whitesmoke		Yellowgreen

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

Использование безопасной палитры цветов

К сожалению, на разных платформах, с разными системными настройками, правильная передача цвета является проблемой. Все дело в том, что браузер всегда старается подстроить цветовую палитру документа под системные настройки и возможности монитора, путем самостоятельного смешивания цветов и их замещения. Как результат — иногда пользователь видит не совсем то, что хотел ему показать web-мастер. Выход из этой ситуации был найден в применении палитры, каждый цвет которой гарантированно передается одинаково всеми браузерами на разных платформах. Это так называемая гарантированная палитра, еще ее называют безопасной палитрой. В эту палитру входят цвета, цветовые составляющие которых, принимают следующие значения:00 ,33 ,66 ,99 , CC ,FF , во всех возможных 216 их сочетаниях.

FFFFFFCCCCCC999999666666333333000000CCCC66CCCC33999966999933999900666600CCFF66CCFF00CCFF33CCCC9966663333330099FF0099FF3399CC6699CC0099CC33669900CCFF9999FF9966CC0066CC3366993333660066FF0066FF3333FF0033CC0033990000990033FF3300FF3300FF0000CC0033CC3300CC33CCFFCC99CC9966CC6666996633663300330099FF9966FF6633FF6600FF6633993300660066FF9933FF9900FF9933CC6600CC6600993366CC9933CC9900CC9933996600996600663399FFCC66FFCC33FFCC00FFCC33CCCC009999CCFFFF99FFFF66FFFF33FFFF00FFFF00CCCC99CCCC66CCCC33999966999900666633666666CCFF33CCFF00CCFF3399CC0099CC00333399CCFF3399FF0099FF6699CC3366990066990066FF3366CC0066CC0033FF0033990033666699FF3366FF0000FF0000CC0033CC0000333333FF3300FF3300CC3333CC0000990000669999CC6666FF6666CC666699333399333366CCCCFF9999FF6666FF6600FF3300993300669966CC9966FF6600CC6633CC663399330033CC99FFCC66FF9933FF9900FF660099663366CC66FFCC33FFCC00FF9900CC996699660066CC99CCCC66CCCC33CCCC00CC990099993399FFCCFFFF99FFFF66FFFF33FFFF00FFCC3399FF66CCFF00CCFF33CCCC6699CC0099990066FF99CCFF3399FF0099CC0066993366660033FF6699FF3399FF0066CC3366996666663333CC9999CC6666CC3333CC0000990033330000FFCCCCFF9999FF6666FF3333FF0000CC0033FF6633CC3300FF3300FF0000CC0000990000FFCC99FFCC66FF6600CC6633993300660000FF9900FF9933CC9966CC6600996633663300FFCC66FFCC00FFCC33CC9900CC9933996600FFFFCCFFFF99FFFF66FFFF33FFFF00CCCC00

вид	код	вид	код	вид	код	вид	код	вид	код	вид	код

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

Коды цветов html

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

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

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

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

Цвет	Код HEX	Код RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

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

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

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

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

Красный	Код HEX	Код RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

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

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

Оттенки серого	Код HEX	Код RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(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-цветной палитры.

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

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

Для html страниц цвета обозначаются в основном в шестнадцатеричной системе. Для этого используют два вида записи кода — полную или сокращенную. Чтобы правильно указать html цвет полной записью необходимо прописать шесть знаков (цифры и/или английские буквы) после решетки, например, черный записывается так: #000000. Сокращенная запись указания html цветов состоит из решетки и трех цифр и/или букв за ней. При этом данный вид запаси можно использовать только в том случае, если полная запись данного цвета состоит одинаковых символов после решетки. Например, этот же черный цвет можно записать так: #000. Указывать html цвета можно как большими, так и маленькими символами, так как они не чувствительны к регистру.

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

Сочетая интенсивность излучения красного, синего и зеленого света (от 0 для 256) мониторы могут отображать 16.000.000 различных оттенков.

Также цвета для сайтов могут указываться словесно или в RGB коде.

На сегодняшний день словесно можно прописать 147 цветов. При этом важно знать, что некоторые разные названия могут обозначать одинаковые цвета, например Gray и Grey — это серый цвет (#808080).

Безопасные цвета для сайтов.

Не каждый монитор и браузер может правильно отображать все 16 миллионов html цветов.

Если, например, попадается такой цвет, который браузер не может правильно отобразить, то:

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

Чтобы гарантированно получить на выходе в любом браузере и на любом мониторе тот цвет, который Вы прописали в коде, рекомендуется использовать «Безопасные цвета». Они были определены не вручную или по чьему-то желанию, а математически. Таких на 100% безопасных цветов для html документов существует 216. И хотя сегодняшние технологии дошли до того, что современные мониторы и браузеры распознают миллионы оттенков, мы рекомендуем для гарантии цветопередачи использовать именно эти безопасные цвета.

Таблица безопасных цветов html.

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

Данная таблица включает в себя 216 кодов безопасных html цветов. Каждый цвет имеет значение в RGB для определения цвета в графических редакторах и HEX для указания цвета на html страницах.

Темно бордовый цвет код. Учeбник HTML

В HTML цвет можно задавать тремя способами:

Задание цвета в HTML по его названию

Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:

Цвет текста – красный

Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):

Название	Название	Название	Название
Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

Пример использования различных цветовых названий:

Пример: задание цвета по его названию

Попробуй сам »

Заголовок на красном фоне

Заголовок на оранжевом фоне

Заголовок на фоне лайм

Белый текст на синем фоне

Заголовок на красном фоне

Заголовок на оранжевом фоне

Заголовок на фоне лайм

Белый текст на синем фоне

Задание цвета с помощью RGB

При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red) , G — зеленый (green) , В — синий (blue) . Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:

Пример: Задание цвета с помощью RGB

Попробуй сам »

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Задание цвета по шестнадцатеричному значению

Значения R G B также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки # , например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.

Пример: Цвет HEX

Попробуй сам »

красный: #FF0000

зеленый: #00FF00

синий: #0000FF

красный: #FF0000

зеленый: #00FF00

синий: #0000FF

красный+зеленый=желтый: #FFFF00

красный+синий=фиолетовый: #FF00FF

зеленый+синий=голубой: #00FFFF

Список широко распространённых цветов (название, HEX и RGB):

Английское название	Русское название	HEX	RGB
Amaranth	Амарантовый	#E52B50	229	43	80
Amber	Янтарный	#FFBF00	255	191	0
Aqua	Сине-зеленый	#00FFFF	0	255	255
Azure	Лазурный	#007FFF	0	127	255
Black	Черный	#000000	0	0	0
Blue	Синий	#0000FF	0	0	255
Bondi Blue	Вода пляжа Бонди	#0095B6	0	149	182
Brass	Латунный	#B5A642	181	166	66
Brown	Коричневый	#964B00	150	75	0
Cerulean	Лазурный	#007BA7	0	123	167
Dark spring green	Тёмный весенне-зелёный	#177245	23	114	69
Emerald	Изумрудный	#50C878	80	200	120
Eggplant	Баклажановый	#990066	153	0	102
Fuchsia	Фуксия	#FF00FF	255	0	255
Gold	Золотой	#FFD700	250	215	0
Gray	Серый	#808080	128	128	128
Green	Зелёный	#00FF00	0	255	0
Indigo	Индиго	#4B0082	75	0	130
Jade	Нефритовый	#00A86B	0	168	107
Lime	Лайм	#CCFF00	204	255	0
Malachite	Малахитовый	#0BDA51	11	218	81
Navy	Тёмно-синий	#000080	0	0	128
Ochre	Охра	#CC7722	204	119	34
Olive	Оливковый	#808000	128	128	0
Orange	Оранжевый	#FFA500	255	165	0
Peach	Персиковый	#FFE5B4	255	229	180
Pumpkin	Тыква	#FF7518	255	117	24
Purple	Фиолетовый	#800080	128	0	128
Red	Красный	#FF0000	255	0	0
Saffron	Шафрановый	#F4C430	244	196	48
Sea Green	Зелёное море	#2E8B57	46	139	87
Swamp green	Болотный	#ACB78E	172	183	142
Teal	Сине-зелёный	#008080	0	128	128
Ultramarine	Ультрамариновый	#120A8F	18	10	143
Violet	Фиолетовый	#8B00FF	139	0	255
Yellow	Жёлтый	#FFFF00	255	255	0

Коды цветов (фон) по насыщенности и оттенку.

Также цвета для сайтов могут указываться словесно или в RGB коде.

Безопасные цвета для сайтов.

Не каждый монитор и браузер может правильно отображать все 16 миллионов html цветов.

Если, например, попадается такой цвет, который браузер не может правильно отобразить, то:

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

Таблица безопасных цветов html.

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

Влад Мержевич

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

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

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

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

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

Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Рис. 6.1. Цветовой круг

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

Рис. 6.2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

Цвета по названию

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

Табл. 6.3. Названия некоторых цветов

Имя цвета	Описание	Шестнадцатеричное значение
black	Черный	#000000
blue	Синий	#0000FF
fuchsia	Светло-фиолетовый	#FF00FF
gray	Темно-серый	#808080
green	Зеленый	#008000
lime	Светло-зеленый	#00FF00
maroon	Темно-красный	#800000
navy	Темно-синий	#000080
olive	Оливковый	#808000
purple	Темно-фиолетовый	#800080
red	Красный	#FF0000
silver	Светло-серый	#C0C0C0
teal	Сине-зеленый	#008080
white	Белый	#FFFFFF
yellow	Желтый	#FFFF00

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

Пример 6.1. Цвет фона и текста

Цвета

Пример текста

В данном примере цвет фона задается с помощью атрибута bgcolor тега

, а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .

В web-дизайне существует несколько способов представления цвета

HEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.

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

Таблица 16 основных цветов , которые используются во всех браузерах

Название	Цвет	Hex	(RGB)
Aqua (морская волна)		#00FFFF	(000,255,255)
Black (черный)		#000000	(000,000,000)
Blue (голубой)		#0000FF	(000,000,255)
Fuchsia (фуксин)		#FF00FF	(255,000,255)
Gray (серый)		#808080	(128,128,128)
Green (зеленый)		#008000	(000,128,000)
Lime (ярко-зеленый)		#00FF00	(000,255,000)
Maroon (темно-бордовый)		#800000	(128,000,000)
Navy (темно-синий)		#000080	(000,000,128)
Olive (оливковый)		#808000	(128,128,000)
Purple (фиолетовый)		#800080	(128,000,128)
Red (красный)		#FF0000	(255,000,000)
Silver (серебряный)		#C0C0C0	(192,192,192)
Teal (серо-зеленый)		#008080	(000,128,128)
White (белый)		#FFFFFF	(255,255,255)
Yellow (желтый)		#FFFF00	(255,255,000)

Таблица пурпурного цвета и его оттенков

Название	Цвет	Hex	(RGB)
Magenta (пурпурный)		#FFCBDB	(255,203,219)
Magenta (пурпурный)		#FF0099	(255,000,153)
Magenta (маджента)		#F95A61	(249,090,097)
Fuchsia (фуксия)		#FF00FF	(255,000,255)
Мовеин (анилиновый пурпур)		#EF0097	(239,000,151)
Salmon pink (оранжево розовый)		#FF91A4	(255,145,164)
Cenise (оттенок пурпурного)		#DE3163	(153,149,140)
Aubergine Eggplant (баклажановый)		#990066	(153,000,132)
Lavender blush (розовато-лавандовый)		&nbsp#FFF0F5	(255,240,245)
Lilac (сиреневый)		#C8A2C8	(200,162,200)
Magenta (маджента)		#FF008F	(255,000,143)
Orchid (орхидея)		#DA70D6	(218,112,214)
Red-violet (фиолетово-красный)		#C71585	(199,021,133)
Sanguine (сангиновый)		#92000A	(146,000,010)
Thistle (оттенок пурпурного)		#D8BFD8	(185,211,238)
Violet-eggplant (оттенок пурпурного)		#991199	(153,017,153)
Rosa vivo (насыщено розовый)		#FF007F	(255,000,127)
Lavender-rose (оттенок пурпурного)		#FBA0E3	(108,123,139)
Mountbatten pink (розовый Маунбаттена)		#997ABD	(153,122,141)

Таблица серого цвета и его оттенков

Название	Цвет	Hex	(RGB)
Gray (Серый)		#808080	(128,128,128)
Gray (Серый)		#bebebe	(190,190,190)
(Серый-оттенок)		#858585	(133,133,133)
Gray33 (Серый-33)		#545454	(084,084,084)
(Серого шифера)		#708090	(112,128,144)
(Кварцевый)		#99958с	(153,149,140)
(Светло-серый)		#bbbbbb	(187,187,187)
(Серебристый)		#c0c0c0	(192,192,192)
(Серо-белый)		#f0f0f0	(240,240,240)
(Бороды Абдель-Керима)		#e0e0e0	(224,224,224)
LightGray (Серый светлый)		#d3d3d3	(211,211,211)
LightStateGray ()		#778899	(119,136,153)
StateGray-1 (Бледно-васильковый1)		#c6e2ff	(198,226,255)
StateGray-2 (Бледно-васильковый2)		#b9d3ee	(185,211,238)
StateGray3 ()		#9fb6cd	(159,182,205)
StateGray4 ()		#6c7b8b	(108,123,139)

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

Табл. 1. Названия цветов

Имя	Код	RGB	HSL	Описание
white	#ffffff или #fff	rgb(255,255,255)	hsl(0,0%,100%)	Белый
silver	#c0c0c0	rgb(192,192,192)	hsl(0,0%,75%)	Серый
gray	#808080	rgb(128,128,128)	hsl(0,0%,50%)	Темно-серый
black	#000000 или #000	rgb(0,0,0)	hsl(0,0%,0%)	Черный
maroon	#800000	rgb(128,0,0)	hsl(0,100%,25%)	Темно-красный
red	#ff0000 или #f00	rgb(255,0,0)	hsl(0,100%,50%)	Красный
orange	#ffa500	rgb(255,165,0)	hsl(38.8,100%,50%)	Оранжевый
yellow	#ffff00 или #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Желтый
olive	#808000	rgb(128,128,0)	hsl(60,100%,25%)	Оливковый
lime	#00ff00 или #0f0	rgb(0,255,0)	hsl(120,100%,50%)	Светло-зеленый
green	#008000	rgb(0,128,0)	hsl(120,100%,25%)	Зеленый
aqua	#00ffff или #0ff	rgb(0,255,255)	hsl(180,100%,50%)	Голубой
blue	#0000ff или #00f	rgb(0,0,255)	hsl(240,100%,50%)	Синий
navy	#000080	rgb(0,0,128)	hsl(240,100%,25%)	Темно-синий
teal	#008080	rgb(0,128,128)	hsl(180,100%,25%)	Сине-зеленый
fuchsia	#ff00ff или #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Розовый
purple	#800080	rgb(128,0,128)	hsl(300,100%,25%)	Фиолетовый

С помощью RGB

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

RGBA

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

HSL

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

HSLA

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Цвета

Предупреждение

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

Арррргх!

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице

Как работают hex-коды для обозначения цветов

Перевод статьи «How Hex Code Colors Work – and How to Choose Colors Without A Color Picker».

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

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

По мере накопления опыта вы начнете смотреть скорее на сами коды цветов, а не просто полагаться на редактор. Вы заметите, что выбираемые вами цвета обозначаются какими-то странными кодами, вроде #ff0000.

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

В этой статье я расскажу вам обо всем, что вам нужно знать о hex-кодировке цветов.

Что означает слово «hex»?

Для начала давайте разберем, что в термине «hex-код» означает слово «hex». В этом контексте «hex» — это сокращение слова «hexadecimal» (англ. «шестнадцатеричный»).4. В общем, конвертировать числа шестнадцатеричной системы в двоичные (и обратно) просто удобно. Но сейчас мы этим заниматься не будем.

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

Из каких компонентов состоит цвет?

Как шестнадцатеричные коды используются для обозначения RGB-цветов? (RGB — цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трёх цветов, которые принято называть основными. Сама аббревиатура RGB расшифровывается как red, green, blue — красный, зелёный, синий. — Прим. ред. Techrocks).

Каждый пиксель цветного монитора состоит из трех светящихся элементов красного, зелёного и синего цвета. Если рассмотрите экран в большом приближении, вы их увидите (если экран древний, слишком напрягаться не придется). Цвета, которые вы видите на экране, образуются благодаря управлению яркостью каждого из этих элементов.8. Просто еще один факт, который знать не обязательно).

К этому моменту внимательные читатели могли уже понять, насколько просто работать с цветами, представленными в такой форме. Черный цвет представляется как RGB (0,0,0), а белый — RGB (255,255,255). Ну а зеленый, соответственно, — RGB (0,255,0).

Hex-кодировка цветов

Теперь, зная, что в принципе означают коды цветов, давайте посмотрим на hex-коды. Возьмем, к примеру, #ff0000, и попробуем разобраться, что этот код означает.

Посмотрите на таблицу перевода чисел из шестнадцатеричной системы в десятичную, и вы увидите, что «FF» — это 255 в десятичной системе.

Это подсказка. Два первых символа в нашем hex-коде (да и во всех остальных тоже) относятся к красному цвету, и в данном случае его значение — 255. Следующие два символа отвечают за зеленый, а последние — за синий цвет.

Исходя из этого, вы можете понять, что #ff0000 — то же самое, что RGB (255,0,0). То есть, чистый красный. Аналогично, #ff00ff — это максимум красного и одновременно синего, а вместе они дают пурпурный (magenta).

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

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

Как использовать сокращенные обозначения цвета

Разобравшись с hex-кодами, вы можете начать использовать их в своих веб-проектах — вместо пипетки в программе для выбора цвета.

Но сначала будет полезным узнать, что это не единственные опции.

Поскольку HTML проектировался так, чтобы им было удобно пользоваться, он допускает использование сокращенной записи hex-кодов. Например, код чистого красного цвета #FF0000 можно сократить до #F00. Одна цифра для красного, одна для зеленого и одна для синего. Браузеры интерпретируют #FF0000 и #F00 одинаково.

Такая запись сокращает доступное количество цветов до примерно 4 тысяч, но ее применение дает некоторые преимущества.

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

Почему стоит использовать hex-коды

Большинство конструкторов сайтов позволяют вводить hex-код вместо выбора цвета при помощи мыши. Такой подход имеет ряд преимуществ.

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

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

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

Дополнительные преимущества

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

Узнать код цвета (RGB, HEX)

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

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

Узнать код цвета

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

Если вам нужен HEX-код (в виде #000000), а не RGB, то преобразуйте его в нужный формат, воспользовавшись инструментом «Дополнительный цвет» в разделе «Персонализация» системной утилиты «Параметры». Запустите её сочетанием клавиш Win+I на своей клавиатуре.

После нажатия на кнопку «Дополнительный цвет», вам откроется окно с цветовой палитрой. Внизу будет расположена кнопка «Больше», кликните по ней, чтобы расширить возможность выбора. Здесь сможете ввести RGB-код либо HSV, чтобы получить HEX-код и его предварительный просмотр. Это поистине замечательный и полезный системный инструмент.

Преобразование цвета в Google

Достаточно просто ввести код HEX в поисковую строку Google в своем веб-браузере. В результате поисковик представит вам его результат дополнительно в таких цветовых кодах:

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

Главная / Графика / Простой способ узнать код цвета (RGB, HEX) в Windows 10

Как работать с цветами в digital-маркетинге — БЛОГ ADVENTUM

Подбирать цвета убийственно сложно: все эти RGB, CMY, RYB, HSV больше мешают, чем помогают. Разобрались, как удачно подобрать цвета для проекта и сэкономить на дизайнере.

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

Цвет подробно изучали двое ученых — Ньютон и Гете. Все современные модели работы с цветом основываются на их открытиях.

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

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

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

Спустя 150 Гете в «Теории цвета» анализирует цвет с точки зрения восприятия человека. Гете создает цветовой круг, который впоследствии улучшает художник Иоханнес Иттен:

Цветовой круг. Основные цвета — Красный, Желтый и Синий (Модель RYB).

Цветовые модели и сочетания цветов

Существует 5 популярных цветовых моделей: RYB, RGB, CMY (иногда указывается как CMYK), HSL (она же HSV) и LAB. LAB и HSV мы не будем рассматривать, потому что они не помогут научиться подбирать цвета. Остановимся на анализе RYB, RGB и CMY.

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

CMY — противоположная RGB модель. Она субтрактивна: цвета не излучаются от источника, а отражаются от носителя, например, бумаги. Поскольку цвета не складываются, а вычитаются из белого света, в CMY удобнее считать какое количество света отразилось, а не поглотилось. Если вычесть из белого три первичных цвета (RGB), мы получим тройку дополнительных цветов CMY. CMY используется при печати.

RYB — классическая цветоваяцветова, начало которой положил Гете, а улучшил Иттен. Эта модель популярна у художников, потому что объясняет правила смешивания пигментов цветов. Хотя RYB не используется в электронике и печати, она содержит ряд важных наблюдений: на ее основе разработаны RGB и CMY, и по ее примеру комбинируются цвета внутри этих моделей.

Иттен полагал, что можно найти цветовую гармонию через цветовое колесо:

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

Разберём несколько характеристик цвета: они помогут вамвам пон, как применять и комбинировать цвета в работе.

Тон — это чистый цвет: зеленый, синий, красный и так далее.

Оттенок — это добавление к чистому цвету белого цвета:

Тень — это добавление к чистому цвету черного цвета:

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

Аналоговые и дополнительные цвета, Триада, Тетрада и Квадрат — это основные способы получения цветных схем.

В каждой модели дополнительный цвет является смесью двух основных, поэтому при сложении дополнительного цвета с оставшимся основным, вы получите цвет в середине модели: Черный для RYB и CMY, белый для RGB.

В RYB первичные цвета: Красный, Желтый и Синий.
В RGB: Красный, Зеленый и Синий.
В CMY: Циан, Пурпурный и Желтый.

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

Основные цвета RGB — это вторичные цвета CMY. Основные цвета CMY — это вторичные цвета RGB. Эти модели разные, но тесно связаны. RYB с ними связан меньше.

CMYK — это тот же CMY, но с добавлением «ключевого цвета» — черного. Дело в том, что смесь CMY не дает настоящего черного цвета, поэтому эффективнее и экономичнее использовать черную краску.

Как подобрать цвет для проекта

Человеческий глаз видит 10 миллионов цветов. Из этих 10 миллионов вам нужно выбрать 1 цвет, который будет коррелировать с сайтом и брендом.

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

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

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

К счастью, подобрать цвет сегодня не так сложно:

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

Можно черпать идеи у сайтов, которые вам нравятся:

Загрузите скриншот понравившегося сайта и узнайте его цветовую палитру. Подборка цветов от Адобе: https://color.adobe.com/ru/create/color-wheel/

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

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

Черпать вдохновение можно на Дриббле и Дизайниспирейшене можно посмотреть работы дизайнеров и заимствовать их цветовые палитры.

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

Создание цветовой палитры.

Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
Яркость / Brightness — обозначает степень отличия цвета от белого или черного.

Теперь у вас должен быть HEX-код цвета. HEX-код состоит из трех пар цифр и может принимать значения от 0 до 9 и букв от A до F.

Первая цифра уточняет цвет, вторая — оттенок. Чем больше значение пар, тем светлее цвет:

В уже знакомым нам RGB и CMY значения цветов будут такими:

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

Есть несколько простых техник работы с кодом:

Переставлять одну пару в разные места кода
Удвоение первой цифры в первой паре и разделение на два остальные первые цифры
Комбинирование цветов из фото

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

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

Реально вам нужно только 2 цвета:

основной цвет (в нашем случае это #30c9e8),
акцентный цвет.

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

Как подобрать акцентирующий цвет

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

Если результат не устраивает, то все-таки можно поиграться с триадами и тетрадами

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

Осталось добавить серого

Подбираем гармоничный серый.

Подобрать серый можно в том же Дриббле и Дизайниспирейшене. Либо, если у вас есть Фотошоп, можно сделать так:

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

Посмотрите, какой кайф:

Как по-другому подобрать цвета.

Можно сначала сделать сайт в черно-белом исполнении, а уже потом расставлять акценты:

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

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

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

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

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

Гайдлайн по контрастам (на английском)
Проверка на контраст

Удачные и неудачные цветовые решения

Несколько удачных и неудачных подборок цвета.

Попробуйте самостоятельно проанализировать, почему в этих сайтах плохо подобраны цвета:

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

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

Бонус

Классный ролик про тени (есть русские субтитры)

Попробуйте угадать, какого цвета эти квадраты (а потом проверьте значение HEX-кода в Фотошопе):

Источники:
Иоханнес Иттен, «Искусство цвета»
A Simple Web Developer’s Color Guide

Цвета в палитре rgb формируются путем. Цветовая модель RGB

Чтобы пользоваться предварительным просмотром презентаций создайте себе аккаунт (учетную запись) Google и войдите в него: https://accounts.google.com

Подписи к слайдам:

Белый свет имеет сложную структуру.

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

Белый свет имеет сложную структуру!

Состав белого света: Фиолетовый Синий Голубой Зеленый Желтый Оранжевый Красный Для запоминания цветов в спектре пользуются условной фразой: « К аждый О хотник Ж елает З нать, где С идит Ф азан».

Глаз человека Человек воспринимает свет с помощью цветовых рецепторов (так называемых колбочек), находящихся на сетчатке глаза.

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

Тема урока: Палитры цветов в системах цветопередачи RGB, CMYK и HSB.

Системы цветопередачи: RGB (R ed, G reen, B lue) CMYK (C yan, M agenta, Y ellow, blac K) HSB (H ue, S aturation, B rightness) красный зеленый синий черный жёлтый пурпурный голубой оттенок насыщенность яркость

RGB Основными цветами являются красный, зеленый, синий. Палитра цветов формируется путем сложения красного, зеленого и синего цветов. Цвет палитры можно определить с помощью формулы:

Цвет Коды интенсивности базовых цветов Красный Зеленый Синий Черный 00000000 0 00000000 0 00000000 0 Красный 11111111 255 00000000 0 00000000 0 Зеленый 00000000 0 11111111 255 00000000 0 Синий 00000000 0 00000000 0 11111111 255 00000000 0 11111111 255 11111111 255 Пурпурный 11111111 255 00000000 0 11111111 255 Желтый 11111111 255 11111111 255 00000000 0 11111111 255 11111111 255 11111111 255 Кодировка цветов при глубине цвета 24 бита

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

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

Цвет Формирование цвета Black = С + М + Y = W – G – B – R White = (C = 0, M = 0, Y =0) Red = Y + M = W – G – B Green = Y + C = W – R – B Blue = M + C = W – R – G Cyan = W – R = G + B Magenta = W – G = R + B Yellow = W – B = R +G Формирование цветов в системе цветопередачи CMYK

CMYK Основана на восприятии не излучаемого, а отражаемого света. Применяется в полиграфии, при печати изображений на принтерах (т.к. напечатанные документы воспринимаются человеком в отраженном свете).

Самое главное: Существуют следующие системы цветопередачи: RGB (R ed, G reen, B lue) CMYK (C yan, M agenta, Y ellow, blac K) HSB (H ue, S aturation, B rightness) Палитра цветов в системе цветопередачи RGB формируется путем сложения красного, зеленого и синего цветов. Цвет палитры можно определить с помощью формулы:

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

Самое главное: Система цветопередачи HSB использует в качестве базовых параметров Hue (оттенок цвета), Saturation (насыщенность), Brightness (яркость). Параметр Hue позволяет выбрать оттенок цвета из всех цветов оптического спектра, начиная с красного цвета и заканчивая фиолетовым Параметр Saturation определяет процент «чистого» оттенка и белого цвета. Параметр Brightness определяет интенсивность цвета

Выполнить задания: Задание 1.7 (стр.21) Определить цвета, если заданы интенсивности базовых цветов в системе цветопередачи RGB Задание 1.8 (стр.21) Определить цвета, если на бумагу нанесены краски в системе цветопередачи CMYK .

Задание 1.7 Цвет Интенсивность базовых цветов Красный Зеленый Синий 00000000 00000000 00000000 11111111 00000000 00000000 00000000 11111111 00000000 00000000 00000000 11111111 00000000 11111111 11111111 11111111 00000000 11111111 11111111 11111111 00000000 11111111 11111111 11111111

Задание 1.8 (стр.21) Цвет Формирование цвета (C = 0, M = 0, Y =0) Y + M = W – G – B Y + C = W – R – B M + C = W – R – G W – R = G + B W – G = R + B W – B = R +G

Создание изображения в неправильном цветовом режиме может стать проблемой. Рассмотрим основные различия между двумя цветовыми моделями RGB и CMYK .

RGB:

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

Аддитивная модель

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

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

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

CMYK:

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

Субтрактивная цветовая модель

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

Основной цвет для цветовой модели CMYK – черный (K ). Добавление этого цвета помогает нейтрализовать изображения и увеличить плотность тени.

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

Такие программы, как Photoshop , Illustrator и InDesign , предоставляют пресеты CMYK , которые помогают подобрать лучшую комбинацию настроек печати.

Почему эти два режима отображаются по-разному?

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

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

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

Какой режим нужно использовать?

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

Еще одним преимуществом является то, что RGB позволяет работать с файлами меньшего размера. А также, что Photoshop , InDesign и Illustrator базируются на RGB и эта модель поддерживается в web .

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

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

Инструменты для конвертирования

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

Adobe Photoshop , Illustrator и InDesign являются наиболее распространенными программами, используемыми для создания графических проектов. Они ориентированы на работу в режиме RGB .

Поэтому данные редакторы упрощают преобразование в CMYK и установку конкретной схемы цветопередачи для печати. Это выполняется следующим образом:

Illustrator: Файл > Цветовой режим документа > CMYK или RGB .

InDesign: Окно> Цвет > CMYK или RGB .

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

Шаг 1 . Выберите меню «Редактирование » (Edit ), затем пункт «Настройка цветов » (Color Setting ).

Шаг 2 . Выберите профиль CMYK , наиболее подходящий для печати.

Шаг 3 . Вы можете выбрать опцию «Больше параметров », чтобы установить схему цветопередачи при преобразовании значений RGB в CMYK . «Перцепционный » метод лучше всего подходит для фотографий, поскольку сохраняет визуальное соответствие с исходным изображением.

Шаг 4 . Откройте изображение RGB , которое нужно преобразовать.

Шаг 5 . Внесите изменения, пока изображение еще находится в режиме RGB .

Конспект урока

Учитель: Иванова Светлана Юрьевна

Предмет: информатика и ИКТ

Класс: 9

Тема: Формирование цвета в системах цветопередачи RGB , CMYK и HSB (Палитры цветов в системах цветопередачи RGB , CMYK и HSB )

Тип урока: изучение нового материала

Цели:

предметные: дать представление о палитрах цветов в системах цветопередачи;

метапредметные:

а) регулятивные: приобретение опыта работы с графическими изображениями; прием и сохранение учебной задачи; осуществление самоконтроля;

б) познавательные: анализ ориентира действия в новом учебном материале с сотрудничестве с учителем; осуществление итогового контроля по результату; преобразование практической задачи в познавательную; построение логических рассуждений;

в) коммуникативные: адекватное восприятие оценки учителя, товарищей; постановка вопросов, необходимых для организации собственной деятельности и сотрудничества с партнером;

г) межпредметные: связь и обобщение предметных знаний физики и информатики для видения объекта в единстве его многообразных свойств;

личностные: формирование устойчивого учебно-познавательного интереса к новым общим способам решения задач.

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

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

Инвентарь и оборудование: проектор, экран, ноутбук учительский и ноутбуки ученические с установленными графическим редактором PhotoShop и тестовой оболочкой MyTest , раздаточный материал, карточки с домашним заданием.

Ход урока:

Организационный момент.

Приветствие: Здравствуйте, ребята! Я рада вас видеть! По словам философа Е. Ильенкова «Вся человеческая жизнь – это не что иное. Как постоянное желание достичь успеха в решении новых вопросов и проблем». И сегодня девиз нашего урока «Настоящее сокровище для человека – умение трудится». (Езоп). За работу!

Актуализация знаний.

Перед изучением новой темы, предлагаю выполнить тест на повторение (раздаю карточки с тестом). На прошлом уроке мы познакомились с растровыми изображениями. Давайте вспомним, как называется минимальный участок изображения, для которого независимым образом можно задать цвет? (пиксель). Что такое «глубина цвета»? (Количество информации, которое используется для кодирования цвета точки изображения). Мы знаем, что на экране монитора цвет точки имеет двоичный код. Что это значит? (состоит из 0 и 1). А как связаны между собой «глубина цвета» и «палитра цветов»?(N =2 i – формула Хартли) (1 слайд )

Постановка учебной задачи.

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

И сегодня на уроке мы выясним

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

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

Сформулируем тему урока.(2 слайд).

Изучение нового материала.

Вспомним опыт Ньютона (просмотр видео ).

Какой опыт мы сейчас наблюдали? (Опыт Ньютона по дисперсии света). В чем он заключается? (Узкий луч солнечного света направлялся на треугольную стеклянную призму). На экране за призмой появлялся спектр — радужная полоса из семи цветов: красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый( 3 слайд ).

Хорошо известна фраза, которая помогает легко запомнить последовательность цветов в спектре видимого света: «Каждый охотник желает знать, где сидит фазан».

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

С экрана монитора мы воспринимаем цвет как сумму излучения трех базовых цветов: красного , зеленого и синего . Такая система цветопередачи называется RGB, по первым буквам английских названий цветов (Red — красный, Green — зеленый, Blue — синий ). (Давайте оставим две строчки для темы, мы ее с вами позже сформулируем, и запишем название первой цветовой модели) (5 слайд) .

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

Color = R + G + В, где 0 .

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

Наложение зеленого и синего цветов образует голубой цвет (Cyan), наложение красного и зеленого цветов — желтый цвет (Yellow), наложение красного и синего цветов — пурпурный цвет (Magenta). Таблица (6 слайд).

При глубине цвета в 24 бита на кодирование каждого из базовых цветов выделяется по 8 битов. В этом случае для каждого из цветов возможны N = 2 8 = 256 уровней интенсивности. Уровни интенсивности задаются десятичными (от минимального — 0 до максимального — 255) или двоичными (от 00000000 до 11111111) кодами. (7 слайд) .

При печати изображений на принтерах используется палитра цветов в системе CMY. Основными красками в ней являются Cyan — голубая , Magenta — пурпурная и Yellow — желтая. (8 слайд) .

Цвета в палитре CMY формируются путем наложения красок. Цвет палитры Color можно определить с помощью формулы, в которой интенсивность каждой краски задается в процентах:

Color = С+М + Y, где 0% Y

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

(Таблица). Рассмотрим, как формируется палитра цветов в системе CMYK. (записать) (10 слайд) .

Смешение трех красок — голубой , желтой и пурпурной — должно приводить к полному поглощению света, и мы должны увидеть черный цвет. Однако на практике вместо черного цвета получается грязно-бурый цвет. Поэтому в цветовую модель добавляют еще один, истинно черный цвет. Так как буква В уже используется для обозначения синего цвета, для обозначения черного цвета принята последняя буква в английском названии черного цвета Black , т. е. К . Расширенная палитра получила название CMYK . (11 слайд) .

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

А какая система цветопередачи применяется в полиграфии? (CMYK). И напечатанные изображения мы видим в отраженном свете.

Практическая работа.

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

Разбейтесь, пожалуйста, на пары. Каждая пара берет ноутбук и занимает место за столом. Кто-нибудь из вас работал в графическом редакторе PhotoShop ? Давайте запустим программу. Перед нами рабочее поле. Слева – панель инструментов. Сверху – выпадающее меня, панель свойств. Справа – окна дополнительных панелей. Если мы откроем файл, то появится окно изображения. Конвертируем изображение из RGB в CMYK. Собственно, перевод из RGB в CMYK занимает ровно 1 секунду.

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

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

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

Что же происходит при конвертировании из RGB в CMYK ? Прежде всего, каждому пикселю графики присваиваются другие цифровые значения. В RGB это были условные R255G255B0 , а после конвертации пиксель приобрел значения С4M0Y93K0 .

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

Фотошоп срочно подыскивает более тусклые цвета.

Результат данного перевода вовсе не максимум яркости, которую через CMYK можно обеспечить. И вы легко в этом убедитесь, просто применив цветокоррекцию Яркость/Контраст.

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

После конвертации из RGB в CMYK изображение надо обязательно цветокорректировать.

Самостоятельная работа.

А сейчас предлагаю поработать самостоятельно с использованием тестовой оболочки MyTest . Перед вами три задания. Два первых — это легкие задания. Третье — посложнее. Выбираете любые два.

(Тестовая оболочка позволяет отправить ответы учеников учителю, который сразу видит результат. Ребята могут просмотреть вопросы, на которые ответилт неверно ).

Домашнее задание.

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

Рефлексия.

Ребята, скажите, какие цвета являются базовыми для человеческого восприятия? (красный, зеленый, синий)

Какие цветовые модели существуют?

В каких видах деятельности целесообразно их использовать?

В самом низу ваших карточек оцените свою работу на уроке.

Спасибо за урок! Мне было приятно с вами работать!

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

Пионеры исследований цветовосприятия

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

Поглощение света опсинами

Колбочки соответствуют красной, зелёной и синей частям спектра и часто называются длинными (L), средними (M) и короткими (S) согласно длинам волн, к которым они наиболее чувствительны.

Одной из первых научных работ о взаимодействии света и сетчатки был трактат «Hypothesis Concerning Light and Colors» Исаака Ньютона, написанный между 1670-1675 гг. У Ньютона была теория, что свет с различными длинами волн приводил к резонансу сетчатки с теми же частотами; эти колебания затем передавались через оптический нерв в «сенсориум».

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

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

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

Предположение Юнга относительно сетчатки было неверным, но он сделал правильный вывод: в глазе существует конечное количество типов клеток.

В 1850 году Герман Гельмгольц первым получил экспериментальное доказательство теории Юнга. Гельмгольц попросил испытуемого сопоставить цвета различных образцов источников света, регулируя яркость нескольких монохромных источников света. Он пришёл к выводу, что для сопоставления всех образцов необходимо и достаточно трёх источников света: в красной, зелёной и синей части спектра.

Рождение современной колориметрии

Перенесёмся в начало 1930-х. К тому времени научное сообщество имело достаточно хорошее представление о внутренней работе глаза. (Хотя потребовалось ещё 20 лет, чтобы Джорджу Уолду удалось экспериментально подтвердить присутствие и функции родопсинов в колбочках сетчатки. Это открытие привело его к Нобелевской премии по медицине в 1967 году.) Commission Internationale de L»Eclairage (Международная комиссия по освещению), CIE, поставила задачу по созданию исчерпывающей количественной оценки восприятия цвета человеком. Количественная оценка была основана на экспериментальных данных, собранных Уильямом Дэвидом Райтом и Джоном Гилдом при параметрах, схожих с выбранными впервые Германом Гельмгольцем. Базовыми настройками были выбраны 435,8 нм для синего цвета, 546,1 нм для зелёного и 700 нм для красного.

Экспериментальная установка Джона Гилда, три ручки регулируют основные цвета

Из-за значительного наложения чувствительности колбочек M и L невозможно было сопоставить некоторые длины волн с сине-зелёной частью спектра. Для «сопоставления» этих цветов в качестве точки отсчёта нужно было добавить немного основного красного цвета:

Если мы на мгновение представим, что все основные цвета вносят отрицательный вклад, то уравнение можно переписать так:

Результатом экспериментов стала таблица RGB-триад для каждой длины волны, что отображалось на графике следующим образом:

Функции сопоставления цветов RGB по CIE 1931

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

Теперь мы можем найти трихромные коэффициенты для света распределения спектральной интенсивности S как следующее внутреннее произведение:

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

Термин «цветовое пространство» возник потому, что основные цвета (красный, зелёный и синий) можно считать базисом векторного пространства. В этом пространстве различные цвета, воспринимаемые человеком, представлены лучами, исходящими из источника. Современное определение векторного пространства введено в 1888 году Джузеппе Пеано, но более чем за 30 лет до этого Джеймс Клерк Максвелл уже использовал только зародившиеся теории того, что позже стало линейной алгеброй, для формального описания трихроматической цветовой системы.

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

Этот новый набор основных цветов невозможно реализовать в физическом мире. Это просто математический инструмент, упрощающий работу с цветовым пространством. Кроме того, чтобы коэффициенты основных цветов всегда были положительными, новое пространство скомпоновано таким образом, что коэффициент цвета Y соответствует воспринимаемой яркости. Этот компонент известен как яркость CIE (подробнее о ней можно почитать в замечательной статье Color FAQ Чарльза Пойнтона (Charles Poynton)).

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

Координаты x и y известны как координаты цветности, и вместе с яркостью Y CIE они составляют цветовое пространство xyY CIE. Если мы расположим на графике координаты цветности всех цветов с заданной яркостью, у нас получится следующая диаграмма, которая вам наверно знакома:

Диаграмма xyY CIE 1931

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

С течением времени появилось несколько новых цветовых пространств, которые в различных аспектах вносили улучшения в пространства CIE 1931. Несмотря на это, система xyY CIE остаётся самым популярным цветовым пространством, описывающим свойства устройств отображения.

Передаточные функции

Прежде чем рассматривать видеостандарты, необходимо ввести и объяснить ещё две концепции.

Оптико-электронная передаточная функция

Оптико-электронная передаточная функция (optical-electronic transfer function, OETF) определяет то, как линейный свет, фиксируемый устройством (камерой) должен кодироваться в сигнале, т.е. это функция формы:

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

Электронно-оптическая передаточная функция

Электронно-оптическая передаточная функция (electronic-optical transfer, EOTF) выполняет противоположную OETF задачу, т.е. она определяет, как сигнал будет преобразован в линейный свет:

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

Отношение между EOTF и OETF

Понятия EOTF и OETF хоть и взаимосвязаны, но служат разным целям. OETF нужна для представления захваченной сцены, из которого мы потом можем реконструировать исходное линейное освещение (это представление концептуально является буфером кадра HDR (High Dynamic Range) обычной игры). Что происходит на этапах производства обычного фильма:

Захват данных сцены
Инвертирование OETF для восстановления значений линейного освещения
Цветокоррекция
Мастеринг под различные целевые форматы (DCI-P3, Rec. 709, HDR10, Dolby Vision и т.д.):
- Уменьшение динамического диапазона материала для соответствия динамическому диапазону целевого формата (тональная компрессия)
- Преобразование в цветовой пространство целевого формата
- Инвертирование EOTF для материала (при использовании EOTF в устройстве отображения изображение восстанавливается как нужно).

Подробное обсуждение этого техпроцесса не войдёт в нашу статью, но я рекомендую изучить подробное формализованное описание рабочего процесса ACES (Academy Color Encoding System).

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

Рендеринг
Буфер кадра HDR
Тональная коррекция
Инвертирование EOTF для предполагаемого устройства отображения (обычно sRGB)
Цветокоррекция

В большинстве игровых движков используется метод цветокоррекции, популяризованный презентацией Нэти Хофмана (Naty Hoffman) «Color Enhancement for Videogames» с Siggraph 2010. Этот метод был практичен, когда использовался только целевой SDR (Standard Dynamic Range), и он позволял использовать для цветокоррекции ПО, уже установленное на компьютерах большинства художников, например Adobe Photoshop.

Стандартный рабочий процесс цветокоррекции SDR (изображение принадлежит Джонатану Блоу (Jonathan Blow))

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

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

Видеостандарты

Rec. 709

Большинство стандартов, относящихся к вещанию видеосигналов, выпущено Международным союзом электросвязи (International Telecommunication Union, ITU), органом ООН, в основном занимающимся информационными технологиями.

Рекомендация ITU-R BT.709 , которую чаще называют Rec. 709 — это стандарт, описывающий свойства HDTV. Первая версия стандарта была выпущена в 1990 году, последняя — в июне 2015 года. В стандарте описываются такие параметры, как соотношения сторон, разрешения, частота кадров. С этими характеристиками знакомо большинство людей, поэтому я не буду рассматривать их и сосредоточусь на разделах стандарта, касающихся воспроизведения цвета и яркости.

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

Их относительная интенсивность должна быть настроена таким образом, чтобы белая точка имела цветность

(Эта белая точка также известна как CIE Standard Illuminant D65 и аналогична захвату координат цветности распределения спектральной интенсивности обычного дневного освещения.)

Свойства цветности можно визуально представить следующим образом:

Охват Rec. 709

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

Теперь мы переходим к части стандарта, посвящённой яркости, и здесь всё становится немного сложнее. В стандарте указано, что «Общая оптико-электронная передаточная характеристика в источнике» равна:

Здесь есть две проблемы:

Не существует спецификации о том, чему соответствует физическая яркость L = 1
Несмотря на то, что это стандарт вещания видео, в нём не указана EOTF

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

Где L = 1 соответствует яркость примерно 100 кд / м² (единицу кд / м² в этой отрасли называют «нит»). Это подтверждается ITU в последних версиях стандарта следующим комментарием:

В стандартной производственной практике функция кодирования источников изображения регулируется таким образом, чтобы конечное изображение имело требуемый вид, соответствующий видимому на эталонном мониторе. В качестве эталонной принимается функция декодирования из Рекомендации ITU-R BT.1886. Эталонная среда просмотра указана в Рекомендации ITU-R BT.2035.

Rec. 1886 — это результат работ по документации характеристик ЭЛТ-мониторов (стандарт опубликован в 2011 году), т.е. является формализацией существующей практики.

Кладбище слонов ЭЛТ

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

Rec. 709 рассчитана на использование 8-битного или 10-битного кодирования. В большинстве контента используется 8-битное кодирование. Для него в стандарте указано, что распределение диапазона яркости сигнала должно распределяться в кодах 16-235.

HDR10

Что касается HDR-видео, то в нём есть два основных соперника: Dolby Vision и HDR10. В этой статье я сосредоточусь на HDR10, потому что это открытый стандарт, который быстрее стал популярным. Этот стандарт выбран для Xbox One S и PS4.

Мы снова начнём с рассмотрения используемой в HDR10 части цветности цветового пространства, определённой в Рекомендации ITU-R BT.2020 (UHDTV). В ней указаны следующие координаты цветности основных цветов:

И снова в качестве белой точки используется D65. При визуализации на схеме xy Rec. 2020 выглядит следующим образом:

Охват Rec. 2020

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

Теперь мы переходим к разделу стандарта о яркости, и здесь снова всё становится более интересным. В своей кандидатской диссертации 1999 года “Contrast sensitivity of the human eye and its effect on image quality” («Контрастная чувствительность человеческого глаза и её влияние на качество изображения») Питер Бартен представил немного пугающее уравнение:

(Многие переменные этого уравнения сами по себе являются сложными уравнениями, например, яркость скрывается внутри уравнений, вычисляющих E и M).

Уравнение определяет, насколько чувствителен глаз к изменению контрастности при различной яркости, а различные параметры определяют условия просмотра и некоторые свойства наблюдателя. «Минимальная различаемая разница» (Just Noticeable Difference, JND) обратна уравнению Бартена, поэтому для дискретизации EOTF, чтобы избавиться от привязки к условиям просмотра, должно быть верно следующее:

Общество инженеров кино и телевидения (Society of Motion Picture and Television Engineers, SMPTE) решило, что уравнение Бартена будет хорошей основой для новой EOTF. Результатом стало то, что мы сейчас называем SMPTE ST 2084 или Perceptual Quantizer (PQ).

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

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

Для максимальной яркости в 10 000 нит с использованием 12-битной дискретизации (которая используется в Dolby Vision) результат выглядит следующим образом:

EOTF PQ

Как можно заметить, дискретизация не занимает весь диапазон яркости.

В стандарте HDR10 тоже используется EOTF PQ, но с 10-битной дискретизацией. Этого недостаточно, чтобы оставаться ниже порога Бартена в диапазоне яркости в 10 000 нит, но стандарт позволяет встраивать в сигнал метаданные для динамической регуляции пиковой яркости. Вот как 10-битная дискретизация PQ выглядит для разных диапазонов яркости:

Разные EOTF HDR10

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

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

На момент написания статьи телевизоры с HDR10, представленные на рынке, обычно имеют пиковую яркость 1000-1500 нит, и для них достаточно 10 бит. Стоит также заметить, что изготовители телевизоров могут сами решать, что им делать с яркостями выше диапазона, который они могут отображать. Некоторые придерживаются подхода с жёсткой обрезкой, другие — с более мягкой.

Вот пример того, как выглядит 8-битная дискретизация Rec. 709 с пиковой яркостью 100 нит:

EOTF Rec. 709 (16-235)

Как можно видеть, мы намного выше порога Бартена, и, что важно, даже самые неразборчивые покупатели будут настраивать свои телевизоры на значительно большие 100 нит пиковые яркости (обычно на 250-400 нит), что поднимет кривую Rec. 709 ещё выше.

В заключение

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

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

RGB модель описывает излучаемые цвета. Она основана на трёх основных (базовых) цветах: красный (Red), зелёный (Green) и синий (Blue). RGB-модель можно назвать «родной» для дисплея. Остальные цвета получаются сочетанием базовых. Цвета такого типа называются аддитивными.

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

Основные цвета взяты из биологии человека. То есть, эти цвета основаны на физиологической реакции человеческого глаза на свет. Человеческий глаз имеет фоторецептор клеток, реагирующих на наиболее зеленый (М), желто-зеленый (L) и сине-фиолетовый (S) света (максимальная длин волн от 534 нм, 564 нм и 420 нм соответственно). Человеческий мозг может легко отличить широкий спектр различных цветов на основе различий в сигналах, полученных от трех волн.

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

В режиме 16 бит на пиксель, также известном как Highcolor, есть либо 5 бит на цвет (часто упоминается как 555 режим) или с дополнительным битом для зеленого цвета (известен как 565 режим). Дополнен зеленый цвет из-за того, что человеческий глаз имеет способность выявлять больше оттенков зеленого, чем любого другого цвета.

RGB значения, представленные в режиме 24 бит на пиксель (bpp), известном также под именем Truecolor, обычно выделяется три целых значения между 0 и 255. Каждое из этих трех чисел представляет собой интенсивность красного, зеленого и синего соответственно.

В RGB — три канала: красный, синий и зелёный, т.е. RGB — трёхканальная цветовая модель. Каждый канал может принимать значения от 0 до 255 в десятичной или, что ближе к реальности, от 0 до FF в шестнадцатеричной системах счисления. Это объясняется тем, что байт, которым кодируется канал, да и вообще любой байт состоит из восьми битов, а бит может принимать 2 значения 0 или 1, итого 28=256. В RGB, например, красный цвет может принимать 256 градаций: от чисто красного (FF) до чёрного (00). Таким образом несложно подсчитать, что в модели RGB содержится всего 2563 или 16777216 цветов.

В RGB три канала, и каждый кодируется 8-ю битами. Максимальное, FF (или 255) значение даёт чистый цвет. Белый цвет получается путём сочетания всех цветов, точнее, их предельных градаций. Код белого цвета = FF(красный) + FF(зелёный) + FF(синий). Соответственно код чёрного = 000000. Код жёлтого = FFFF00, пурпурного = FF00FF, голубого = 00FFFF.

Также есть еще 32 и 48 битные режимы отображения цветов.

RGB не используется для печати на бумаге, вместо нее существует CMYK-цветовое пространство.

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

Ярко красный цвет код

Шестнадцатеричные цветовые коды

Настольные и портативные цифровые устройства поддерживают цветовую модель RGB. RGB означает красный, зеленый и синий, и только эти три цвета используются для воспроизведения всех других цветов для цифровых дисплеев. Цветовой код шестнадцатеричного цвета — 6-значный цветовой код с префиксом хеша (#), который содержит цифровую информацию о цвете.

Цветовой код Hex содержит числовые значения от 0 до 9 и алфавитные значения от A до F, где 0 более темный цвет, а F более светлый.

Помимо этого F представляет проявление оттенка, а 0 — отсутствие оттенка. В приведенной ниже таблице показан оттенок красного канала.

Как видно из диаграмм, интенсивность яркости и оттенка увеличивается от 0 до F и уменьшается от F до 0. Цветовой код #000000 показывает истощение оттенка и преобладании темноты, а цветовой код #FFFFFF показывает увеличение оттенка и яркости. В шестнадцатеричном цветовом коде первые две цифры обозначают красный канал, третий и четвертый — зеленый, а последние две цифры обозначают синий канал.

Шестнадцатеричные цветовые коды — прописываются через шесть цифр: Красный основной, Красный Малый, Зеленый основной, Зеленый второстепенный, Синий основной и Синий второстепенный. Основная цифра определяет, будет ли получающийся цвет оттенком красного, зеленого или синего; а младшая цифра определяет оттенок или тон этого цвета. Цифры с более высоким значением более яркие и насыщенные, а цифры с более низким значением темные и ненасыщенные.

Шестнадцатеричный цветовой код #3F51B5 приведет к оттенку синего, так как основная цифра синего имеет самое яркое значение по сравнению с красным и зеленым. Пример можно увидеть в графическом представлении ниже —

В цветовом коде # FF0000 основные и второстепенное значение для красного канала — это F, который обозначает наиболее яркий оттенок и тон. Цифры для двух других каналов равны 0, которые будут отображать истощение их оттенков и нулевое значение для яркости, поэтому интерпретируемый цвет в модели RGB будет самым ярким оттенком красного.

Точно так же интерпретируемые результаты для шестнадцатеричных кодов #00FF00 и #0000FF будут соответственно зелеными и синими цветам.

Давайте рассмотрим еще несколько шестнадцатеричных цветовых кодов, которые интерпретируются, когда два канала в модели RGB находятся на самом ярком уровне.
Желтый — # FFFF00
Фиолетовый — # FF00FF
Бирюзовый — # 00FFFF

Если шестнадцатеричный цветовой код написан как «# FC3», он будет интерпретироваться как «# FFCC33».

Если все значения шестнадцатеричных кодов одинаковы, это приведет к появлению серых оттенков.

Шестнадцатеричные цветовые коды — резюме

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

Ярко красный цвет код

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

Названия цветов и html коды

Ализариновый красный, Alizarin Crimson, #E32636
Янтарный, Amber, #FFBF00
Аметистовый, Amethyst, #9966CC
Спаржа, Asparagus, #7BA05B
Морской волны, Aqua, #00FFFF
Аквамариновый, Aquamarine, #7FFFD4
Лазурный, Azure, #007FFF
Бежевый, Beige, #F5F5DC
Бистр, Bistre, #3D2B1F
Чёрный, Black, #000000
Синий, Blue, #0000FF
Вода пляжа Бонди, Bondi Blue, #0095B6
Латунный, Brass, #B5A642
Ярко-зелёный, Bright green, #66FF00
Ярко-бирюзовый, Bright turquoise, #08E8DE
Ярко-фиолетовый, Bright violet, #CD00CD
Бронзовый, Bronze, #CD7F32
Коричневый, Brown, #964B00
Кожа буйвола, Buff, #F0DC82
Бургундский, Burgundy, #900020
Выгоревший оранжевый, Burnt Orange, #CC5500
Сиена жжёная, Burnt Sienna, #E97451
Умбра жжёная, Burnt umber, #8A3324
Камуфляжный зелёный, Camouflage green, #78866B
Кардинал, Cardinal, #C41E3A
Карминово-красный, Carmine, #960018
Морковный, Carrot, #ED9121
Серо-зелёный, Celadon, #ACE1AF
Светлая вишня, Cerise, #DE3163
Лазурный, Cerulean, #007BA7
Лазурно-синий, Cerulean blue, #2A52BE
Салатовый / Шартрез, Chartreuse, #7FFF00
Каштановый, Chestnut, #CD5C5C
Шоколадный, Chocolate, #D2691E
Коричневый, Cinnamon, #7B3F00
Кобальт синий, Cobalt, #0047AB
Медный, Copper, #B87333
Коралловый, Coral, #FF7F50
Кукурузный, Corn, #FBEC5D
Васильковый, Cornflower blue, #6495ED
Кремовый, Cream, #FFFDD0
Малиновый, Crimson, #DC143C
Циан, васильковый, Cyan, #00FFFF
Тёмно-коричневый, Dark brown, #654321
Тёмно-лазурный, Dark cerulean, #08457E
Тёмно-каштановый, Dark chestnut, #986960
Тёмно-коралловый, Dark coral, #CD5B45
Тёмно-золотой, Dark goldenrod, #B8860B
Тёмно-зелёный, Dark green, #013220
Тёмный индиго, Dark Indigo, #310062
Тёмный хаки, Dark Khaki, #BDB76B
Тёмно-оливковый, Dark Olive, #556832
Тёмный пастельно-зелёный, Dark pastel green, #03C03C
Тёмно-персиковый, Dark Peach, #FFDAB9
Тёмно-розовый, Dark pink, #E75480
Тёмная лососина, Dark salmon, #E9967A
Тёмно-алый, Dark Scarlet, #560319
Тёмно-аспидный серый, Dark slate gray, #2F4F4F
Тёмный весенне-зелёный, Dark spring green, #177245
Тёмный жёлто-коричневый, Dark tan, #918151
Тёмно-мандариновый, Dark tangerine, #FFA812
Тёмный зелёный чай, Dark Tea Green, #BADBAD
Тёмно-бирюзовый, Dark turquoise, #116062
Тёмно-фиолетовый, Dark violet, #423189
Голубой, Deep sky blue, #00BFFF
Джинсовый синий, Denim, #1560BD
Защитно-синий, Dodger blue, #1E90FF
Изумрудный, Emerald, #50C878
Баклажановый, Eggplant, #990066
Зелёный папоротник, Fern green, #4F7942
Льняной, Flax, #EEDC82
Фуксия, Magenta (Fuchsia), #FF00FF
Гуммигут, Gamboge, #E49B0F
Золотой, Gold, #FFD700
Золотисто-берёзовый, Goldenrod, #DAA520
Серый, Gray, #808080
Серая спаржа, Gray-asparagus, #465945
Зелёный серый чай, Gray-Tea Green, #CADABA
Зелёный, Green, #00FF00
Жёлто-зелёный, Green-yellow, #ADFF2F
Синий Градуса, Gradus Blue, #007DFF
Гелиотроп, Heliotrope, #DF73FF
Ярко-розовый, Hot pink, #FC0FC0
Индиго, Indigo, #4B0082
Международный (сигнальный) оранжевый, International orange (Safety orange), #FF4F00
Жёлто-зелёный, Jade, #00A86B
Хаки, Khaki, #C3B091
Синий Клейна, Klein Blue, #3A75C4
Лаванда, Lavender, #E6E6FA
Розово-лавандовый, Lavender Blush, #FFF0F5
Лимонный, Lemon, #FDE910
Лимонно-кремовый, Lemon Cream, #FFFACD
Светло-коричневый, Light brown, #CD853F
Сиреневый, Lilac, #C8A2C8
Лайм, Lime, #CCFF00
Льняной, Linen, #FAF0E6
Малахитовый, Malachite, #0BDA51
Коричнево-малиновый, Maroon, #800000
Розовато-лиловый, Mauve, #993366
Полуночно-синий, Midnight Blue, #003366
Зелёная мята, Mint Green, #98FF98
Зелёный мох, Moss green, #ADDFAD
Розовый Маунтбэттена, Mountbatten pink, #997A8D
Горчичный, Mustard, #FFDB58
Белый навахо, Navajo white, #FFDEAD
Тёмно-синий, Navy blue, #000080
Охра, Ochre, #CC7722
Старое золото, Old Gold, #CFB53B
Оливковый, Olive, #808000
Нежно-оливковый, Olive Drab, #6B8E23
Оранжевый, Orange, #FFA500
Орхидея, Orchid, #DA70D6
Бледно-синий, Pale Blue, #AFEEEE
Бледно-коричневый, Pale brown, #987654
Бледно-карминный, Pale carmine, #AF4035
Бледно-каштановый, Pale chestnut, #DDADAF
Бледно-васильковый, Pale cornflower blue, #ABCDEF
Бледно-пурпурный, Pale magenta, #F984E5
Бледный розовато-лиловый, Pale mauve, #996666
Бледно-розовый, Pale pink, #FADADD
Лиловый, Pale red-violet, #DB7093
Бледно-песочный, Pale Sandy Brown, #DABDAB
Палевый, Pale yellow, #F0DC82
Панг, Pang, #C7FCEC
Побег папайи, Papaya whip, #FFEFD5
Пастельно-зелёный, Pastel green, #77DD77
Пастельно-розовый, Pastel pink, #FFD1DC
Персиковый, Peach, #FFE5B4
Оранжево-персиковый, Peach-orange, #FFCC99
Жёлто-персиковый, Peach-yellow, #FADFAD
Грушевый, Pear, #D1E231
Барвинок, Periwinkle, #CCCCFF
Персидский синий, Persian blue, #6600FF
Зелёная сосна, Pine Green, #01796F
Розовый, Pink, #FFC0CB
Оранжево-розовый, Pink-orange, #FF9966
Сливовый, Plum, #660066
Пороховая синь, Powder blue, #003399
Красновато-коричневый, Puce, #CC8899
Берлинская лазурь, Prussian blue, #003153
Тыква, Pumpkin, #FF7518
Пурпурный, Purple, #660099
Умбра, Raw umber, #734A12
Красный, Red, #FF0000
Фиолетово-красный, Red-violet, #C71585
Яйца дрозда, Robin egg blue, #00CCCC
Королевский синий, Royal Blue, #4169E1
Красновато-коричневый, Russet, #755A57
Ржаво-коричневый, Rust, #B7410E
Сигнальный оранжевый, Safety Orange (Blaze Orange), #FF9900
Шафрановый, Saffron, #F4C430
Сапфировый, Sapphire, #082567
Лососёвый, Salmon, #FF8C69
Песочный, Sandy brown, #F4A460
Сангрия, Sangria, #92000A
Алый, Scarlet, #FF2400
Жёлтого школьного автобуса, School bus yellow, #FFD800
Зелёное море, Sea Green, #2E8B57
Морской пены, Seashell, #FFF5EE
Отборный жёлтый, Selective yellow, #FFBA00
Сепия, Sepia, #704214
Серебряный, Silver, #C0C0C0
Серый шифер, Slate gray, #708090
Зелёная весна, Spring Green, #00FF7F
Синяя сталь, Steel blue, #4682B4
Болотный, Swamp green, #ACB78E
Загара, Tan, #D2B48C
Краснобуро-оранжевый, Tenne, #CD5700
Мандариновый, Tangerine, #FFCC00
Зелёный чай, Tea Green, #D0F0C0
Сине-зелёный, Teal, #008080
Чертополох, Thistle, #D8BFD8
Бирюзовый, Turquoise, #30D5C8
Тициановый, Titian, #d53e07
Ультрамариновый, Ultramarine, #120A8F
Киноварь, Vermilion, #FF4D00
Фиолетовый, Violet, #8B00FF
Фиолетово-баклажанный, Violet-eggplant, #991199
Ядовито-зелёный, Viridian, #40826D
Пшеничный, Wheat, #F5DEB3
Белый, White, #FFFFFF
Глициния, Wisteria, #C9A0DC
Жёлтый, Yellow, #FFFF00
Циннвальдит, Zinnwaldite, #EBC2AF
Сомон, Saumon, #EFAF8C
Кофейный, Coffee, #442D25
Медвежьего ушка, Byron, #834D18
Кирпичный, Brick, #884535
Терракотовый, Terracotta, #904D30
Камелопардовый, Camelopardalis, #A25F2A
Ванильный, Vanilla, #D5713F
Рыжий, Reddish-brown, #D77D31
Сиена, Siena, #E28B00
Последний вздох Жако, Jaco, #FF9218
Жёлто-розовый, Yellow Pink, #FFE4B2
Бедра испуганной нимфы, Scared nymph, #FAEEDD
Сливочный, Light cream, #F2E8C9
Пергидрольной блондинки, Perhydor, #EEE6A3
Шамуа, Chamois, #A08040
Тёмно-грушевый, Dark pear, #D8A903
Детской неожиданности, Child’s surprise, #F7F21A
Вердепешевый, Vert-de-pеche, #DAD871
Слоновой кости, Ivory, #FFFDDF
Травяной, Grass, #5DA130
Влюбленной жабы, Toad in love, #3CAA3C
Вердепомовый, Vert-de-pomme, #34C924
Фисташковый, Pistachio, #BEF574
Красного моря, Red Sea, #1F4037
Лягушки в обмороке, Fainted frog, #7B917B
Маренго, Marengo, #4C5866
Мурена, Moray, #1C6B72
Электрик, Electric, #7DF9FF
Светло-серый, Light Grey, #BBBBBB
Кварцевый, Quartz, #99958C
Антрацитовый, Anthracite, #464451
Чёрного моря, Black Sea, #1A4780
Сизый, Bluish, #79A0C1
Ниагара, Niagara, #9DB1CC
Небесный, Sky, #7FC7FF
Гридеперлевый, Gris de perle, #C7D0CC
Бороды Абдель-Керима, Abdel Kerim’s beard, #D5D5D5
Серобуромалиновый, Seroburomalinovyj, #735184
Фиалковый, Violaceous, #EA8DF7
Звезды в шоке, Shocked star, #FF47CA
Вишнёвый, Cherry, #911E42
Блошиного брюшка, Flea belly, #4E1609
Бурый, Fulvous, #45161C
Бисмарк-фуриозо, Bismarck-furious, #A5260A
Бордовый, Wine red, #9B2D30

#ffffff Выбрать цвет

#bbbbbb Выбрать цвет

#888888 Выбрать цвет

#444444 Выбрать цвет

#000000 Выбрать цвет

Ярко красный цвет код

Теги HTML

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

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

Если значения компонент цвета одинаковы (например: #d6d6d6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00ff00) и синим (#0000ff).
Желтый цвет (#ffff00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00ffff) получается за счет объединения синего и зеленого цвета.

Рис. 1. Цветовой круг

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

Рис. 2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

Цвета по названию

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

Cincinnati Reds Цветовые коды Hex, RGB и CMYK

Цвета Cincinnati Reds — красный, черный и белый. Цвета команды Cincinnati Reds в Hex, RGB и CMYK можно найти ниже. Цинциннати Редс — команда из Цинциннати, штат Огайо. Самые большие соперники Цинциннати Редз — Сент-Луис Кардиналс.

Основные цвета логотипа Cincinnati Reds

Основные цвета красных цветов Цинциннати можно найти в таблице ниже.

RED
PANTONE: PMS 199
Hex Цвет: # C6011F;
RGB: (198,1,31)
CMYK: (00,100,65,00)
Текстиль: 18-1764 TC
Резьба: RA-2266
Купить подходящую краску ЧЕРНЫЙ
PANTONE: Process Black
Hex Color: # 000000;
RGB: (0,0,0)
CMYK: (00,00,00,100)
Текстиль: 19-1102 TC
Нить: RA-2396
Купить подходящую краску

Cincinnati Reds Цветовые коды Pantone

Цвета Pantone команды Cincinnati Reds MLB: PMS 199 C для красного и PMS Process Black для черного.

Красный цвет Цинциннати Красных цветов Pantone представлен ниже.

PMS 199 C

Черный цвет Pantone красных цветов Цинциннати представлен ниже.

PMS Process Черный

Цветовые обозначения Pantone для красок Цинциннати	Цветовой код Pantone для красок Цинциннати
Красный	PMS 199 C
Черный	PMS Process Black

Цветовые коды Cincinnati Reds

Шестнадцатеричные коды цветов Cincinnati Reds: # C6011F для красного, # 000000 для черного и #FFFFFF для белого.

Красный HEX цветовой код бейсбольной команды Cincinnati Reds можно найти ниже.

# C6011F

Черный шестнадцатеричный цветовой код для красных цветов Цинциннати можно найти ниже.

# 000000

Белый шестнадцатеричный код цвета Cincinnati Reds приведен ниже.

#FFFFFF

HEX Цветовые обозначения для Cincinnati Reds	HEX Цветовой код для Cincinnati Reds
Красный	# C6011F
Черный	# 000000
Белый	#FFFFFF

Цветовые коды Cincinnati Reds RGB

Коды RGB цветов Cincinnati Reds: (198,1,31) для красного, (0,0,0) для черного и (255,255,255) для белого цвета.

Красный цветовой код RGB для красных цветов Цинциннати можно найти ниже.

(198,1,31)

Черный цветовой код RGB для красных цветов Цинциннати можно найти ниже.

(0,0,0)

Белый цветовой код RGB для красных цветов Цинциннати можно найти ниже.

(255 255 255)

Названия цветов RGB для красных цветов Цинциннати	Код цветов RGB для красных красок Цинциннати
Красный	(198,1,31)
Черный	(0,0,0)
Белый	(255,255,255)

Цветовые коды Cincinnati Reds CMYK

Коды CMYK цветов Cincinnati Reds: (00,100,65,00) для красного, (00,00,00,100) для черного и (00,00,00,00) для белого цвета.

Красный цветовой код CMYK для красных цветов Цинциннати можно найти ниже.

(00,100,65,00)

Черный цветовой код CMYK для красных цветов Цинциннати приведен ниже.

(00,00,00,100)

Белый цветовой код CMYK для красных цветов Цинциннати можно найти ниже.

(00,00,00,00)

Названия цветов CMYK для красных цветов Цинциннати	Цветовой код CMYK для красок Цинциннати
Красный	(00,100,65,00)
Черный	(00,00,00,100)
Белый	(00,00,00,00)

Цвета логотипа Cincinnati Reds

Цвета логотипа Cincinnati Reds — красный, черный и белый.Код красного цвета для логотипа Cincinnati Reds: PANTONE: PMS 199, HEX COLOR: # C6011F, RGB: (198,1,31), CMYK: (00,100,65,00), TEXTILE: 18-1764 TC, THREAD: RA-2266. Код черного цвета для логотипа Cincinnati Reds: PANTONE: PROCESS BLACK, HEX COLOR: # 000000, RGB: (0,0,0), CMYK: (00,00,00,100), TEXTILE: 19-1102 TC, THREAD: RA-2396. Код белого цвета для логотипа Cincinnati Reds — HEX COLOR: #FFFFFF, RGB: (255,255,255), CMYK: (00,00,00,00).

Логотип Цинциннати Редс

Логотип Cincinnati Reds имеет красный, черный и белый цвета и стилизованный объект C в виде треугольной кости, внутри которого указано название команды.Значение логотипа Cincinnati Reds символизирует инициал Цинциннати.

Формат изображения цветовой палитры логотипа Cincinnati Reds

Цвета логотипа Cincinnati Reds можно найти в формате изображения ниже.

Шрифты для логотипов Cincinnati Reds

Шрифт логотипа Cincinnati Reds — MLB Reds. Шрифт MLB Reds используется для надписей на майке, имен игроков, номеров, логотипа команды, брендов и товаров. Varsity — ближайший бесплатный шрифт.

Логотип Цинциннати Редс JPG

Логотип Cincinnati Reds в формате JPG можно найти ниже.

Чтобы загрузить логотип Cincinnati Reds в формате JPG, щелкните правой кнопкой мыши и выберите «Сохранить».

Цинциннати Редс логотип PNG

Логотип Cincinnati Reds в формате PNG можно найти ниже.

Чтобы загрузить логотип Cincinnati Reds в формате PNG, щелкните правой кнопкой мыши и выберите «Сохранить».

Проверено

цветов пользовательского интерфейса Metro — Colorlib

Список всех цветов Metro, как в Windows 8 и Windows Phone.

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

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

Этот светло-зеленый цвет с шестнадцатеричным кодом # 99b433 состоит из 60% красного, 70,6% красного и 20% синего. В шкале значений RGB это означает 153 красных, 180 зеленых и 51 синий. Поскольку RGB — не единственное цветовое пространство, его можно составить из 15% голубого, 0% пурпурный, 71,7% желтый и 29,4% черный в цветовом пространстве CMYK. Цвет # 99b433 имеет угол оттенка 72,6 градуса, насыщенность 55,8% и гибкость 45,3%. Этот конкретный светло-зеленый цвет можно создать, смешав # ffff66 с # 336900 или путем смешивания # F512052 и # 3D4814.Ближайший к # 99b433 цвет для веб-безопасности — # 99cc33.

  # 99b433

  RGB (153,180,51)

  RGB (60%, 70,6%, 20%)

 15, 0, 72, 29

  hsl (72,6,55,8%, 45,3%)

 72,6 °, 71,7, 70,6

Интернет Сейф

  # 99cc33

CIE-LAB

 69,222, -26,695, 59,165

XYZ

 30,055, 39,654, 9,202

xyY

 0.381, 0,503, 39,654

 69,222, 64,909, 114,285

CIE-LUV

 69,222, -12,223, 70,765

Хантер-Лаборатория

 62.971, -25.004, 35.415

RGB двоичный

 10011001, 10110100, 00110011

Зеленый цвет Metro с шестнадцатеричным кодом # 00a300 и десятичным значением 41728 состоит без красного, 63,9% зеленого и синего цветов. В шкале значений RGB # 00a300 зеленый цвет не состоит из красного, 163 зеленого и синего. RGB — не единственное цветовое пространство и при использовании CMYK вы можете составить этот цвет со 100% голубым, 0% пурпурным, 100% желтым и 36.1% черный. Цвет # 99b433 имеет угол оттенка 120 градусов, насыщенность 100% и яркость 32%. Этот конкретный зеленый цвет с шестнадцатеричным кодом # 00a300 можно создать путем смешивания # 00ff00 с # 004700 или # 00E400 и # 006200. Ближайший цвет для веб-безопасности к # 00ff00 — # 009900.

  # 00a300

  RGB (0,163,0)

  RGB (0%, 63,9%, 0%)

 100, 0, 100, 36

  hsl (120,100%, 32%)

 120 °, 100, 63.9

Интернет Сейф

  # 009900

CIE-LAB

 58,22, -61,662, 59,513

XYZ

 13.096, 26.193, 4.365

xyY

 0,3, 0,6, 26,193

 58.22, 85.697, 136.016

CIE-LUV

 58,22, -55,129, 71,268

Хантер-Лаборатория

 51,179, -43,886, 30,768

RGB двоичный

 00000000, 10100011, 00000000

Dark Metro Green с шестнадцатеричным кодом # 1e7145 и десятичным значением 1995077 состоит из 11.8% красный, 44,3% зеленый и 27,1% синий. В шкале значений RGB # 1e7145 темно-зеленый состоит из 30 красных, 113 зеленых и 69 синих. Такой же темно-зеленый в Цветовое пространство CMYK состоит из 73,5% голубого, 0% пурпурного, 38,9% желтого и 55,7% черного. Цвет # 1e7145 имеет угол оттенка 148,2 градуса, насыщенность 58% и яркость 28%. Именно этот темно-зеленый цвет с шестнадцатеричным кодом # 1e7145 может быть составленным путем смешивания # 2A9E61 и # 124429 или смешивания # 30B56E и # 0C2D1C. Закрывает веб-безопасный цвет # 1e7145 — # 336633.

  # 1e7145

  RGB (30,113,69)

  RGB (11,8%, 44,3%, 27,1%)

 73, 0, 39, 56

  hsl (148,2,58%, 28%)

 148,2 °, 73,5, 44,3

Интернет Сейф

  # 336633

CIE-LAB

 42,024, -35,507, 17,515

XYZ

 7,514, 12,515, 7,65

xyY

 0,271, 0,452, 12,515

 42,024, 39.592, 153,744

CIE-LUV

 42,024, -32,825, 26,165

Хантер-Лаборатория

 35,377, -23,995, 11,943

RGB двоичный

 00011110, 01110001, 01000101

Цвет

Metro Magenta с шестнадцатеричным кодом # ff0097 и десятичным значением 16711831 состоит из 100% красного, 0% зеленого и 59,2% синего. В шкале значений RGB # ff0097 пурпурный цвет состоит из 255 красных, 0 зеленого и 151 синего. Такой же пурпурный в цвете CMYK пространство состоит из 0% голубого, 100% пурпурного, 40.8% желтого и 0% черного. Цвет # ff0097 имеет угол оттенка 324,5 градуса, насыщенность 100% и яркость 50%. Пурпурный цвет с шестнадцатеричным кодом # ff0097 может быть составлен путем смешивания # FF00D7. и # FF0057 или смешивание # FF0073 и # FF00BB. Закрывает веб-безопасный цвет # ff0097 — # ff0099.

  # ff0097

  RGB (255,0,151)

  RGB (100%, 0%, 59,2%)

 0, 100, 41, 0

  hsl (324,5, 100%, 50%)

 324.5 °, 100, 100

Интернет Сейф

  # ff0099

CIE-LAB

 55,583, 86,354, -8,641

XYZ

 46,827, 23,5, 31,347

xyY

 0,461, 0,231, 23,5

 55,583, 86,786, 354,286

CIE-LUV

 55,583, 131,38, -28,652

Хантер-Лаборатория

 48,476, 87,594, -4,406

RGB двоичный

 11111111, 00000000, 10010111

Light Metro Purple с шестнадцатеричным кодом # 9f00a7 и десятичным значением 10420391 состоит из 62.4% красный, 0% зеленый и 65,5% синий. В шкале значений RGB # 9f00a7 светло-фиолетовый состоит из 159 красных, нет зеленого и 167 синих. RGB — не единственный цветовое пространство, а при использовании CMYK вы можете составить этот цвет из 4,8% голубого, 100% пурпурного, 0% желтого и 34,5% черного. Цвет # 9f00a7 имеет угол оттенка 297,1 градуса, насыщенность 100% и яркость 32,7%. Светло-фиолетовый цвет с Шестнадцатеричный код # 9f00a7 можно создать путем смешивания # DF00EA и # 5F0064 или # DF00B8 и # 5F0096. Ближайший цвет для веб-безопасности к # 9f00a7 — # 9.

  # 9f00a7

  RGB (159,0,167)

  RGB (62,4%, 0%, 65,5%)

 5, 100, 0, 35

  hsl (297,1 100%, 32,7%)

 297,1 °, 100, 65,5

Интернет Сейф

# 9

CIE-LAB

 38,132, 70,245, -46,733

XYZ

 21,273, 10,162, 37,398

xyY

 0,309, 0,148, 10,162

 38.132, 84,37, 326,365

CIE-LUV

 38,132, 49,463, -73,581

Хантер-Лаборатория

 31,878, 63,326, -47,241

RGB двоичный

 10011111, 00000000, 10100111

Metro Purple с шестнадцатеричным кодом # 7e3878 и десятичным значением 8271992 состоит из 49,4% красного, 22% зеленого и 47,1% синего. В шкале значений RGB # 7e3878 pruple состоит из 126 красных, 56 зеленых и 120 синих. Тот же фиолетовый в цвете CMYK пространство состоит из 0% голубого, 55.6% пурпурный, 4,8% желтый и 50,6% черный. Цвет # 7e3878 имеет угол оттенка 305,1 градуса, насыщенность 38,5% и яркость 35,7%. Этот фиолетовый цвет с шестнадцатеричным кодом # 7e3878 может быть составлен смешивание # B04EA8 и # 4C2248 или смешивание # CA5AC0 и # 321630. Закрывает веб-безопасный цвет # 7e3878 — # 663366.

  # 7e3878

  RGB (126,56,120)

  RGB (49,4%, 22%, 47,1%)

 0, 56, 5, 51

  hsl (305.1,38.5%, 35,7%)

 305,1 °, 55,6, 49,4

Интернет Сейф

  # 663366

CIE-LAB

 35,244, 39,407, -22,871

XYZ

 13,408, 8,621, 18,726

xyY

 0,329, 0,212, 8,621

 35,244, 45,563, 329,87

CIE-LUV

 35,244, 32,902, -35,853

Хантер-Лаборатория

 29,361, 30,133, -17,261

RGB двоичный

 01111110, 00111000, 01111000

Dark Metro Purple с шестнадцатеричным кодом # 603cba и десятичным значением 6307002 состоит из 37.6% красный, 23,5% зеленый и 72,9% синий. В шкале значений RGB # 603cba темно-фиолетовый состоит из 96 красных, 60 зеленых и 186 синих. RGB — не единственный цветовое пространство, а при использовании CMYK вы можете составить этот цвет из 48,4% голубого, 67,7% пурпурного, 0% желтого и 27,1% черного. Цвет # 603cba имеет угол оттенка 257,1 градуса, насыщенность 51,2% и яркость 48,2%. Темно-фиолетовый цвет с Шестнадцатеричный код # 603cba можно создать путем смешивания # C0789B и # 0000D9 или # 5C789B и # 6400D9. Ближайший цвет для веб-безопасности к # 603cba — # 6633cc.

  # 603cba

  RGB (96,60,186)

  RGB (37,6%, 23,5%, 72,9%)

 48, 68, 0, 27

  hsl (257,1,51,2%, 48,2%)

 257,1 °, 67,7, 72,9

Интернет Сейф

  # 6633cc

CIE-LAB

 36,487, 45,762, -61,119

XYZ

 15.301, 9.263, 47.434

xyY

 0,213, 0,129, 9,263

 36.487, 76,353, 306,823

CIE-LUV

 36,487, 4,053, -88,795

Хантер-Лаборатория

 30,436, 36,475, -71,097

RGB двоичный

 01100000, 00111100, 10111010

Darken используется как черный цвет для Metro Ui. Хотя это не чисто черный цвет, он лучше смотрится в веб-дизайне и дизайне в целом. Как вы, наверное, знаете, чистого черного в природе нет, и ни в одном Metro UI его нет. Цвет Metro Darken с шестнадцатеричным кодом 1d1d1d и десятичным значением 1

7 состоит из 11.4% красный, 11,4% зеленый и 11,4% синий. В шкале значений RGB 1d1d1d состоит из 29 красных, 29 зеленых и 29 синих. Темнее в цветовом пространстве CMYK установлено состоит из 0% голубого, 0% пурпурного, 0% желтого и 88,6% черного. Цвет 1d1d1d имеет угол оттенка 0 градусов, насыщенность 0% и яркость 11,4%. Затемнение цвета с HEX-кодом 1d1d1d можно составить путем смешивания # 292929 и # 111111 или смешивание # 2E2E2E и # 0C0C0C. Закрывает веб-безопасный цвет 1d1d1d # 333333.

  # 1d1d1d

  RGB (29,29,29)

  RGB (11.4%, 11,4%, 11,4%)

 0, 0, 0, 89

  hsl (0,0%, 11,4%)

 0 °, 0, 11,4

Интернет Сейф

  # 333333

CIE-LAB

 10,767, -0, -0,002

XYZ

 1,168, 1,229, 1,338

xyY

 0,313, 0,329, 1,229

 10,767, 0,002, 266,929

CIE-LUV

 10,767, -0,001, -0,001

Хантер-Лаборатория

 11,084, -0.592, 0.602

RGB двоичный

 00011101, 00011101, 00011101

Цвет

Metro Teal с шестнадцатеричным кодом # 00aba9 и десятичным значением 6307002 состоит из 0% красного, 67,1% зеленого и 66,3% синего. В шкале значений RGB # 00aba9 бирюзовый цвет состоит из 0 красных, 171 зеленого и 169 синих. RGB — не единственное цветовое пространство и при использовании CMYK вы можете составить этот цвет из 100% голубого, 0% пурпурного, 1,2% желтого и 32,9% черного. Цвет бирюзового цвета # 00aba9 имеет угол оттенка 179,3 градуса, насыщенность 100% и яркость 33.5%. Цвет бирюзовый с ШЕСТИГРАННЫМ кодом # 00aba9 банка могут быть созданы путем смешивания # 00EFED и # 006765 или # 008B89 и # 00CBC9. Ближайший цвет для веб-безопасности к # 00aba9 — # 009999.

  # 00aba9

  RGB (0,171,169)

  RGB (0%, 67,1%, 66,3%)

 100, 0, 1, 33

  hsl (179,3 100%, 33,5%)

 179,3 °, 100, 67,1

Интернет Сейф

  # 009999

CIE-LAB

 63.333, -36,256, -9,455

XYZ

 21,722, 31,988, 42,563

xyY

 0,226, 0,332, 31,988

 63,333, 37,469, 194,617

CIE-LUV

 63,333, -49,197, -8,898

Хантер-Лаборатория

 56,558, -30,421, -5,029

RGB двоичный

 00000000, 10101011, 10101001

Цвет

Light Metro Blue с шестнадцатеричным кодом цвета # eff4ff и десятичным значением 15725823 создается путем смешивания 93,7% красного, 95.7% зеленый и 100% синий. В цветовом пространстве CMYK # eff4ff голубой состоит из 6,3% голубого, 4,3% пурпурного, 0% желтого и 0% черный. В стандартной шкале значений RGB # eff4ff состоит из 239 красных, 244 зеленых и 255 синих. Этот цвет также имеет угол оттенка 221,3 градуса, насыщенность 100% и яркость 96,9%. Светло-голубой цвет с шестнадцатеричным кодом # eff4ff банка могут быть созданы смешиванием # E9F3FF и # F5F5FF или # EEF0FF и # F0F8FF. Ближайший к веб-безопасности цвет # eff4ff — #ffffff.

  # eff4ff

  RGB (239 244 255)

  RGB (93.7%, 95,7%, 100%)

 6, 4, 0, 0

  hsl (221,3 100%, 96,9%)

 221,3 °, 6,3, 100

Интернет Сейф

  #ffffff

CIE-LAB

 96,109, 0,363, -5,855

XYZ

 85,994, 90,272, 107,496

xyY

 0,303, 0,318, 90,272

 96,109, 5,866, 273,544

CIE-LUV

 96,109, -3,352, -9,233

Хантер-Лаборатория

 95.011, -4,711, -0,573

RGB двоичный

 11101111, 11110100, 11111111

Цвет

Metro Blue с цветовым кодом HEX # 2d89ef и десятичным значением 2984431 создается путем смешивания 17,6% красного, 53,7% зеленого и 93,7% синего. В цветовом пространстве CMYK # 2d89ef голубой состоит из 81,2% голубого, 42,7% пурпурного, 0% желтого и 6,3%. чернить. В стандартной шкале значений RGB # 2d89ef состоит из 45 красных, 137 зеленых и 239 синих. Этот цвет также имеет угол оттенка 211,5 градусов и насыщенность 85.8% и легкость 55,7%. Голубой цвет с HEX кодом # 2d89ef может быть создается путем смешивания # 00FFFF и # 5A13DF или # 009BFF и # 5A77DF. Ближайший цвет для веб-безопасности к # 2d89ef — # 3399ff.

  # 2d89ef

  RGB (45137239)

  RGB (17,6%, 53,7%, 93,7%)

 81, 43, 0, 6

  hsl (211,5,85,8%, 55,7%)

 211,5 °, 81,2, 93,7

Интернет Сейф

  # 3399ff

CIE-LAB

 56.761, 9,293, -58,755

XYZ

 25.604, 24.679, 85.071

xyY

 0,189, 0,182, 24,679

 56,761, 59,486, 278,988

CIE-LUV

 56,761, -29,898, -93,825

Хантер-Лаборатория

 49,678, 5,063, -66,756

RGB двоичный

 00101101, 10001001, 11101111

Цвет

Dark Metro Blue с шестнадцатеричным кодом # 2b5797 и десятичным значением 2840471 состоит из 16,9% красного, 34,1% зеленого и 59.2% синий. В шкале значений RGB # 2b5797 темно-синий состоит из 43 красных, 87 зеленых и 151 синего. RGB — не единственный цветовое пространство, а при использовании CMYK вы можете составить этот цвет из 71,5% голубого, 42,4% пурпурного, 0% желтого и 40,8% черного. Цвет # 2b5797 имеет угол оттенка 215,6 градуса, насыщенность 55,7% и яркость 38%. Темно-синий цвет с HEX код # 2b5797 может быть создан путем смешивания # 06AEFF и # 50002F или # 064AFF и # 50642F. Ближайший цвет для веб-безопасности к # 2b5797 — # 336699.

  # 2b5797

  RGB (43,87,151)

  RGB (16.9%, 34,1%, 59,2%)

 72, 42, 0, 41

  hsl (215,6,55,7%, 38%)

 215,6 °, 71,5, 59,2

Интернет Сейф

  # 336699

CIE-LAB

 37,048, 7,304, -39,537

XYZ

 9,989, 9,564, 30,596

xyY

 0,199, 0,191, 9,564

 37.048, 40.206, 280.466

CIE-LUV

 37,048, -16,812, -56,518

Хантер-Лаборатория

 30.925, 3,538, -37,011

RGB двоичный

 00101011, 01010111, 10010111

Цвет

Metro Yellow с шестнадцатеричным кодом # ffc40d и десятичным значением 16761869 состоит из 100% красного, 76,9% зеленого и 5,1% синего. В шкале значений RGB # ffc40d желтый состоит из 255 красных, 196 зеленых и 13 синих. RGB — не единственный цвет пробел, а при использовании CMYK вы можете составить этот цвет из 0% голубого, 23,1% пурпурного, 94,9% желтого и 0% черного. Цвет # ffc40d имеет угол оттенка 45,4 градуса, насыщенность 100% и яркость 52.5%. Желтый цвет с HEX кодом # ffc40d может быть создан смешиванием # FFFF1A и # FF8900 или # FFFF00 и # FF891A. Ближайший к веб-безопасности цвет # ffc40d — # ffcc00.

  # ffc40d

  RGB (255,196,13)

  rgb (100%, 76,9%, 5,1%)

 0, 23, 95, 0

  hsl (45,4 100%, 52,5%)

 45,4 °, 94,9, 100

Интернет Сейф

  # ffcc00

CIE-LAB

 82.256, 7,897, 82,625

XYZ

 61.054, 60.772, 8.895

xyY

 0,467, 0,465, 60,772

 82.256, 83.001, 84.541

CIE-LUV

 82,256, 49,768, 84,46

Хантер-Лаборатория

 77.957, 3.373, 47.804

RGB двоичный

 11111111, 11000100, 00001101

Цвет

Metro Orange с цветовым кодом HEX # e3a21a и десятичным значением 14

0 создается путем смешивания 89% красного, 63,5% зеленого и 10.2% синий. В цветовом пространстве CMYK # e3a21a оранжевый состоит из 0% голубого, 28,6% пурпурного, 88,5% желтого и 11%. чернить. В стандартной шкале значений RGB # e3a21a состоит из 227 красных, 162 зеленых и 26 синих. Этот оранжевый цвет также имеет угол оттенка 40,6 градуса, насыщенность 79,4% и яркость 49,6%. Оранжевый цвет с HEX кодом # e3a21a может быть создается путем смешивания # FFFF02 и # C74532 или # FF9B02 и # C7A932. Ближайший цвет для веб-безопасности к # e3a21a — # cc9933.

  # e3a21a

  RGB (227,162,26)

  rgb (89%, 63.5%, 10,2%)

 0, 29, 89, 11

  hsl (40,6,79,4%, 49,6%)

 40,6 °, 88,5, 89

Интернет Сейф

  # cc9933

CIE-LAB

 71,042, 13,898, 70,827

XYZ

 44,786, 42,249, 6,773

xyY

 0,477, 0,45, 42,249

 71.042, 72.177, 78.898

CIE-LUV

 71.042, 54.034, 69.973

Хантер-Лаборатория

 64.999, 9,243, 39,321

RGB двоичный

 11100011, 10100010, 00011010

Цвет

Dark Metro Orange с цветовым кодом HEX # da532c и десятичным значением 14308140 получается путем смешивания 85,5% красного, 32,5% зеленого и 17,3% синего. В цветовом пространстве CMYK # da532c темно-оранжевый состоит из 0% голубого, 61,9% пурпурного, 79,8% желтого. и 14,5% черный. В стандартной шкале значений RGB # da532c состоит из 218 красных, 83 зеленых и 44 синих. Этот темно-оранжевый цвет также имеет угол оттенка 13,4 градуса, насыщенность 70.2% и легкость 51,4%. Темно-оранжевый цвет с HEX код # da532c может быть создан путем смешивания # F00B30 с # C49B28 или # F06E58 с # C43700. Ближайший цвет для веб-безопасности к # da532c — # cc6633.

  # da532c

  RGB (218,83,44)

  RGB (85,5%, 32,5%, 17,3%)

 0, 62, 80, 15

  hsl (13,4, 70,2%, 51,4%)

 13,4 °, 79,8, 85,5

Интернет Сейф

  # cc6633

CIE-LAB

 53.252, 51.005, 48.844

XYZ

 32,463, 21,277, 4,78

xyY

 0,555, 0,364, 21,277

 53,252, 70,621, 43,76

CIE-LUV

 53,252, 108,673, 38,026

Хантер-Лаборатория

 46,127, 44,899, 26,145

RGB двоичный

 11011010, 01010011, 00101100

Цвет

Metro Red с шестнадцатеричным кодом цвета # ee1111 и десятичным значением 15601937 создается путем смешивания 93,3% красного, 6,7% зеленого и 6.7% синий. В цветовом пространстве CMYK # ee1111 красный состоит из 0% голубого, 92,9% пурпурного, 92,9% желтого и 6,7% черного. В стандартная шкала значений RGB # ee1111 состоит из 238 красных, 17 зеленых и 17 синих. Этот красный цвет также имеет угол оттенка 0 градусов, насыщенность 86,7% и яркость 50%. Красный цвет с шестнадцатеричным кодом # ee1111 можно создать путем смешивания # F50022 с # E72200 или # F50000 с # E72222. Ближайший цвет для веб-безопасности к # ee1111 — # ff0000.

  # ee1111

  RGB (238,17,17)

  RGB (93.3%, 6,7%, 6,7%)

 0, 93, 93, 7

  hsl (0,86,7%, 50%)

 0 °, 92.9, 93.3

Интернет Сейф

  # ff0000

CIE-LAB

 50,244, 74,763, 59,31

XYZ

 35,564, 18,623, 2,252

xyY

 0,63, 0,33, 18,623

 50,244, 95,432, 38,425

CIE-LUV

 50,244, 159,631, 34,437

Хантер-Лаборатория

 43.155, 71,58, 27,114

RGB двоичный

 11101110, 00010001, 00010001

Цвет

Dark Metro Red с шестнадцатеричным кодом цвета # b91d47 и десятичным значением 12131655 создается путем смешивания 72,5% красного, 11,4% зеленого и 27,8% синего. В цветовом пространстве CMYK # b91d47 темно-красный состоит из 0% голубого, 84,3% пурпурного, 61,6% желтого и 27,5% черный. В стандартной шкале значений RGB # b91d47 состоит из 185 красных, 29 зеленых и 71 синего. Этот красный цвет также имеет угол оттенка 343,8 градуса, насыщенность 72.9% и легкость 42%. Тёмно-красный цвет с шестнадцатеричным кодом # b91d47 банка может быть создан путем смешивания # FF3A2A с # 730064 или # FF002A с # 733A64. Ближайший цвет для веб-безопасности к # b91d47 — # cc3333.

  # b91d47

  RGB (185,29,71)

  RGB (72,5%, 11,4%, 27,8%)

 0, 84, 62, 27

  hsl (343,8,72,9%, 42%)

 343,8 °, 84,3, 72,5

Интернет Сейф

  # cc3333

CIE-LAB

 40.655, 60,85, 17,283

XYZ

 21,585, 11,651, 7,073

xyY

 0,535, 0,289, 11,651

 40.655, 63.257, 15.856

CIE-LUV

 40.655, 105.183, 7.196

Хантер-Лаборатория

 34.133, 53.149, 11.607

RGB двоичный

 10111001, 00011101, 01000111

В пользовательском интерфейсе Metro нет разницы в белом цвете, потому что он использует чистый белый цвет с HEX-кодом #ffffff. Цвет Metro White с цветовым кодом HEX #ffffff и десятичным значением 16777215 создается путем смешивания 100% красного, 100% зеленого и 100% синий.В цветовом пространстве CMYK #ffffff белый цвет состоит из 0% голубого, 0% пурпурного, 0% желтого и 0% черного. В стандартной шкале значений RGB #ffffff состоит из 255 красных, 255 зеленых и 255 синих. Этот белый цвет также имеет угол оттенка 0. градусов, насыщенность 0% и яркость 100%. Белый цвет с шестнадцатеричным кодом #ffffff не может быть получен путем смешивания цветов. Это чистый цвет, и оставим его таким. Ближайший к веб-безопасности цвет для #ffffff — #ffffff.

  #ffffff

  RGB (255,255,255)

  RGB (100%, 100%, 100%)

 0, 0, 0, 0

  hsl (0,0%, 100%)

 0 °, 0, 100

Интернет Сейф

  #ffffff

CIE-LAB

 100, -0, -0.009

XYZ

 95,047, 100, 108,897

xyY

 0,313, 0,329, 100

 100, 0,009, 266,929

CIE-LUV

 100, -0,006, -0,013

Хантер-Лаборатория

 100, -5,342, 5,435

RGB двоичный

 11111111, 11111111, 11111111

Преобразование цветовых кодов (RGB, HSL, Hex, Long, CMYK)

Я часто обнаруживаю, что конвертирую между разными форматами цветовых кодов; особенно из шестнадцатеричного в RGB и обратно.Вместо того, чтобы запускать Google и искать инструменты преобразования цвета в Интернете, я решил написать свои собственные определяемые пользователем функции в Excel, теперь я могу вычислить результат на листе.

Функции в этом посте включают преобразование для форматов RGB, hex, HSL, CMYK и длинных форматов.

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

Загрузите файл примера

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

Загрузите файл: 0006 Convert color codes.zip

Различные форматы цветовых кодов Excel

Даже в Excel существует четыре различных метода определения цвета; RGB, шестнадцатеричный, HSL и длинный.

RGB

Цветовой код RGB (красный, зеленый и синий) используется в стандартном цветовом диалоговом окне.

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

HSL

В диалоговом окне стандартного цвета есть другой формат кода; используя раскрывающийся список цветовой модели , мы можем перейти на HSL. HSL использует для создания цвета H  ue, S uminance и L uminance.

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

Оттенок — это градус на цветовом круге от 0 до 360. 0 — красный, 120 — зеленый, 240 — синий.
Насыщенность — процент от количества включенного цвета.100% — полноцветный, 0% — никакой цвет (т.е. все серый)
Яркость (или яркость) — это процент серого. 0% — черный, 100% — белый.

К сожалению, Excel не поддерживает HSL стандартным образом. Вместо этого Excel измеряет все числа, где 0 — самое низкое, а 255 — самое большое. Но с этой причудой мы справимся.

Длинный

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

 Sub ActiveCellColor ()

MsgBox "Длинный цветовой код:" & ActiveCell.Interior.Color

End Sub

Выберите ячейку и запустите макрос.

Длинный код — это число от 0 до 16 777 215, где каждое отдельное число представляет цвет. Соотношение между RGB и длинным основано на простом вычислении:

Long = Синий x 256 x 256 + Зеленый x 256 + Красный

В качестве примера:

Где Красный: 33, Зеленый: 115 и Синий: 70
Результат рассчитывается следующим образом: 70 x 256 x 256 + 115 x 256 + 33 = 4 616 993

Long и RGB связаны; это просто разные способы вычисления одного и того же числа.

Hex

Hex цветовые коды похожи на RGB, поскольку они также используют 256 оттенков для каждого отдельного цвета. Важное отличие состоит в том, что шестнадцатеричная система представляет числа от 0 до 255, используя всего два символа. Это возможно, потому что шестнадцатеричный использует Base-16.

Обычно мы используем Base-10 в повседневной жизни, что означает, что у нас есть 10 цифр (0, 1, 2, 3, 4, 5, 6, 7, 8, 9). Например, число 14 создается по формуле (1 x основание) + 4. Основание равно 10, поэтому результат рассчитывается как (1 x 10) + 4, что равно 14.

Для Base-16 имеется 16 цифр; однако, поскольку у нас недостаточно числовых символов, мы используем A, B, C, D, E и F для представления чисел от 10 до 15.

В качестве примера шестнадцатеричное число AB равно 171.

A = 10
B = 11.
Вычисление: (A x основание) + B = (10 x 16) + 11 = 171

В шестнадцатеричном формате наименьшее значение равно нулю, а наибольшее значение — F (т.е. равно 15). Следовательно, существует 16 возможных отдельных цифр.Это означает, что из двух цифр мы можем создать 256 оттенков (16 x 16 = 256), что совпадает с RGB. Следовательно, hex также имеет те же 16 777 216 комбинаций, что и RGB и long.

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

Используя шестнадцатеричный код # 467321 в качестве примера, преобразование в RGB будет:

Красный: шестнадцатеричное значение 46 вычисляется как (4 * 16) + 6 = 70
Зеленый: шестнадцатеричное значение 73 вычисляется как ( 7 * 16) + 3 = 115
Синий: шестнадцатеричное значение 21 вычисляется как (2 * 16) + 1 = 33

Шестнадцатеричные коды используются в свойствах VBA для определения цвета.

Цветовой код на скриншоте выше: & H00467321 &. Однако есть очень тонкая разница при использовании кода VBA … шестнадцатеричный код нужно поменять местами. Первые два символа обозначают синий цвет, два средних символа — зеленый цвет, а последние два — синий.

Обычно синий будет # 0000FF , но для свойства VBA код будет: & H00FF0000 &

& = Начальный символ
H = Шестнадцатеричный код
00 = Указывает VBA использовать собственный цвет
FF0000 = шестнадцатеричный цветовой код с перевернутым RGB
& = Конечный символ

CMYK

Другой распространенной системой цветового кода является CMYK.Он используется в основном для печати, так как определяет количество чернил C, ян, M, агента, Y, желтого и черного, K, , используемых для перекрытия печатных точек.

Хотя Excel не использует CMYK, это распространенный метод, поэтому я включил его в рамки этого сообщения.

Создавайте точный код VBA за секунды с помощью AutoMacro

AutoMacro — это мощный генератор кода VBA, который поставляется с обширной библиотекой кода и множеством других инструментов и утилит для экономии времени.

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

Пользовательские функции для преобразования цветов

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

ПОМНИТЕ! — Для использования функций VBA код должен быть включен в стандартный модуль кода VBA.

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

Преобразовать из RGB в шестнадцатеричный

Следующая UDF вычисляет шестнадцатеричное значение на основе цветовых кодов RGB.

 Функция GetHexFromRGB (красный как целое, зеленый как целое, синий как целое) как строка

GetHexFromRGB = "#" и VBA.Вправо $ ("00" & VBA.Hex (красный), 2) & _
    VBA.Right $ («00» и VBA.Hex (зеленый), 2) и VBA.Right $ («00» и VBA.Hex (синий), 2)

Конечная функция

Как использовать функцию:

Функция содержит 3 аргумента, значения от 0 до 255 для каждого отдельного значения красного, зеленого или синего.

Преобразование из шестнадцатеричного в RGB

UDF ниже предоставляет значение красного, зеленого или синего цвета на основе шестнадцатеричного цвета.

 Функция GetRGBFromHex (hexColor как строка, RGB как строка) как строка

hexColor = VBA.Заменить (hexColor, "#", "")
hexColor = VBA.Right $ ("000000" & hexColor, 6)

Выбрать регистр RGB

    Дело «Б»
        GetRGBFromHex = VBA.Val ("& H" & VBA.Mid (hexColor, 5, 2))

    Корпус "G"
        GetRGBFromHex = VBA.Val ("& H" & VBA.Mid (hexColor, 3, 2))

    Корпус "R"
        GetRGBFromHex = VBA.Val ("& H" & VBA.Mid (hexColor, 1, 2))

Конец Выбрать

Конечная функция

Как использовать функцию:

Функция содержит 2 аргумента;

шестнадцатеричный код
буква R, G или B для представления возвращаемого цвета

сообщить об этом объявлении Преобразовать из RGB в длинный

Этот UDF предоставляет длинное значение на основе цветовых кодов RGB.

 Функция GetLongFromRGB (красный как целое, зеленый как целое, синий как целое) до длины

GetLongFromRGB = RGB (красный, зеленый, синий)

Конечная функция

Как использовать функцию:

Преобразование из длинного в RGB

Для преобразования из RGB в длинный цветовой код используйте следующий UDF.

 Функция GetRGBFromLong (longColor As Long, RGB как строка) как целое число

Выбрать регистр RGB

    Корпус "R"
        GetRGBFromLong = (longColor Mod 256)

    Корпус "G"
        GetRGBFromLong = (longColor \ 256) Mod 256

    Дело «Б»
        GetRGBFromLong = (longColor \ 65536) Mod 256

Конец Выбрать

Конечная функция

Как использовать функцию:

Функция содержит 2 аргумента;

длинный код
буква R, G или B, в зависимости от того, какой цвет мы хотим вернуть.

Преобразование из длинного в шестнадцатеричное

Следующая UDF предоставляет шестнадцатеричный код на основе длинного цветового кода.

 Функция GetHexFromLong (longColor As Long) As String

Dim R As String
Dim G как струна
Dim B как строка

R = Формат (Application.WorksheetFunction.Dec2Hex (longColor Mod 256), «00»)
G = Формат (Application.WorksheetFunction.Dec2Hex ((longColor \ 256) Mod 256), «00»)
B = Формат (Application.WorksheetFunction.Dec2Hex ((longColor \ 65536) Mod 256), «00»)

GetHexFromLong = "#" & R&G & B

Конечная функция

Как использовать функцию:

Функция имеет только один аргумент — длинный цветовой код.

Преобразовать из шестнадцатеричного в длинный

UDF ниже преобразует шестнадцатеричный код в длинный цветовой код.

 Функция GetLongFromHex (hexColor As String) Как долго

Dim R As String
Dim G как струна
Dim B как строка

hexColor = VBA.Replace (hexColor, "#", "")
hexColor = VBA.Right $ ("000000" & hexColor, 6)

R = левый (hexColor, 2)
G = средний (hexColor, 3, 2)
B = право (hexColor, 2)

GetLongFromHex = Application.WorksheetFunction.Hex2Dec (B & G & R)
Конечная функция

Как использовать функцию:

Функция имеет только один аргумент — шестнадцатеричный код.

Преобразование из RGB в HSL

UDF ниже вернет степень оттенка,% насыщенности или% яркости на основе цветовых кодов RGB.

 Функция GetHSLFromRGB (красный как целое, зеленый как целое, синий как целое, _
    HSL как строка)

Dim RedPct как двойной
Dim GreenPct как двойной
Dim BluePct как двойной
Затемнение MinRGB как двойное
Dim MaxRGB как двойной
Dim H как двойной
Dim S как двойной
Dim L как двойной

RedPct = Красный / 255
GreenPct = зеленый / 255
BluePct = Синий / 255

MinRGB = Приложение.WorksheetFunction.Min (RedPct, GreenPct, BluePct)
MaxRGB = Application.WorksheetFunction.Max (RedPct, GreenPct, BluePct)

L = (MinRGB + MaxRGB) / 2

Если MinRGB = MaxRGB, то
    S = 0
ИначеЕсли L <0,5 Тогда
    S = (MaxRGB - MinRGB) / (MaxRGB + MinRGB)
Еще
    S = (MaxRGB - MinRGB) / (2 - MaxRGB - MinRGB)
Конец, если


Если S = 0, то
    H = 0
ElseIf RedPct> = Application.WorksheetFunction.Max (GreenPct, BluePct) Тогда
    H = (GreenPct - BluePct) / (MaxRGB - MinRGB)
ElseIf GreenPct> = Application.WorksheetFunction.Макс (RedPct, BluePct) Тогда
    H = 2 + (BluePct - RedPct) / (MaxRGB - MinRGB)
Еще
    H = 4 + (RedPct - GreenPct) / (MaxRGB - MinRGB)
Конец, если

H = H * 60

Если H <0, то H = H + 360

Выберите Case HSL

    Дело "H"
        GetHSLFromRGB = H

    Случаи"
        GetHSLFromRGB = S

    Корпус "L"
        GetHSLFromRGB = L

Конец Выбрать

Конечная функция

Как использовать функцию:

Функция содержит 4 аргумента. Значения R, G и B, затем буква H, S или L, в зависимости от значения, возвращаемого функцией.

Расчет для преобразования в HSL основан на вычислении здесь: http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/

Преобразование из HSL в RGB

Следующая UDF вычисляет значения RGB на основе степени оттенка,% насыщенности% яркости

 Функция GetRGBFromHSL (оттенок как двойной, насыщенность как двойной, яркость как двойная, _
    RGB как строка)

Dim R как двойной
Dim G как двойной
Dim B как двойной
Dim temp1 как двойной
Dim temp2 As Double
Dim tempR As Double
Dim tempG как двойной
Dim tempB как двойной

Если насыщенность = 0, то

    R = яркость * 255
    G = яркость * 255
    B = яркость * 255

GoTo ReturnValue

Конец, если

Если яркость <0.5 Тогда
    temp1 = Яркость * (1 + Насыщенность)
Еще
    temp1 = Яркость + Насыщенность - Яркость * Насыщенность
Конец, если

temp2 = 2 * Яркость - temp1

Оттенок = Оттенок / 360

tempR = оттенок + 0,333
tempG = оттенок
tempB = оттенок - 0,333

Если tempR <0, то tempR = tempR + 1
Если tempR> 1, то tempR = tempR - 1
Если tempG <0, то tempG = tempG + 1
Если tempG> 1, то tempG = tempG - 1
Если tempB <0, то tempB = tempB + 1
Если tempB> 1, то tempB = tempB - 1

Если 6 * tempR <1 Тогда
    R = temp2 + (temp1 - temp2) * 6 * темпR
Еще
    Если 2 * tempR <1 Тогда
        R = temp1
    Еще
        Если 3 * tempR <2 Тогда
            R = temp2 + (temp1 - temp2) * (0.666 - темпR) * 6
        Еще
            R = temp2
        Конец, если
    Конец, если
Конец, если

Если 6 * tempG <1 Тогда
    G = temp2 + (temp1 - temp2) * 6 * tempG
Еще
    Если 2 * tempG <1 Тогда
        G = temp1
    Еще
        Если 3 * tempG <2 Тогда
            G = temp2 + (temp1 - temp2) * (0,666 - tempG) * 6
        Еще
            G = temp2
        Конец, если
    Конец, если
Конец, если


Если 6 * tempB <1 Тогда
    B = temp2 + (temp1 - temp2) * 6 * tempB
Еще
    Если 2 * tempB <1 Тогда
        B = temp1
    Еще
        Если 3 * tempB <2 Тогда
            B = temp2 + (temp1 - temp2) * (0.666 - темпB) * 6
        Еще
            B = temp2
        Конец, если
    Конец, если
Конец, если

R = R * 255
G = G * 255
В = В * 255


ReturnValue:
Выбрать регистр RGB

    Корпус "R"
        GetRGBFromHSL = Круглый (R, 0)

    Корпус "G"
        GetRGBFromHSL = Круглый (G, 0)

    Дело «Б»
        GetRGBFromHSL = Раунд (B, 0)

Конец Выбрать

Конечная функция

Как использовать функцию:

Функция содержит 4 аргумента. Степень оттенка, насыщенности% и яркости%, а также буквы R, G или B в зависимости от возвращаемого значения

Расчет для преобразования из HSL основан на вычислении отсюда: http: // www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/

Преобразование из RGB в CMYK

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

 Функция GetCMYKFromRGB (красный как целое, зеленый как целое, синий как целое, _
    CMYK как строка) как двойной

Dim K как двойной
Dim RedPct как двойной
Dim GreenPct как двойной
Dim BluePct как двойной
Dim MaxRGB как двойной

RedPct = Красный / 255
GreenPct = зеленый / 255
BluePct = Синий / 255
MaxRGB = Приложение.WorksheetFunction.Max (RedPct, GreenPct, BluePct)

Если MaxRGB = 0 и CMYK <> "K", то
    GetCMYKFromRGB = 0
    Функция выхода
Конец, если


K = 1 - MaxRGB

Выбрать регистр CMYK

    Корпус "C"
        GetCMYKFromRGB = (1 - RedPct - K) / (1 - K)

    Корпус "М"
        GetCMYKFromRGB = (1 - GreenPct - K) / (1 - K)

    Дело "Y"
        GetCMYKFromRGB = (1 - BluePct - K) / (1 - K)

    Корпус "К"
        GetCMYKFromRGB = K

Конец Выбрать

Конечная функция

Как использовать функцию:

Для функции требуется 4 аргумента.Значения R, G и B, а также буквы C, M, Y или K, в зависимости от возвращаемого значения.

Расчет для преобразования в CMYK основан на расчетах здесь: https://www.easycalculation.com/colorconverter/cmyk-rgb-color-convertor.php

Преобразовать из CMYK в RGB

Чтобы получить процентные значения C, M, Y или K от RGB используют UDF ниже.

 Функция GetRGBFromCMYK (C как двойное, M как двойное, Y как двойное, K как двойное, _
    RGB как строка) как целое число

Выбрать регистр RGB

    Корпус "R"
        GetRGBFromCMYK = 255 * (1 - K) * (1 - C)

    Корпус "G"
        GetRGBFromCMYK = 255 * (1 - K) * (1 - M)

    Дело «Б»
        GetRGBFromCMYK = 255 * (1 - K) * (1 - Y)

Конец Выбрать

Конечная функция

Как использовать функцию:

Для функции требуется 5 аргументов.Процентное содержание голубого, пурпурного, желтого и черного, а также буквы R, G или B, в зависимости от возвращаемого значения.

Расчет для преобразования из CMYK основан на вычислении здесь: https://stackoverflow.com/questions/106/coloring-cells-in-excel-with-cmyk-cell-values

Добавление преобразования цвета -in

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

Загрузите надстройку

Загрузите файл: Надстройка преобразователя цветового кода

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

После установки в меню EOTG появится значок «Конвертер» в группе «Цветовые коды».

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

Заключение

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

Получите нашу БЕСПЛАТНУЮ электронную книгу VBA, которая поможет вам автоматизировать Excel, чтобы вы могли сэкономить время и перестать выполнять работу, которую могла бы делать обезьяна.

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

Не забывайте:

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

Вам нужна помощь в адаптации этого к вашим потребностям?

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

Но, если вы все еще боретесь, вам следует:

Читать другие блоги или смотреть видео на YouTube на ту же тему.Вы получите гораздо больше пользы, открыв свои собственные решения.
Спросите «Excel Ninja» в своем офисе. Удивительно, что знают другие люди.
Задайте вопрос на форуме, например в Mr Excel, или в сообществе ответов Microsoft. Помните, что люди на этих форумах обычно проводят свое время бесплатно. Так что постарайтесь сформулировать свой вопрос, сделайте его ясным и кратким. Составьте список всего, что вы пробовали, и предоставьте снимки экрана, фрагменты кода и примеры рабочих книг.
Воспользуйтесь Excel Rescue, моим партнером-консультантом.Они помогают, предлагая решения небольших проблем с Excel.

Что дальше?
Не уходите, есть еще много чего узнать об Excel Off The Grid. Ознакомьтесь с последними сообщениями:

220 Цветовые коды RGB - Simplicable

Цветовой код RGB - это спецификация цвета с использованием основных цветов: красного, зеленого и синего. Это соответствует цветам, которые могут отображаться с помощью технологии на основе RGB, такой как экран мобильного устройства.Следует отметить, что одни и те же цвета RGB часто отображаются с использованием более короткого кода, известного как шестнадцатеричный. Ниже приведена полезная палитра названных цветов RGB. Бутылка Greenrgb (0,106,78) Dynasty Greenrgb (0,142,128) Флуоресцентная бирюзаgb (0,253,255) Bright Tealrgb (1,249,198) Electron Bluergb (8,129,209) Яркая бирюзаgb (8,232,222) Флуоресцентная Greenrgb (8,255,8) Экзистенциальная зеленая антенна (10,10gb) (18,225,147) Black Raspberryrgb (22,17,13) Blue Charcoalrgb (38,43,47) English Hollyrgb (39,66,52) Antarctic Bluergb (43,63,92) Black Coffeergb (59,48,47) Electric Ultramarinergb (63,0,255) Черный шоколадgb (68,17,0) Послеобеденный Teargb (89,78,64) Boring Greenrgb (99,179,101) Dusty Olivergb (100,99,86) Aquarium Bluergb (102,205,170) Ярко-зеленый rgb (102,255,0) Серый Blueberryrgb (108,128,150) Arctic Duskrgb (115,91,106) Ancient Icergb (115,253,255) Grey Cloudrgb (116,120,128) Apple Greenrgb (118,205,38) Pastel Greenrgb (119,221,119) Green Pearrgb (121,190,88) Electric Bluergb,255,137 (125,249) Umberrgb (138,51,36) Acai Juicergb (148,33,147) Bright Mintrgb (152,255,152) Pastel Tu rquoisergb (153,197,196) Bright Olivergb (156,187,4) Ярко-желтый Greenrgb (157,255,0) Bright Sea Greenrgb (159,226,191) Green Ashrgb (160,218,169) Brown Sugarrgb (161,114,73) Grey Olivergb (161,154,127,17) Earl 176,104,128) Pastel Purplergb (179,158,181) Bright Purplergb (190,3,253) Bright Maroonrgb (195,33,72) Серый Pinkrgb (195,144,155) Alloy Orangergb (196,98,16) Crushed Icergb (196,255,247) Fluorescent Yellow,255,255,255,255,255,254 Greyrgb (207,207,196) Cold Turbulencergb (207,225,239) Горький Limergb (210,219,50) Neon Yellowrgb (207,255,4) Blood Orangergb (209,0,28) Bitter Lemonrgb (207,255,0) Dusty Pinkrgb (213,138,148) Ricergb (218,189,132) Серый Ghostrgb (221,220,218) Pastel Pinkrgb (222,165,164) Paradise Pinkrgb (228,68,94) Pastel Rose Tanrgb (233,209,191) Clear Sandrgb (234,231,218) Burning Tomatorgb (235,21,2004) Almond Cooking (235,80,4008) Almond (238,205,0) измельченный ананасgb (239,204,68) клевер Honeyrgb (240,226,188) Coconut Milkrgb (240,237,229) Marshmallowrgb (240,238,228) Cloud Whitergb (242,242,237) Aragonitergb (243,241,243) Powder Rosergb (245,179,188) Moonlightrgb (246,238,77gb) Moonlightrgb (246,238,713) 70) Coconut Pulprgb (251,249,225) Conch Shellrgb (252,143,155) Butterscotchrgb (253,177,71) Яркий Pinkrgb (254,1177) Флуоресцентный Pinkrgb (254,20,147) Неоновый Fuchsiargb (254,65,100) Dusk Bl4,7r6gb (254,65,100) Dusk Oranger6gb (254,231,21) Faded Yellowrgb (254,255,127) Electric Crimsonrgb (255,0,63) Brutal Pinkrgb (255,0187) Electric Pinkrgb (255,4,144) Bright Magentargb (255,8,232) Искусственная клубникаrgb (255,67,164) Aerospace Orangergb ( 255,79,0) Fiery Rosergb (255,84,112) Флуоресцентный Redrgb (255,85,85) Brave Orangergb (255,99,28) Pastel Redrgb (255,105,97) Bright Mangorgb (255,136,48) Bright Marigoldrgb (255,141, 0) Chrome Yellowrgb (255,167,0) Fluorescent Orangergb (255,207,0) Bright Saffronrgb (255,207,9) Egg Whitergb (255,2 39,193) Абрикос Icergb (255,246,233) Ярко-желтый rgb (255,253,1) Желтый Taxirgb (255,255,51)

Примечания

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

Цветовые палитры

Это полный список статей, которые мы написали о цветовых палитрах.

Если вам понравилась эта страница, добавьте в закладки Simplicable.

Просмотр сведений об авторах и авторских правах или цитировании для этой страницы.

Удивительная наука за цветовыми кодами | Патрик Вудхед | Pilcro

Интересный факт : Джеймс Клерк Максвелл, самый влиятельный физик XIX века, человек, который первым изобрел электромагнетизм, один из трех героев Эйнштейна наряду с Фарадеем и Ньютоном, считается отцом метода аддитивной окраски. Его исследования этой концепции привели к созданию первой цветной фотографии!

Hex

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

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

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

Шестнадцатеричные числа - это еще один способ представления чисел, точно так же, как двоичные и десятичные числа.

Двоичные числа представляют числа, состоящие только из единиц и нулей.

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

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

Например, число семнадцать равно 10001 в двоичном, 17 в десятичном и 11 в шестнадцатеричном.

На картинке выше у нас Mint Green с шестнадцатеричным кодом # 6BBDB9.

На изображении RGB он имеет код RGB (107, 189, 185).Если мы конвертируем эти три десятичных числа в шестнадцатеричные, мы получим (6B, BD, B9), что соответствует шестнадцатеричному коду!

HSL

HSL обозначает H  у.е., S , L ightness. Этот подход к кодированию цветов возник в попытке избежать некоторых неинтуитивных результатов манипулирования цветами в «гамме» RGB. (Палитра - это пространство всех цветов, доступных при использовании такой цветовой схемы, как RGB).

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

Создатели HSL посчитали, что это изменение должно быть возможным, если изменить только один циферблат, а именно яркость.

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

Оттенок: Это , по сути, основной цвет в цветовом спектре. Он принимает в качестве значения градус от 0 до 360 градусов, где красный - 0 (и 360) градусов, зеленый - 120 градусов, а синий - 240 градусов, а остальные цвета подходят между ними.

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

В принципе, насколько красочен цвет?

Яркость: Также дана в процентах, это точно так же, как Яркость, но относительно выбранной точки белого (тогда как Яркость является абсолютной мерой).

Все это звучит довольно технически, и, возможно, лучший способ описать HSL - это изображение.

HSL. Источник: Wikipedia

Теперь давайте посмотрим на форматы печати CMYK и Pantone.

CMYK

CMYK обозначает C yan, M agenta, Y ellow и либо K ey, либо Blac K .

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

Как CMYK вычитает из белого света?
«Голубой - это дополнение красного, то есть голубой служит фильтром, поглощающим красный цвет. Количество голубого, нанесенного на белый лист бумаги, определяет, сколько красного в белом свете будет отражаться от бумаги ». -Wikipedia
Таким же образом, пурпурный и желтый, как дополнения к зеленому и синему соответственно, контролируют количество зеленого и синего света, отраженного от бумаги.
Происхождение K в CMYK оспаривается. Некоторые говорят, что это происходит от последней буквы Blac k , причем последняя буква выбрана вместо первой, потому что B может ввести людей в заблуждение, чтобы они думали, что это B lue. Другие говорят, что это первая буква K ey, как на клавиатуре принтера.
Большая часть печати выполняется в формате CMYK .
Pantone
Pantone - единственный из наших цветовых форматов, который также является компанией!
Pantone предлагает целый ряд цветов печати за пределами гаммы CMYK.
Их цвета часто используются брендами и дизайнерскими агентствами, и они создали собственный бренд, кульминацией которого стало объявление цвета года, выбор одного из цветов, отражающий настроение времени.
Поскольку многие цвета Pantone не входят в гаммы других цветовых форматов, существует ограниченное автоматическое преобразование цветов между Pantone и другими форматами.
Это приводит к тому, что дизайнеры используют дорогие цветные Rolodex Pantone, чтобы гарантировать, что веб-цвета соответствуют цветам печати в их работе с клиентами.
Цветовые коды Pantone начинаются с «PMS», что означает P antone M и S ystem. Затем каждому цвету присваивается номер (например, 7472 для приведенного выше мятно-зеленого), за которым может следовать C или U, что означает C oated и U ncoated.
Если вам понравился этот блог, пожалуйста, хлопните, чтобы поделиться им.
Чтобы сохранить цвета вашей собственной марки во всех этих различных форматах, посетите www.pilcro.com (см. изображение ниже). После того, как вы создали свою палитру, вы можете поделиться ею со своей командой, как если бы вы делитесь документом Google.
Вы также можете хранить множество активов других брендов на своем Pilcro Artboard!
Психология цвета в маркетинге: полное руководство
Психология цвета в маркетинге и брендинге - это больше, чем просто одно предложение объяснения того, что представляет каждый цвет.
Это правда, что определенные цвета могут повлиять на выбор потребителей.Цвет может по-разному влиять на сенсоры эмоций мозга. Он может привлекать внимание, вызывать эмоции, вселять уверенность или вызывать ностальгию.
Но с психологией цвета не все так просто.
Предложение вроде «желтый представляет творчество и счастье» - это не совсем цветовая психология - это обобщенная ассоциация.
На самом деле «желтый» может иметь разные коннотации в зависимости от того, как он используется, с каким цветом находится рядом и какого оттенка желтого.
Желтый не всегда радостен и креативен - иногда он болезненный и бледный.
В качестве примера посмотрите всплывающее окно подписчика Visme ниже:
Изображение всплывающего окна Visme
Желтый цвет очень сильный - он привлекает ваше внимание и заставляет вас чувствовать себя сильнее. Сочетание этого желтого цвета с изображением рыкающего льва производит еще более сильное впечатление.
Чтобы лучше понять, почему использование правильных цветов так важно в контент-маркетинге, лучше сначала ознакомиться с основами.
Психология цвета в маркетинге в первую очередь основана на том, как люди относятся к цвету, и это исходит из того, как они воспринимали цвет в детстве и во время перехода во взрослую жизнь.
Человеческое восприятие цвета
Будучи новорожденными, люди могут видеть только черный, белый и серый цвет. Примерно через пять недель первый из основных цветов, который увидит ребенок, - красный.
Цветовое зрение у них развивается постепенно, примерно до 5 месяцев. Это тот возраст, когда они наконец могут увидеть все цвета. Это так рано, что цвет начинает иметь значение и восприятие.
Красный цвет на раннем этапе ассоциируется с пожарными машинами, точно так же, как желтый цвет ассоциируется с солнцем, а зеленый - с листьями деревьев.Эти ранние цветовые ассоциации составляют основу всего, о чем идет речь в психологии цвета.
Фактически, это первое восприятие цвета присуще каждой культуре. В США розовый ассоциируется с принцессами и балеринами, в то время как в Японии розовый - это цвет цветущей сакуры, который воспринимается немного иначе.
Знание этих тонких различий может помочь вам лучше адаптировать свои маркетинговые усилия, особенно если ваши продукты и услуги являются международными.
Некоторые цветовые восприятия универсальны, например, «эффект белого лабораторного халата».Этот цветовой эффект объясняет, почему большинство людей чувствуют себя в безопасности и лучше заботятся о них, когда врач носит белый лабораторный халат.
Еще один пример восприятия цвета, заслуживающий упоминания - это логотип Coca-Cola, который узнает большинство населения мира.
Источник изображения
Логотип Coca-Cola белый поверх красного - крышки от бутылок красные, мерчандайзинг красный, и даже грузовики красные. Люди знают, что красный - это цвет кока-колы.
Подобные вещи в конечном итоге формируют в сознании людей восприятие цвета.Поскольку они выросли, видя бренд Coca-Cola вокруг себя, они всегда будут узнавать в нем что-то, что является частью жизни.
Когда они едят определенную еду, они мгновенно ищут красный холодильник в ресторане, чтобы попросить кока-колу. Красные торговые автоматы в общественных местах всегда будут замечены быстро, и их будет не хватать, если их не будет.
Если бы логотип Coca-Cola однажды стал желтым, это сбило бы с толку множество людей.
Красный цвет логотипа Coca-Cola - это суть лояльности к бренду, а это и есть суть цветовой психологии в маркетинге.Он глубоко проникает в человеческое поведение и то, как мы взаимодействуем с нашим восприятием цвета.
Прежде чем мы углубимся в значения и восприятие цвета, давайте взглянем на суть того, как работает цвет.
Понимание теории цвета
Теория цвета - это технический язык, на котором объясняется принцип работы цвета.
Это искусство и наука о том, как разные цвета смешиваются и сочетаются друг с другом, чтобы выглядеть привлекательно и передавать сообщения.
Основным визуальным инструментом для понимания теории цвета является цветовое колесо, которое долгое время являлось практическим образовательным инструментом для изучения и открытия цветов.
К сожалению, он предшествует современным технологиям и может сбивать с толку при попытке понять разницу между цветами на экранах и чернилами в профессиональных печатных машинах.
Художественный цветовой круг, который начинается с основных цветов, красного, синего и желтого, создается с помощью пигментов, красок, чернил или натуральных красителей.
Так до сих пор делают в школах темперой или пальчиковыми красками. Художники и иллюстраторы также изучают теорию цвета с помощью этого цветового круга на ранних этапах учебы.
Цифровые дизайнеры и художники изучают две дополнительные цветовые модели, чтобы работать с экранами и отправлять контент на печать: CMYK и RGB.
Цветовая модель для печатных материалов называется CMYK
.
Цветовая модель цифрового материала называется RGB
.
Цветовая модель CMYK
CMYK означает голубой, пурпурный, желтый и ключевой (черный).
Цветовая модель CMYK визуализирует смешивание цветов с пигментами.К ним относятся чернила, используемые для печати любых рекламных материалов, таких как флаеры, брошюры, мерчендайзинг, футболки, журналы и т. Д.
Способ создания цвета с помощью модели CMYK называется субтрактивным, потому что длины световых волн вычитаются при смешении цветов.
Когда голубой, пурпурный и желтый смешиваются вместе, получается очень темный цвет, также известный как несовершенный черный. Вот почему цветовая модель называется CMYK - K означает «ключ», или черный.
Цветовая модель RGB
RGB означает красный, зеленый и синий.
Цветовое колесо RGB визуализирует перекрытие цветов на экранах. Основные цвета в RGB - это не пигменты, а цветной свет.
Когда цветные огни перекрываются с разной интенсивностью, они образуют все остальные цвета. Это цветовое пространство, которое дизайнеры используют для всего цифрового дизайна, включая веб-сайты, целевые страницы, визуальные эффекты социальных сетей и многое другое.
Способ создания цвета в модели RGB называется аддитивным. Это означает, что цвет не накладывается на другой для создания нового цвета.
Модель RGB начинается с черного, и цвета появляются, когда свет попадает на нее. Когда все три цветных индикатора перекрываются, мы видим «аддитивный» белый цвет.
Когда дизайнер создает контент для печати, он переключается на цветовое пространство CMYK. При работе с цифровым контентом они используют RGB.
Когда для обоих используется одно и то же содержимое, дизайнеры начинают с RGB, а затем переключаются на CMYK перед отправкой файлов на принтеры. Иногда необходимо внести коррективы в цвет, чтобы обеспечить единообразие во всех средах.
Основные цвета в искусстве, CMYK и RGB
Основные цвета - это цвета, которые нельзя создать путем смешивания двух других цветов. Фактически, они составляют основу всех остальных цветов.
В классическом цветовом круге три основных цвета - красный, желтый и синий.
Теперь вам может быть интересно, почему это не относится к моделям CMYK и RGB. Это связано с тем, как человеческий глаз видит цвет.
В конце 17 века Исаак Ньютон в своем эксперименте с призмой обнаружил, что цвет исходит от света.
Его интерпретация радуги - красного, оранжевого, желтого, зеленого, синего и фиолетового - была первым визуальным инструментом для ученых, который помог понять цвет.
С развитием цифровых экранов и современной печати цветовой спектр изменился, чтобы приспособиться к тому, как мы используем свет и чернила для создания цвета.
Цветные круги Буте из 1708
Цветовая модель CMYK была представлена в начале 20 века компанией Eagle Printing Ink Company.
После тестирования различных пигментов они пришли к выводу, что лучшими тремя цветами для получения наибольшего количества цветов были голубой, пурпурный и желтый.
Цветовая модель RGB иногда сбивает с толку, потому что основными цветами являются красный, зеленый и синий вместо красного, желтого и синего.
Это потому, что модель RGB сделана из цветного света. Когда красный и зеленый свет светятся вместе, они дают желтый свет. Вот почему желтый не может быть одним из основных цветов в модели RGB.
Цветовая модель RGB была внедрена в экраны цветных телевизоров. Если вы достаточно взрослые, вы, вероятно, помните, что, когда вы очень внимательно смотрели на экран телевизора, вы могли видеть красный, зеленый и синий прямоугольники.
Что происходит при сочетании цветов?
С точки зрения психологии цвета в маркетинге, знание того, как цвета сочетаются и излучают различные настроения и чувства, поможет вам добиться лучших результатов.
В этом разделе мы рассмотрим основные цветовые комбинации, цветовые гармонии и то, как сгруппировать цвета удобным способом.
Есть две основные цветовые комбинации: вторичная и третичная.
Дополнительные цвета
Вторичные цвета создаются путем смешивания двух основных цветов.В цветовом круге они визуализируются между основными цветами.
Третичные цвета
Третичные цвета - это шесть цветов, созданных из смеси одного основного и одного вторичного цветов. Они применимы только к цветам, которые находятся рядом друг с другом в цветовом круге.
Цветовое колесо / Палитра цветов
Все первичные, вторичные и третичные цвета завершают цветовое колесо.
Обратите внимание на визуализацию цветового круга ниже, как цвета разделены на секции слева.Эти нюансы составляют бесконечную гамму возможных цветов.
Справа - снимок экрана палитры цветов на панели инструментов Visme. Вы видите сходство и различие между ними?
Давайте подробнее рассмотрим, как настроено цветовое колесо и как оно преобразуется в палитру цветов на панели инструментов Visme.
Нюансы цвета
Обратите внимание на цветовые круги ниже. На первый взгляд мы замечаем первичный, вторичный и третичный цвета.Затем мы замечаем, что центр колеса слева белый, а справа черный.
Это потому, что цветовое колесо слева визуализирует цветовые оттенки, а колесо справа - цветовые оттенки. Давайте посмотрим, чем они отличаются и почему они важны для психологии цвета в маркетинге.
Чистый цвет / оттенок
У обоих этих цветовых кругов общие цвета - это чистые цвета.
Чистый цвет - это любой из основных, вторичных или третичных цветов без добавления белого, серого или черного.Они расположены на внешних краях колес и палитры цветов. Чистые цвета еще называют оттенками.
Чистые цвета / оттенки могут изменяться в зависимости от значения и насыщенности.
оттенков
Когда белый цвет добавляется к любому чистому цвету, он становится оттенком. Их обычно называют пастельными цветами, они мягче и бледнее чистых цветов. Оттенок может быть настолько светлым, что почти напоминает белый цвет.
оттенков
Когда к любому чистому цвету добавляется черный, он становится оттенком.Эта техника используется для создания более темной или приглушенной версии любого цвета.
тонов
Еще одна возможная настройка цвета - добавление серого (смесь черного и белого) к любому чистому цвету. Это позволяет создавать миллионы разных цветов.
Тона редко используются в большинстве цифровых палитр цветов, за исключением профессиональных программ, таких как программы дизайна Adobe.
Насыщенность
Очень важным термином для понимания нюансов цифрового цвета является насыщенность, которая определяет яркость или тусклость любого цвета.
Чистый цвет всегда с нормальной насыщенностью. Он может быть ненасыщенным белым, серым или черным, чтобы сделать его более тусклым.
В цифровых программах цвета также могут быть перенасыщенными. Избыточная насыщенность приводит к исчезновению деталей и обычно не дает большого эффекта.
Использование насыщенности цвета на разных уровнях - вот что такое сочетание цветов. Например, некоторые насыщенности синего хорошо смотрятся с чистым желтым, а другие могут визуально противоречить.
Почему эти нюансы важны в визуальном маркетинге?
Цветовые нюансы присутствуют в цветовой палитре каждого бренда.Именно эти нюансы придают вашей цветовой палитре определенное ощущение или эмоцию.
В маркетинге это важно, потому что правильная цветовая схема может помочь рассказать вашу историю положительно, а неправильная - отвлечь от нее.
Например, бренд с насыщенной, яркой цветовой схемой и в основном чистыми цветами, скорее всего, будет посылать сообщение о живости, молодости или срочности.
Хорошим примером использования насыщенных цветов для отправки сообщения является целевая страница с инфографикой для одного из продуктов Atlassian, Confluence.
Atlassian - один из пионеров в использовании сложных систем дизайна, в которых цветовые палитры играют большую роль.
В инфографике ниже дизайнеры Atlassian использовали наиболее насыщенные цвета во вторичной палитре.
Инфрография от Atlassian
Когда вы нажимаете CTA, цвета возвращаются к своему нейтральному синему. Насыщенные версии использовались только для этой конкретной инфографики.
Почему? Конечно, чтобы привлечь ваше внимание!
Как работать с цветовыми нюансами в редакторе Visme
В редакторе Visme есть несколько способов управления цветовыми нюансами в вашей визуальной графике.Для таких элементов, как шрифты, формы, линии, значки и иллюстрации, используйте палитру цветов.
В круге выбора цвета чистые цвета лежат на внешних краях. При движении внутрь они обесцвечиваются белым. Справа от круга выбранный цвет можно затемнить серым и черным.
В редакторе
Visme также есть несколько предустановленных цветовых тем, созданных профессиональными дизайнерами и отлично себя зарекомендовавших. Когда вы выбираете цветовую тему, весь ваш проект автоматически настраивается на эти цвета.
Для редактирования загруженных фотографий или иллюстраций используйте вкладку фильтра. С помощью этого инструмента вы можете настроить ряд цветов:
Добавить фотофильтр с предустановленными настройками цвета
Добавить цветную накладку
Регулировка яркости
Регулировка контрастности
Насыщение или обесцвечивание
Изменить оттенок
Изменить непрозрачность
Если вы часто создаете визуальный контент, рекомендуется начать сохранять используемые цветовые палитры.
Это может помочь вам провести сплит-тестирование различных кампаний, чтобы увидеть, какие из них принесут вам наилучшие результаты. Когда вы найдете наиболее эффективные цвета, вы сможете добавить их в руководство по стилю бренда или в систему дизайна для дальнейшего использования.
Использование цветных чисел
Цифровые цвета названы в системе HEX. Каждый цвет, тон и оттенок на цветовом круге имеет собственное шестнадцатеричное число.
Когда вы найдете цветовую палитру, которая вам нравится, вы можете просто скопировать шестнадцатеричные числа и вставить их в палитру цветов вашего редактора.
Шестнадцатеричный код состоит из трех частей. Первые два числа представляют красный цвет, следующие два - зеленый цвет, а последние два - синий цвет.
Например, #FFFFFF - это число для белого, потому что это все цвета вместе (полный цвет). Шестнадцатеричное число # 000000 предназначено для черного, потому что у него вообще нет цвета.
Вот шестнадцатеричные числа для красного, зеленого и синего:
Красный = # FF0000
Зеленый = # 00FF00
Синий = # 0000FF
Гармония цветов
Теперь, когда вы знаете основы различных цветовых кругов, как цвета сочетаются друг с другом в пигменте и свете, а также о важности цветовых нюансов, пришло время взглянуть на цветовые гармонии.
Цветовая гармония - это теория о том, как разные цвета работают вместе, образуя цветовую схему, приятную для глаз. Все цветовые гармонии могут иметь множество различных вариаций тона и оттенка, поэтому возможности безграничны!
Вот все типы цветовых гармоний:
теплый
Холодный
Дополнительная
Аналог
Монохромный
Триадический
Раздельно-комплементарная
Тетрадик
Квадрат
Теплые и холодные цвета
Для визуализации групп теплых и холодных цветов цветовое колесо разделено прямой линией, проходящей через центр.Теплые цвета - желтый, оранжевый и красный, а холодные - синий, зеленый и фиолетовый.
Психология теплых и холодных цветов заключается в том, что они представляют и как мы себя чувствуем.
Какие эмоции или мысли олицетворяют теплые цвета? На ум приходят летние дни, закаты, огонь и жара. А как насчет холодных цветов? Обычно они изображают лед, природу, воду и чистое небо.
Лучший способ понять, как теплые и холодные цвета психологически влияют на наши эмоции, - это визуализировать цвета, используемые в дизайне интерьера.
Комната, в которой преобладают теплые тона, будет более уютной, привлекательной и комфортной. Это также сделает комнату меньше, чем она есть на самом деле.
С другой стороны, комната, оформленная в прохладных тонах, будет казаться больше, свежее и даже чище. Большинство больниц окрашены в прохладные зелено-синие цвета, чтобы передать ощущение чистоты и контроля.
При создании цветовой гармонии теплые и холодные цвета сочетаются с разной интенсивностью, чтобы передать определенные чувства или эмоции.
Сделай это Pop
Сочетание теплых и холодных цветов, а также различных оттенков и тонов придает некоторым цветам большее значение, а другие используются в качестве дополнений.
Например, комната, окрашенная в холодный серый цвет с голубой мебелью, будет значительно улучшена с помощью оранжевых подушек и некоторых красных или желтых деталей, которые сделают ее яркой. То же самое относится к комнате с темно-красными стенами и коричневой кожаной мебелью; несколько ярких зеленых растений объединят все это.
Вы также можете применить эти методы в своей стратегии визуального маркетинга.Например, если большинство цветов на вашей целевой странице прохладные, вы можете использовать теплый призыв к действию, чтобы он выделялся.
Дополнительные цвета
Дополнительные цвета прямо противоположны друг другу в цветовом круге.
Вот еще несколько примеров дополнительных цветов:
Красный и зеленый
Синий и оранжевый
Желто-фиолетовый
Чтобы задействовать психологию цвета в маркетинге с помощью дополнительных цветов, нужно отрегулировать количество каждого цвета.
Общее практическое правило - использовать около 80% одного цвета и 20% другого. Если баланс 50/50, визуальный шок будет слишком сильным, и ваша графика будет трудно рассмотреть.
Дополнительные цвета - это обычно один теплый цвет и один холодный цвет. Хорошо сбалансированная цветовая гармония с дополнительными цветами может быть привлекательной и интересной для просмотра.
Аналогичные цвета
Аналогичные цвета - это те, которые находятся рядом друг с другом на цветовом круге.Например, синий, сине-зеленый и зелено-синий. Эти цвета часто можно использовать сами по себе, создавая спокойный и цельный дизайн.
Если задуматься, аналогичные цвета напоминают то, как цвет появляется в природе, например, листья, лепестки цветов и градиентные цвета в небе.
Аналогичная цветовая гамма обычно успокаивает и сдерживает. Хорошая идея использовать аналогичную палитру, когда ваша визуальная графика должна передавать чувство знания, но не слишком много волнения.
Дайте одному из трех цветов доминировать, а два других используйте в качестве акцентов. Убедитесь, что между каждым цветом достаточно визуальной разницы, чтобы они не смешивались и не конкурировали друг с другом.
Монохромные цвета
Монохромная цветовая гармония складывается из различных оттенков и оттенков одного оттенка. Используя баланс оттенков и оттенков одного цвета, можно создать действительно интересную композицию из светлых и темных участков.
Это может быть не лучший выбор для маркетинговой графики, потому что общее ощущение монохроматической палитры глубокое и нюансированное.Создать контраст с помощью монохромной цветовой схемы сложно даже художникам.
Триадические цвета
Триадная цветовая палитра состоит из трех цветов, которые одинаково удалены друг от друга в цветовом круге. Если соединить выбранные цвета линиями, получится равносторонний треугольник.
Триадная цветовая схема включает либо два теплых цвета и один холодный, либо два холодных цвета и один теплый.
Такая цветовая гармония может легко выглядеть подавляющей и визуально нечеткой.Например, при выборе триадной схемы третичных цветов все может стать мутным, если оттенки будут слишком темными.
Однако триада вторичных цветов будет выглядеть более нейтрально, а триада основных цветов создаст яркую и живую цветовую схему.
Триадная цветовая схема, которую вы должны выбрать, зависит от вашей цели.
Для цифровой графики третичное и вторичное триады не подходят. Они слишком мрачные и угрюмые и больше подходят для художников.Придерживайтесь основных триад разных оттенков и оттенков.
Раздельный дополнительный
Еще одна цветовая схема с тремя цветами - это разделенная дополнительная цветовая гармония. Это похоже на сочетание дополнительных цветов, но цвета не совсем противоположны друг другу.
В этой гармонии есть один цвет с одной стороны и два цвета прямо поперек него с каждой стороны дополнительного.
Если один цвет красный, два других будут желто-зеленым и сине-зеленым.Если один цвет сине-фиолетовый, два других будут желтым и оранжевым.
Разделенные дополнительные цветовые схемы обычно очень приятны. Когда вы следуете правилу 80/20 с доминирующим цветом, конечный результат может быть великолепно выглядящей графикой.
Для большей глубины добавьте более светлый вариант одного из двух акцентных цветов.
Тетрадик Цвет
Тетрадические цветовые гармонии состоят из двух пар дополнительных цветов, таких как красный-зеленый и сине-оранжевый.
Как правило, их довольно сложно сбалансировать - использование четырех цветов вместе часто может сделать вашу графику перенасыщенной.
Но когда тетрадная цветовая схема хорошо сбалансирована с оттенками, тонами и оттенками, она может выглядеть действительно привлекательно.
С точки зрения маркетинга, эта цветовая гармония требует тщательного тестирования, чтобы выяснить, что работает с конкретным брендом и его аудиторией.
Будьте осторожны - просто перебор одного цвета или другого, и настроение изображения может измениться в целом.
Квадратные цвета
Квадратные цветовые гармонии используют четыре цвета, которые равноудалены друг от друга в цветовом круге, образуя квадрат при соединении.
Подобно тетрадной гармонии, квадратная цветовая схема также может быть визуально мощной и временами подавляющей.
Очень важно следовать правилу 80/20 в отношении доминирующих и акцентных цветов. Обе эти цветовые гармонии также хорошо работают в градиентном дизайне.
Создание сбалансированной цветовой схемы
Помните, что для каждой цветовой схемы всегда должно быть немного черного и белого, чтобы сбалансировать ее.
Например, текст на вашем веб-сайте должен быть черным или темно-серым, а фон должен быть белым или очень светлого тона.
Это сочетание темного текста на светлом фоне неспроста является отраслевым стандартом. Он создает хороший контраст, что делает ваш контент визуально привлекательным и легким для чтения.
Узнайте больше о том, как цвет может повлиять на конверсию веб-сайтов.
Значения цвета и символика
Теперь, когда вы знаете, как выглядит цветовое колесо и как создаются гармонии, давайте рассмотрим каждый цвет и его значение.
Когда мы говорим о психологии цвета в маркетинге, конкретное название цвета так же важно, как и его визуальные характеристики.
Например, когда мы говорим «желтый», большинство людей будет думать о желтом солнце или желтке яичного желтка. Но если мы включим его и скажем «ярко-желтый», мы можем подумать о детской игрушке или желтом маркере.
С «неоново-желтым» мы, вероятно, представим маркеры и светящиеся палочки, в то время как «желтуха» заставляет нас мгновенно визуализировать желтоватого, болезненного человека.
И давайте не будем забывать о более «художественных» названиях желтого; горчица, масло, нарцисс, банан, шмель и другие. Дело в том, что каждое название цвета излучает определенное ощущение и индивидуальность.
Вот небольшая инфографика, которая поможет вам познакомиться с различными названиями цветов и их соответствующими шестнадцатеричными кодами:
Каждый цвет имеет положительные и отрицательные коннотации, в зависимости от конкретного тона, оттенка или оттенка, который вы используете.
Если вы собираетесь делиться индивидуальностью своего бренда и визуальными эффектами со своими клиентами, вам нужно быть очень осторожным в выборе правильных цветов.
Давайте более подробно рассмотрим каждый цвет в отдельности:
Желтый
Желтый - это цвет свежих подсолнухов и резиновых уток, и вообще один из «счастливых» цветов в цветовой психологии.
Обычно ассоциируется с творчеством, оптимизмом и живостью. Использование желтого цвета в вашей стратегии визуального маркетинга может придать вашему бренду ощущение игривости и яркости.
Если желтый цвет доминирует и яркий, он вызывает ощущение неожиданности и приглашает пользователей узнать больше.Вы можете дополнить его нежными фиалками в дополнительной схеме, чтобы добавить более царственный оттенок.
Известные примеры желтого брендинга включают арки McDonald’s и прямоугольник National Geographic. Оба они манящие и приятные.
Тональность желтого, используемого в вашей визуальной графике, действительно важна. В отличие от того, как один и тот же оттенок красного может символизировать как силу, так и опасность, оттенки желтого обычно зависят от яркости оттенка.
Красный
Красный - первый цвет, который люди видят в младенчестве.Он мощный, сильный и буквально бросается в глаза. Это также цвет пожарных машин, знаков остановки и флагов около 150 различных стран.
На протяжении всей истории красный цвет всегда был важным цветом, символизируя силу, важность, защиту и выносливость. Неудивительно, что многие кнопки призыва к действию на веб-сайтах и в приложениях обычно красные.
Красные схемы брендинга имеют тенденцию быть бодрящими, яркими и знаковыми. Возьмем, к примеру, логотипы YouTube, Target и Coca-Cola.
Красный - запоминающийся и запоминающийся.Если вы хотите использовать красный цвет не только для кнопок с призывом к действию, убедитесь, что ваше сообщение соответствует визуальным эффектам.
Иногда один и тот же тон может излучать как положительные, так и отрицательные цветовые значения. Например, ярко-красный цвет может символизировать как силу, так и опасность.
Если вы хотите придать своему красному цвету положительный оттенок, используйте положительные слова, связанные с ним. В своем контент-маркетинге используйте мощные описательные слова, которые передают положительное сообщение.
С другой стороны, если вы используете красный цвет как символ «опасности», убедитесь, что используете универсально узнаваемые знаки, такие как красный символ «НЕ».
Добавление белого или желтого к красному цвету может сделать его мягким и веселым. Точно так же добавление черного к красному может сделать его угрюмым и глубоким.
Синий
Синий цвет несет в себе широкий спектр эмоций.
Голубое небо символизирует свежесть и воздушность, глубокий и темно-синий символизирует лидерство и знания, а более легкий синий ассоциируется с младенцами и детскими игрушками.
Синий был важным цветом на протяжении всей истории и в изобразительном искусстве.На большинстве религиозных картин одеяния Марии синие.
Обратите внимание, как синий широко используется на большинстве корпоративных и технологических веб-сайтов. Это потому, что он может символизировать доверие, надежность и интеллект.
Большинство организаций, связанных со здравоохранением, таких как страховые компании и больницы, используют синий цвет в более мягких тонах. Синий также является цветом, который в основном предпочитают как мужчины, так и женщины.
оранжевый
Игривый и яркий оранжевый цвет вдохновляет на движение и радость.
Оранжевый - сочетание красного и желтого - одновременно манящее и креативное. Это тот цвет, который действительно выделяется и может быть объединяющим фактором во многих различных цветовых схемах.
При использовании оранжевого цвета в визуальной графике лучше всего использовать яркий оранжевый для областей, требующих внимания.
С другой стороны, если вы разрабатываете рекламу о помощи людям на улицах, более темно-оранжевый оттенок на фоновой фотографии придаст изображению именно ту теплую атмосферу, которая вам нужна.
зеленый
Зеленый - цвет природы; трава, деревья и все растения между ними. Он излучает чувство равновесия, гармонии и бодрости.
Зеленый почти всегда ассоциируется с натуральными и экологически чистыми продуктами и услугами. Настолько, что, если у вас есть компания такого типа и вы не используете зеленый цвет, ее нельзя сразу распознать.
Это психология цвета в маркетинге на пике - общее восприятие цвета, подобного зеленому, почти создает универсальное правило того, когда его использовать.
фиолетовый
Фиолетовый или пурпурный издавна считался царственным цветом. Он исторически богат миром религии и власти.
Кроме того, фиолетовый обычно является «красивым» цветом в большинстве своих оттенков и тонов. Это любимый цвет большинства женщин-потребителей, излучающий чувство правдивости, благополучия и целостного обновления.
Используйте фиолетовый или фиолетовый в своих маркетинговых визуальных эффектах экономно, если ваше сообщение не является целостным и относительно духовным.
Женские товары и веб-сайты иногда используют светлый оттенок фиолетового для фона и акцентов.
розовый
Нет цвета лучше розового.
Он универсален, позитивен и радует людей.
Цвет сахарной ваты и маленьких девочек в балетных пачках. Это цвет жевательной резинки и современной прически.
Розовый цвет часто используется в товарах, предназначенных для молодых женщин.
Но даже несмотря на то, что розовый, как правило, женственный цвет, он также подходит для нейтральных в гендерном отношении товаров.
Все зависит от вашей аудитории - столярный инструмент розового цвета будет сложно продать, но для спортивной одежды он подойдет!
Белый
Белый - это цвет, который мы обычно используем для бумаги и свадебных платьев. Цвет снега, облаков и лабораторных халатов врачей.
Белый является неотъемлемой частью большинства цветовых схем - он может работать как дополнение, акцент или фон. Фактически, изображение без белого цвета - чистое или смешанное - может шокировать и подавлять.
Белый можно использовать как чистый белый, но он также может иметь совсем немного другого цвета, чтобы придать ему легкий оттенок.
Эти тонкие белые цвета чрезвычайно универсальны в визуальном маркетинге. Они помогают создать «белое пространство», которое не обязательно белое. Они также отлично работают в качестве текста на более темном фоне, но при этом не будут полностью белыми.
Черный
Черный цвет элегантен и утончен.
Блестящий черный цвет излучает роскошь и утонченность.Черный фон с яркими цветами переднего плана создает впечатление хорошего, чистого веселья и удивления.
Для многих модных товаров используется черная упаковка или визуальные эффекты с черным центром. Подумайте об упаковке для макияжа, смартфонах и других товарах черного цвета, которые визуально возвышают вас.
Коричневый
Подобно зеленому, коричневый цвет символизирует природу и идеально подходит для натуральных продуктов.
Коричневый подобен вспомогательному цвету, который придает эффект укоренения другим цветам и создает атмосферу.Также легко ошибиться, но хорошо смотрится в светлых тонах в сочетании с яркими цветами.
Натуральная коричневая бумага очень распространена для органических, экологически чистых продуктов.
Тип коричневой бумаги, выбранной для этих дизайнов, очень важен - он должен выглядеть естественно и стильно.
Если это переработанная бумага, она должна выглядеть чистой, а не грязной.
Металлик - золото, серебро, бронза
Металлик - это цветовая гамма, напоминающая золото, серебро и бронзу.
Технически это цветные пигменты с добавлением металлического порошка.
В цифровой форме металлический цвет достигается с помощью градиентов и световых эффектов, имитирующих металлический вид. В своей основной форме золото - это желтый цвет, серебро - серый, а бронза - розовато-желтый.
Использование металлических цветов в визуальных эффектах сильно отличается на экране и в печати.
Если вы хотите, чтобы металлы наносились на печать, поговорите с типографами об их возможностях и попросите доказательства, чтобы увидеть, как это будет выглядеть, прежде чем принимать решение.
Если вам интересно узнать больше об истории цветовой символики, я предлагаю вам прочитать книгу Эллен Конрой «Символизм цвета». Он был написан в 1921 году, но до сих пор актуален и полон богатых знаний о цветах.
Значения цвета в поведенческой психологии
По мере того, как люди растут и взаимодействуют со своим окружением, они начинают создавать индивидуальное восприятие каждого цвета.
Например, человек, выросший в счастливой семье в доме с синей дверью, всегда будет ассоциировать этот синий цвет со счастьем и удовлетворением.
С другой стороны, если ребенок растет с жестоким родителем, который на работе носил синюю униформу, и ребенок видел этот синий цвет каждый раз, когда с ним оскорбляли, он всегда будет связывать этот синий цвет с болью и обидой.
Вот почему цвет так относителен, когда дело доходит до разработки визуальных материалов для маркетинговых стратегий. Но вы не можете знать восприятие цвета для каждого человека в мире!
Что вы можете сделать, так это изучить личность своей аудитории до уровня, на котором вы знаете, какие цвета они обычно предпочитают.Эти знания в сочетании с отраслевыми стандартами для вашей ниши позволят вам лучше понять, какой должна быть ваша цветовая схема.
A / B-тестирование различных цветовых схем также является отличной тактикой, чтобы увидеть, что действительно работает для ваших идеальных пользователей и клиентов.
Принципы дизайна для использования цвета
Помимо общего правила 80/20 для доминирующих и акцентных цветов в цветовой гармонии, существует группа дизайнерских принципов, известных как принципы гештальта, которые помогут вам понять, как лучше всего использовать цвет в вашей маркетинговой графике.
Принципы гештальта
Гештальт-принципы - это список правил дизайна, которые помогают визуализировать, как различные элементы взаимодействуют друг с другом в композиции.
Эти принципы применимы не только к цвету, но и практически ко всему, что вы можете включить в визуальную графику. Принципы гештальт-дизайна:
Простота: люди визуально интерпретируют сложные изображения в их простейшей возможной форме.
Сходство: похожие объекты будут казаться сгруппированными или похожими на принадлежность друг другу.
Близость: объекты, расположенные близко друг к другу, будут казаться связанными друг с другом.
Замыкание: Мозги склонны восполнять недостающую информацию и игнорировать пробелы.
Фигура и фон: Мозг склонен воспринимать объекты как находящиеся на переднем или заднем плане.
Непрерывность: люди воспринимают линии как непрерывное движение.
Порядок и симметрия: симметричные и сбалансированные объекты кажутся цельными и завершенными.
Синхронность: мозг воспринимает элементы, которые выглядят так, как будто они движутся в одном направлении, как связанные друг с другом.
Дальтонизм в визуальном дизайне
Около 8% мужчин и 0,5% женщин в мире страдают дальтонизмом.
Создавая маркетинговую визуализацию для своего бренда, не забывайте о клиентах, страдающих дальтонизмом. Это особенно важно, если вы используете цвет для передачи определенного чувства или эмоционального сообщения.
Например, большинство дальтоников не видят красный цвет. Если вы используете красный цвет для передачи опасности или предупреждения, подумайте о добавлении контекстной подсказки, например формулировок или фигур, чтобы выделить сообщение.
Дальтоники не могут видеть некоторые цвета, но могут различать насыщенность и оттенок цвета. Это влияет на то, как вы комбинируете свои маркетинговые цвета при рассмотрении дальтонизма.
Например, в дополнительной красно-зеленой цветовой палитре им будет трудно увидеть, полностью ли насыщены оба цвета. Если один из цветов более светлый, дальтоникам будет легче различать эти два цвета.
Другой способ - добавить текстуру к цвету, если он слишком похож на цвет рядом с ним.Это особенно важно при создании диаграмм и гистограмм.
Вам также следует проектировать кнопки CTA с учетом дальтоников.
Большинство кнопок CTA имеют эффект наведения. Если этот эффект действительно тонкий, дальтоник может его вообще не заметить. Попробуйте использовать совершенно другой тон или оттенок цвета и добавить границу к наведению.
Источник изображения
Культура и гендер в психологии цвета
Ранее мы упоминали, что розовый цвет представляет разные вещи в США и Японии.То же самое касается почти всех цветов в разных культурах.
Маркетологи должны учитывать эти различия при создании визуальных элементов, чтобы убедиться, что они оказывают желаемое влияние на свою аудиторию.
Например, во всем мире красный цвет воспринимается как опасность или страсть. Но в Китае и во многих странах Азии красный - счастливый цвет, связанный с удачей и деньгами.
Точно так же, как культура, пол также имеет большое влияние на значения цвета.
Мужчины и женщины часто предпочитают разные цвета и сочетания.Некоторые цвета связаны с женщинами, а другие - с мужчинами.
Некоторые цвета можно считать нейтральными в гендерном отношении и могут повлиять на любого потребителя. Подробно о выборе цвета, отличном от пола, читайте здесь.
Дополнительные ресурсы по психологии цвета в маркетинге
Цветовые ассоциации носят как личный, так и культурный характер. Существует множество исследований о том, как люди воспринимают и ассоциируют цвет.
Одно исследование Фабер Биррен, «Психология цвета и цветотерапия», посвящено тому, как люди связывают разные чувства и мысли с цветами.Это стоит прочитать, если вам действительно интересно, как цвет влияет на человеческие эмоции и выбор.
Кроме того, если вы ищете действительно углубленный курс о том, как общаться о цвете со своими коллегами и клиентами, у Team W есть отличный ресурс о терминологии цвета для профессионалов UX.
В Центре визуального обучения Visme есть еще одна статья о восприятии цвета и его влиянии на нашу индивидуальную реальность.
Создание красивой маркетинговой графики в Visme
Знаете ли вы, что Visme позволяет создавать привлекательную инфографику, изображения в социальных сетях и многое другое за считанные минуты?
Если вы не уверены, какую цветовую схему выбрать для вашей маркетинговой графики, Visme позволяет вам выбирать из множества заранее разработанных цветовых палитр.
Вы также можете загрузить свою собственную цветовую палитру бренда и сразу же приступить к созданию великолепных визуальных эффектов с помощью редактора перетаскивания, даже если у вас нет опыта проектирования.
Нажмите здесь, чтобы зарегистрироваться и начать бесплатно!
Вы нашли эту статью полезной? Мы хотели бы знать! Не стесняйтесь делиться своими вопросами и отзывами в разделе комментариев.
Таблица цветов краски Behr желтый
Behr's Calm Air - теплый естественный оттенок, который может усилить этот эффект; Кроме того, он создает красивый переход от открытого пространства к интерьеру, - говорит Эрика Вельфель, эксперт по цвету и дизайну в Behr.На фотографии: окраска стен, дверей, отделки и потолка в один теплый нейтральный цвет, например, «Calm Air» от Behr, создает ощущение простора. Jiang ziya netflix
Таблица цветов краски - Краска Behr. Behr.com {{«Цвета, которые вы видите на Behr.com, могут не совпадать с цветами, которые вы в конечном итоге рисуете на своей поверхности». | translate}} {{'Чтобы получить истинное представление цвета, всегда начинайте свой проект с использования образца цвета Behr, чтобы подтвердить цвет в вашем доме.' | translate}} * {{'Однослойная шкура гарантирована при тонировке в MARQUEE' | перевести}} ® {{'краска...
Орбитальная гибридизация xef4
G loomis rod на продажу
Полная палитра безопасных веб-цветов в основных цветах для набора. Таблица с названиями, кодами RGB, HEX и HSL основных цветов для WEB дизайна. Проверьте правильность ваших стилей CSS!
Панель объявлений дебютной темы Shopify
Солнце в соединении с восходящим восходом
Здравствуйте! Прежде всего, большое спасибо за эту потрясающую библиотеку диаграмм: она очень полная и настраиваемая + API кажется очень ясным.У меня только один вопрос по шаблону цветов.
В мировоззрении, что является элементом природы знания о викторине
Список орды некронов
17 июня 2020 г. · Когда вы не можете решить, в какой цвет покрасить входную дверь, эксперт по цвету и стилист Сара Маклин из Dunn-Edwards Paints рекомендует искать мотивацию в небе. «Используйте природу как вдохновение для вашего следующего цвета входной двери», - говорит она. "Река Мира - это расслабляющий синий цвет, который радушно встречает посетителей."
Углеродное волокно Combat troodon
Dovecot multiple userdb
Если вы используете краску для крафта, это может быть особенно сложно сказать, поскольку в большинстве красков используются забавные названия цветов, такие как« красный флаг »или« красивый в розовом », и т. д. Ниже приведена краткая диаграмма, которую вы можете использовать для сравнения Liquitex BASICS с: DecoArt Americana Tubes, Apple Barrel Craft Paint 18 Piece Set & Artists Loft.
Кентукки арестовывает фотографии 2020
Набор данных Qr-кода
4 марта, 2016 - Исследуйте Big Boy Ind.доска "Paint Charts Behr", за которой следят 897 человек в Pinterest. Ознакомьтесь с другими идеями о таблицах красок, behr, цветах для дома.
Набор для 10 модификаций оружейного шкафа
Dr sebi book pdf
Цвета, схемы и образцы красок SW. Выбирая цвета краски для наружных работ для вашего дома, имейте в виду, что некоторые цвета Sherwin Williams доступны только в качестве внутренних красок. Это важно знать при планировании и согласовании цветовой гаммы вашего дома.
Коды ошибок Rds
Nbc sacramento schedule
New Vintage Paint Colors. Вот краткий обзор наших последних винтажных красок. Дайте мне неделю, чтобы они были в сети, и примерно столько времени, чтобы завершить некоторые проекты. Спасибо, ребята, за такое терпение. Есть предложения по цвету? Отправьте их сюда ... наш цветовой круг никогда не бывает окончательным. Мой самый любимый зеленый цвет - это винтажное стекло.
Проводной контроллер xbox one
Winchester xpr vs weatherby vanguard
Benjaminmoore.com Нам нравятся яркие желтые краски, такие как Banana Yellow 2022-40 и Yellow Highlighter 2021-40, за жизнерадостность и очарование, которые они источают без особых усилий. Тонкий эффект бледно-желтой стены Хотя более смелые желтые цвета отлично подходят для акцентных цветов, мы рекомендуем более приглушенные, приглушенные желтые цвета при окрашивании более чем одной стены в комнате.
Реализация Python для кластеризации с одной связью
Prediksi hk jitu malam ini 4d
23 марта 2013 г. · Как Behr Paint Color Chart упрощает выбор.Многие из нас стояли перед списком цветов и были сбиты с толку. Как правило, лучшее решение - это взять с собой домой всего несколько цветовых таблиц. Таким образом, у вас будет свобода выбора подходящей цветовой гаммы для вашего дома.
Таблица специй mali
Отклоненная нестандартная ночная бесплатная игра
Цветовые схемы. Цвета краски. Примеры HTML / CSS. Графики составов. Цветовые пространства. Шестнадцатеричный код цвета # f8f7ed представляет собой очень светлый оттенок желтого. В цветовой модели RGB # f8f7ed состоит из 97.25% красного, 96,86% зеленого и 92,94% синего.
Bombardier br100 specs
Craigslist nevada iowa
1Battleship Grey House Paint Вдохновляйтесь изображениями желтых стен гостиной, декораций и аксессуаров. Посмотрите, какие желтые цвета гостиной будут лучше всего смотреться в вашем доме, и подберите идеальную краску. Лестничная теорема См. Полный список на thespruce.com VIN не дает нам вашего цветового кода. Это только дает нам какие-либо отклонения формулы краски в существующем цветовом коде. Если вы не можете найти свой цветовой код, указанный выше, заполните форму запроса цвета.Также могут быть дополнительные цвета, особенно интерьер, отделка и колеса, не показанные выше. Большинство заказов обрабатываются и отправляются в течение пяти рабочих дней. Ttp223 отрегулируйте чувствительность
Cisco 3560 scp
50 Behr Interior Paint Colors - Приятно помогать моему личному веб-сайту, в этот раз я собираюсь объяснить вам, что такое внутренние цвета краски behr. И с этого момента это может быть рисунок : Сброс топливного насоса Crown vic
Эта цветовая комбинация достаточно универсальна для использования в различных дизайнерских проектах, от тех, которые имеют изысканный и высококлассный вид, до тех, которые имеют спокойный и темно-розовый и темно-ненасыщенный фиолетовый цвет, сочетающиеся здесь с мягкий красный и мягкий оранжевый, чтобы создать яркую и красочную палитру, которая может быть...Ar ниже зарегистрирован как другие
4 февраля 2017 г. · Желтый - мой любимый цвет, и он появился так давно, как я себя помню. Когда я был подростком, и мои родители переехали в большой старый фермерский дом, у нас был выбор покрасить наши спальни в любые цвета, которые мы хотели. Я выбрал два моих любимых… ярко-желтый и оранжевый, как солнце. Эти два цвета всегда вызывают у меня улыбку. Прерыватель воздушного потока dag
Цветовые схемы. Цвета краски. Примеры HTML / CSS. Графики составов. Цветовые пространства. Шестнадцатеричный код цвета # f8f7ed представляет собой очень светлый оттенок желтого.В цветовой модели RGB # f8f7ed состоит из 97,25% красного, 96,86% зеленого и 92,94% синего.Dababy lyrics blind
29 июля 2020 г. · Другие галереи Behr Green Paint:. Нам нравится этот яркий цвет стен. Любезно предоставлено Dragonfly. 17 самых красивых нейтральных цветов Краски Behr на Антигуа - яркий оттенок бирюзового цвета, который Behr Color of the Year: In The Moment Palette of the Month: Apricot Spritzer Soft и Brown Behr Дом: Color Combo Палитра цветовых трендов, которая должна быть на вашем чат-боте по безработице в Нью-Джерси
Свежий слой краски правильного цвета может не только увеличить ваши шансы найти покупателя.
No related posts.