Цвета html палитра: HTML CSS Палитра цветов

Содержание

Коды цветов html css палитра

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Имена цветов, отсортированные по цветным группам

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

Нажмите здесь, чтобы увидеть 140 цветов отсортированы по имени

Нажмите здесь, чтобы увидеть 140 цвета отсортированы по шестнадцатеричное значение

Color Name	HEX	Color	Shades	Mix
Розовые цвета html коды
Pink	#FFC0CB		Shades	Mix
LightPink	#FFB6C1		Shades	Mix
HotPink	#FF69B4		Shades	Mix
DeepPink	#FF1493		Shades	Mix
PaleVioletRed	#DB7093		Shades	Mix
MediumVioletRed	#C71585		Shades	Mix
Фиолетовые цвета html коды
Color Name	HEX	Color	Shades	Mix
Lavender	#E6E6FA		Shades	Mix
Thistle	#D8BFD8		Shades	Mix
Plum	#DDA0DD		Shades	Mix
Orchid	#DA70D6		Shades	Mix
Violet	#EE82EE		Shades	Mix
Fuchsia	#FF00FF		Shades	Mix
Magenta	#FF00FF		Shades	Mix
MediumOrchid	#BA55D3		Shades	Mix
DarkOrchid	#9932CC		Shades	Mix
DarkViolet	#9400D3		Shades	Mix
BlueViolet	#8A2BE2		Shades	Mix
DarkMagenta	#8B008B		Shades	Mix
Purple	#800080		Shades	Mix
MediumPurple	#9370DB		Shades	Mix
MediumSlateBlue	#7B68EE		Shades	Mix
SlateBlue	#6A5ACD		Shades	Mix
DarkSlateBlue	#483D8B		Shades	Mix
RebeccaPurple	#663399		Shades	Mix
Indigo	#4B0082		Shades	Mix
Красные цвета html коды
Color Name	HEX	Color	Shades	Mix
LightSalmon	#FFA07A		Shades	Mix
Salmon	#FA8072		Shades	Mix
DarkSalmon	#E9967A		Shades	Mix
LightCoral	#F08080		Shades	Mix
IndianRed	#CD5C5C		Shades	Mix
Crimson	#DC143C		Shades	Mix
Red	#FF0000		Shades	Mix
FireBrick	#B22222		Shades	Mix
DarkRed	#8B0000		Shades	Mix
Оранжевые цвета html коды
Color Name	HEX	Color	Shades	Mix
Orange	#FFA500		Shades	Mix
DarkOrange	#FF8C00		Shades	Mix
Coral	#FF7F50		Shades	Mix
Tomato	#FF6347		Shades	Mix
OrangeRed	#FF4500		Shades	Mix
Желтые цвета html коды
Color Name	HEX	Color	Shades	Mix
Gold	#FFD700		Shades	Mix
Yellow	#FFFF00		Shades	Mix
LightYellow	#FFFFE0		Shades	Mix
LemonChiffon	#FFFACD		Shades	Mix
LightGoldenRodYellow	#FAFAD2		Shades	Mix
PapayaWhip	#FFEFD5		Shades	Mix
Moccasin	#FFE4B5		Shades	Mix
PeachPuff	#FFDAB9		Shades	Mix
PaleGoldenRod	#EEE8AA		Shades	Mix
Khaki	#F0E68C		Shades	Mix
DarkKhaki	#BDB76B		Shades	Mix
Зеленые цвета html коды
Color Name	HEX	Color	Shades	Mix
GreenYellow	#ADFF2F		Shades	Mix
Chartreuse	#7FFF00		Shades	Mix
LawnGreen	#7CFC00		Shades	Mix
Lime	#00FF00		Shades	Mix
LimeGreen	#32CD32		Shades	Mix
PaleGreen	#98FB98		Shades	Mix
LightGreen	#90EE90		Shades	Mix
MediumSpringGreen	#00FA9A		Shades	Mix
SpringGreen	#00FF7F		Shades	Mix
MediumSeaGreen	#3CB371		Shades	Mix
SeaGreen	#2E8B57		Shades	Mix
ForestGreen	#228B22		Shades	Mix
Green	#008000		Shades	Mix
DarkGreen	#006400		Shades	Mix
YellowGreen	#9ACD32		Shades	Mix
OliveDrab	#6B8E23		Shades	Mix
DarkOliveGreen	#556B2F		Shades	Mix
MediumAquaMarine	#66CDAA		Shades	Mix
DarkSeaGreen	#8FBC8F		Shades	Mix
LightSeaGreen	#20B2AA		Shades	Mix
DarkCyan	#008B8B		Shades	Mix
Teal	#008080		Shades	Mix
Голубые цвета html коды
Color Name	HEX	Color	Shades	Mix
Aqua	#00FFFF		Shades	Mix
Cyan	#00FFFF		Shades	Mix
LightCyan	#E0FFFF		Shades	Mix
PaleTurquoise	#AFEEEE		Shades	Mix
Aquamarine	#7FFFD4		Shades	Mix
Turquoise	#40E0D0		Shades	Mix
MediumTurquoise	#48D1CC		Shades	Mix
DarkTurquoise	#00CED1		Shades	Mix
Синие цвета html коды
Color Name	HEX	Color	Shades	Mix
CadetBlue	#5F9EA0		Shades	Mix
SteelBlue	#4682B4		Shades	Mix
LightSteelBlue	#B0C4DE		Shades	Mix
LightBlue	#ADD8E6		Shades	Mix
PowderBlue	#B0E0E6		Shades	Mix
LightSkyBlue	#87CEFA		Shades	Mix
SkyBlue	#87CEEB		Shades	Mix
CornflowerBlue	#6495ED		Shades	Mix
DeepSkyBlue	#00BFFF		Shades	Mix
DodgerBlue	#1E90FF		Shades	Mix
RoyalBlue	#4169E1		Shades	Mix
Blue	#0000FF		Shades	Mix
MediumBlue	#0000CD		Shades	Mix
DarkBlue	#00008B		Shades	Mix
Navy	#000080		Shades	Mix
MidnightBlue	#191970		Shades	Mix
Коричневые цвета html коды
Color Name	HEX	Color	Shades	Mix
Cornsilk	#FFF8DC		Shades	Mix
BlanchedAlmond	#FFEBCD		Shades	Mix
Bisque	#FFE4C4		Shades	Mix
NavajoWhite	#FFDEAD		Shades	Mix
Wheat	#F5DEB3		Shades	Mix
BurlyWood	#DEB887		Shades	Mix
Tan	#D2B48C		Shades	Mix
RosyBrown	#BC8F8F		Shades	Mix
SandyBrown	#F4A460		Shades	Mix
GoldenRod	#DAA520		Shades	Mix
DarkGoldenRod	#B8860B		Shades	Mix
Peru	#CD853F		Shades	Mix
Chocolate	#D2691E		Shades	Mix
Olive	#808000		Shades	Mix
SaddleBrown	#8B4513		Shades	Mix
Sienna	#A0522D		Shades	Mix
Brown	#A52A2A		Shades	Mix
Maroon	#800000		Shades	Mix
Белые цвета html коды
Color Name	HEX	Color	Shades	Mix
White	#FFFFFF		Shades	Mix
Snow	#FFFAFA		Shades	Mix
HoneyDew	#F0FFF0		Shades	Mix
MintCream	#F5FFFA		Shades	Mix
Azure	#F0FFFF		Shades	Mix
AliceBlue	#F0F8FF		Shades	Mix
GhostWhite	#F8F8FF		Shades	Mix
WhiteSmoke	#F5F5F5		Shades	Mix
SeaShell	#FFF5EE		Shades	Mix
Beige	#F5F5DC		Shades	Mix
OldLace	#FDF5E6		Shades	Mix
FloralWhite	#FFFAF0		Shades	Mix
Ivory	#FFFFF0		Shades	Mix
AntiqueWhite	#FAEBD7		Shades	Mix
Linen	#FAF0E6		Shades	Mix
LavenderBlush	#FFF0F5		Shades	Mix
MistyRose	#FFE4E1		Shades	Mix
Зеленые цвета html коды
Color Name	HEX	Color	Shades	Mix
Gainsboro	#DCDCDC		Shades	Mix
LightGray	#D3D3D3		Shades	Mix
Silver	#C0C0C0		Shades	Mix
DarkGray	#A9A9A9		Shades	Mix
DimGray	#696969		Shades	Mix
Gray	#808080		Shades	Mix
LightSlateGray	#778899		Shades	Mix
SlateGray	#708090		Shades	Mix
DarkSlateGray	#2F4F4F		Shades	Mix
Black	#000000		Shades	Mix

❮ Назад Дальше ❯

PHP\CSS\JS\HMTL Editor

Как сделать

Вкладки
Выпадающие
Аккордеоны
Конвертер
Анимированные кнопки
Боковая Навигация
Верхняя навигация
Модальные коробки
Строки хода выполнения
Параллакс
Форма входа
HTML вставка
Google Карты
Ползунки диапазона
Подсказки
Слайдшоу
Список фильтров
Сортировать список

Еще »

Правила и Условия Политика конфиденциальности О нас Контакты

Цвета HTML | это… Что такое Цвета HTML?

HTML
HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile и CHTML Canvas Кодировки символов Document Object Model Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Фреймы HTML HTML5 audio и HTML5 video Скрипты в HTML Браузерный движок Quirks mode Таблицы стилей Каскадные таблицы стилей Unicode и HTML W3C и WHATWG Цвета HTML Web Storage WebGL Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1.1)

HTML

HTML и HTML5
Динамический HTML
XHTML
XHTML Mobile Profile и CHTML
Canvas
Кодировки символов
Document Object Model
Семейство шрифтов
Редактор HTML
Элементы HTML
Мнемоники в HTML
Фреймы HTML
HTML5 audio и HTML5 video
Скрипты в HTML
Браузерный движок
Quirks mode
Таблицы стилей
Каскадные таблицы стилей
Unicode и HTML
W3C и WHATWG
Цвета HTML
Web Storage
WebGL
Сравнение
- языков разметки документов
- браузеров
- браузерных движков для
  - HTML
  - HTML5
    - HTML5 Canvas
    - HTML5 Media
  - XHTML (1.1)

Существуют несколько основных способов представления цветов в вебе.

В виде #123ABC. Представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:
две первые цифры — красный
две в середине — зелёный
две последние цифры — синий
Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.
Представление ключевыми словами, например green, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
В виде rgb(*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.

Содержание

1 Имена цветов в HTML
2 Безопасная палитра Netscape
3 Названия цветов в X11
4 Примечания
5 Ссылки

Имена цветов в HTML

В спецификации HTML 4.01^[1] определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы):*

Цвет	Код	Цвет	Код	Цвет	Код	Цвет	Код
aqua (морская волна)	#00ffff	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

^В спецификации используются английские названия цветов.

Безопасная палитра Netscape

В эпоху 256-цветных видеокарт широко применялась так называемая «безопасная палитра Netscape» — однородная палитра 6×6×6. В truecolor у безопасных цветов все три компонента — R, G и B — равняются 00, 33, 66, 99, CC и FF. Браузер Netscape гарантировал, что эти цвета будут отображены без приближения или растрирования. Другими словами, 223 цвета стандартной 16-цветовой палитры и палитры 6×6×6 были наиболее предпочтительными для цвета изображения и фона.

К концу 90-х годов, с полным исчезновением 8-битного цвета с рабочих столов ОС, это требование исчезло. Тем не менее, Adobe Photoshop и поныне оснащён опцией «Только Web-цвета» (англ. Only Web Colors).

Названия цветов в X11

HTML имя	К З С₁₆	К З С₁₀
Красные
IndianRed	CD 5C 5C	205 92 92
LightCoral	F0 80 80	240 128 128
Salmon	FA 80 72	250 128 114
DarkSalmon	E9 96 7A	233 150 122
LightSalmon	FF A0 7A	255 160 122
Crimson	DC 14 3C	220 20 60
Red	FF 00 00	255 0 0
FireBrick	B2 22 22	178 34 34
DarkRed	8B 00 00	139 0 0
Розовые
Pink	FF C0 CB	255 192 203
LightPink	FF B6 C1	255 182 193
HotPink	FF 69 B4	255 105 180
DeepPink	FF 14 93	255 20 147
MediumVioletRed	C7 15 85	199 21 133
PaleVioletRed	DB 70 93	219 112 147
Оранжевые
Coral	FF 7F 50	255 127 80
Tomato	FF 63 47	255 99 71
OrangeRed	FF 45 00	255 69 0
DarkOrange	FF 8C 00	255 140 0
Orange	FF A5 00	255 165 0
Жёлтые
Gold	FF D7 00	255 215 0
Yellow	FF FF 00	255 255 0
LightYellow	FF FF E0	255 255 224
LemonChiffon	FF FA CD	255 250 205
LightGoldenrodYellow	FA FA D2	250 250 210
PapayaWhip	FF EF D5	255 239 213
Moccasin	FF E4 B5	255 228 181
PeachPuff	FF DA B9	255 218 185
PaleGoldenrod	EE E8 AA	238 232 170
Khaki	F0 E6 8C	240 230 140
DarkKhaki	BD B7 6B	189 183 107
Фиолетовые
Lavender	E6 E6 FA	230 230 250
Thistle	D8 BF D8	216 191 216
Plum	DD A0 DD	221 160 221
Violet	EE 82 EE	238 130 238
Orchid	DA 70 D6	218 112 214
Fuchsia	FF 00 FF	255 0 255
Magenta	FF 00 FF	255 0 255
MediumOrchid	BA 55 D3	186 85 211
MediumPurple	93 70 DB	147 112 219
BlueViolet	8A 2B E2	138 43 226
DarkViolet	94 00 D3	148 0 211
DarkOrchid	99 32 CC	153 50 204
DarkMagenta	8B 00 8B	139 0 139
Purple	80 00 80	128 0 128
Indigo	4B 00 82	75 0 130
SlateBlue	6A 5A CD	106 90 205
DarkSlateBlue	48 3D 8B	72 61 139

HTML имя	К З С₁₆	К З С₁₀
Зелёные
GreenYellow	AD FF 2F	173 255 47
Chartreuse	7F FF 00	127 255 0
LawnGreen	7C FC 00	124 252 0
Lime	00 FF 00	0 255 0
LimeGreen	32 CD 32	50 205 50
PaleGreen	98 FB 98	152 251 152
LightGreen	90 EE 90	144 238 144
MediumSpringGreen	00 FA 9A	0 250 154
SpringGreen	00 FF 7F	0 255 127
MediumSeaGreen	3C B3 71	60 179 113
SeaGreen	2E 8B 57	46 139 87
ForestGreen	22 8B 22	34 139 34
Green	00 80 00	0 128 0
DarkGreen	00 64 00	0 100 0
YellowGreen	9A CD 32	154 205 50
OliveDrab	6B 8E 23	107 142 35
Olive	80 80 00	128 128 0
DarkOliveGreen	55 6B 2F	85 107 47
MediumAquamarine	66 CD AA	102 205 170
DarkSeaGreen	8F BC 8F	143 188 143
LightSeaGreen	20 B2 AA	32 178 170
DarkCyan	00 8B 8B	0 139 139
Teal	00 80 80	0 128 128
Синие
Aqua	00 FF FF	0 255 255
Cyan	00 FF FF	0 255 255
LightCyan	E0 FF FF	224 255 255
PaleTurquoise	AF EE EE	175 238 238
Aquamarine	7F FF D4	127 255 212
Turquoise	40 E0 D0	64 224 208
MediumTurquoise	48 D1 CC	72 209 204
DarkTurquoise	00 CE D1	0 206 209
CadetBlue	5F 9E A0	95 158 160
SteelBlue	46 82 B4	70 130 180
LightSteelBlue	B0 C4 DE	176 196 222
PowderBlue	B0 E0 E6	176 224 230
LightBlue	AD D8 E6	173 216 230
SkyBlue	87 CE EB	135 206 235
LightSkyBlue	87 CE FA	135 206 250
DeepSkyBlue	00 BF FF	0 191 255
DodgerBlue	1E 90 FF	30 144 255
CornflowerBlue	64 95 ED	100 149 237
MediumSlateBlue	7B 68 EE	123 104 238
RoyalBlue	41 69 E1	65 105 225
Blue	00 00 FF	0 0 255
MediumBlue	00 00 CD	0 0 205
DarkBlue	00 00 8B	0 0 139
Navy	00 00 80	0 0 128
MidnightBlue	19 19 70	25 25 112

HTML имя	К З С₁₆	К З С₁₀
Коричневые
Cornsilk	FF F8 DC	255 248 220
BlanchedAlmond	FF EB CD	255 235 205
Bisque	FF E4 C4	255 228 196
NavajoWhite	FF DE AD	255 222 173
Wheat	F5 DE B3	245 222 179
BurlyWood	DE B8 87	222 184 135
Tan	D2 B4 8C	210 180 140
RosyBrown	BC 8F 8F	188 143 143
SandyBrown	F4 A4 60	244 164 96
Goldenrod	DA A5 20	218 165 32
DarkGoldenrod	B8 86 0B	184 134 11
Peru	CD 85 3F	205 133 63
Chocolate	D2 69 1E	210 105 30
SaddleBrown	8B 45 13	139 69 19
Sienna	A0 52 2D	160 82 45
Brown	A5 2A 2A	165 42 42
Maroon	80 00 00	128 0 0
Белые
White	FF FF FF	255 255 255
Snow	FF FA FA	255 250 250
Honeydew	F0 FF F0	240 255 240
MintCream	F5 FF FA	245 255 250
Azure	F0 FF FF	240 255 255
AliceBlue	F0 F8 FF	240 248 255
GhostWhite	F8 F8 FF	248 248 255
WhiteSmoke	F5 F5 F5	245 245 245
Seashell	FF F5 EE	255 245 238
Beige	F5 F5 DC	245 245 220
OldLace	FD F5 E6	253 245 230
FloralWhite	FF FA F0	255 250 240
Ivory	FF FF F0	255 255 240
AntiqueWhite	FA EB D7	250 235 215
Linen	FA F0 E6	250 240 230
LavenderBlush	FF F0 F5	255 240 245
MistyRose	FF E4 E1	255 228 225
Серые *
Gainsboro	DC DC DC	220 220 220
LightGray	D3 D3 D3	211 211 211
Silver	C0 C0 C0	192 192 192
DarkGray	A9 A9 A9	169 169 169
Gray	80 80 80	128 128 128
DimGray	69 69 69	105 105 105
LightSlateGray	77 88 99	119 136 153
SlateGray	70 80 90	112 128 144
DarkSlateGray	2F 4F 4F	47 79 79
Black	00 00 00	0 0 0

Слово «Gray» в названиях серых цветов можно писать и как «Grey».

Примечания

↑ HTML 4.01 Specification section 6.5 «Colors»

Ссылки

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

Таблица цветов html с названиями
Русскоязычный ресурс — www.artlebedev.ru
Таблица безопасных цветов
Цвет и подбор кода оттенка цвета
HTML Color Spectrum Char

seodon.ru | Цвета HTML — Безопасные цвета HTML

Опубликовано: 05.03.2011 Последняя правка: 08.12.2015

На этой странице представлена таблица безопасных цветов HTML в формате RGB (для CSS и разных приложений) и HEX (для HTML и CSS). Используя эти цвета, вы можете быть уверены, что они будут одинаково отображены любыми старыми и новыми устройствами, на которых будут просматривать ваш сайт (мониторы, мобильные телефоны и т.д.) и всеми браузерами. При указании кода цвета в HTML перед ним необходимо поставить знак решетка (#). Все представленные ниже цвета допускается задавать в сокращенном виде, например #F3C вместо #FF33CC или #333 вместо #333333, а некоторые из них указывать по имени цвета.

255,204,102	255,204,51	255,204,0	204,153,0	153,102,0
FFCC66	FFCC33	FFCC00	CC9900	996600

255,204,153	204,153,102	204,153,51	153,102,51	102,51,0
FFCC99	CC9966	CC9933	996633	663300

255,153,102	255,153,51	255,153,0	204,102,51	204,102,0
FF9966	FF9933	FF9900	CC6633	CC6600

255,102,51	255,102,0	255,51,0	204,51,0	153,51,0
FF6633	FF6600	FF3300	CC3300	993300

255,204,204	204,153,153	153,102,102	102,51,51	51,0,0
FFCCCC	CC9999	996666	663333	330000

255,153,153	204,102,102	204,51,51	153,51,51	102,0,0
FF9999	CC6666	CC3333	993333	660000

255,102,102	255,51,51	255,0,0	204,0,0	153,0,0
FF6666	FF3333	FF0000	CC0000	990000

255,102,153	255,51,102	255,0,51	204,0,51	153,0,51
FF6699	FF3366	FF0033	CC0033	990033

255,153,204	204,102,153	204,51,102	153,51,102	102,0,51
FF99CC	CC6699	CC3366	993366	660033

255,51,153	255,0,153	255,0,102	204,0,102	153,0,102
FF3399	FF0099	FF0066	CC0066	990066

255,102,204	255,51,204	255,0,204	204,51,153	204,0,153
FF66CC	FF33CC	FF00CC	CC3399	CC0099

255,204,255	204,153,204	153,102,153	102,51,102	51,0,51
FFCCFF	CC99CC	996699	663366	330033

255,153,255	204,102,204	204,51,204	153,51,153	102,0,102
FF99FF	CC66CC	CC33CC	993399	660066

255,102,255	255,51,255	255,0,255	204,0,204	153,0,153
FF66FF	FF33FF	FF00FF	CC00CC	990099

204,102,255	204,51,255	204,0,255	153,0,204	102,0,153
CC66FF	CC33FF	CC00FF	9900CC	660099

204,153,255	153,102,204	153,51,204	102,51,153	51,0,102
CC99FF	9966CC	9933CC	663399	330066

153,102,255	153,51,255	153,0,255	102,51,204	102,0,204
9966FF	9933FF	9900FF	6633CC	6600CC

102,51,255	102,0,255	51,0,255	51,0,204	51,0,153
6633FF	6600FF	3300FF	3300CC	330099

204,204,255	153,153,204	102,102,153	51,51,102	0,0,51
CCCCFF	9999CC	666699	333366	000033

153,153,255	102,102,204	51,51,204	51,51,153
9999FF	6666CC	3333CC	333399	000066

102,102,255	51,51,255	0,0,255	0,0,204	0,0,153
6666FF	3333FF	0000FF	0000CC	000099

102,153,255	51,102,255	0,51,255	0,51,204	0,51,153
6699FF	3366FF	0033FF	0033CC	003399

153,204,255	102,153,204	51,102,204	51,102,153	0,51,102
99CCFF	6699CC	3366CC	336699	003366

51,153,255	0,153,255	0,102,255	0,102,204	0,102,153
3399FF	0099FF	0066FF	0066CC	006699

102,204,255	51,204,255	0,204,255	51,153,204	0,153,204
66CCFF	33CCFF	00CCFF	3399CC	0099CC

204,255,255	153,204,204	102,153,153	51,102,102	0,51,51
CCFFFF	99CCCC	669999	336666	003333

153,255,255	102,204,204	51,204,204	51,153,153	0,102,102
99FFFF	66CCCC	33CCCC	339999	006666

102,255,255	51,255,255	0,255,255	0,204,204	0,153,153
66FFFF	33FFFF	00FFFF	00CCCC	009999

102,255,204	51,255,204	0,255,204	0,204,153	0,153,102
66FFCC	33FFCC	00FFCC	00CC99	009966

153,255,204	102,204,153	51,204,153	51,153,102	0,102,51
99FFCC	66CC99	33CC99	339966	006633

102,255,153	51,255,153	0,255,153	51,204,102	0,104,102
66FF99	33FF99	00FF99	33CC66	00CC66

51,255,102	0,255,102	0,255,51	0,204,51	0,153,51
33FF66	00FF66	00FF33	00CC33	009933

153,255,153	153,204,153	102,153,102	51,102,51	0,51,0
99FF99	99CC99	669966	336633	003300

204,255,204	102,204,102	51,204,51	51,153,51	0,102,0
CCFFCC	66CC66	33CC33	339933	006600

102,255,102	51,255,51	0,255,0	0,204,0	0,153,0
66FF66	33FF33	00FF00	00CC00	009900

153,255,102	102,255,51	51,255,0	51,204,0	51,153,0
99FF66	66FF33	33FF00	33CC00	339900

204,255,153	153,204,102	102,204,51	102,153,51	51,102,0
CCFF99	99CC66	66CC33	669933	336600

153,255,51	153,255,0	102,255,0	102,204,0	102,153,0
99FF33	99FF00	66FF00	66CC00	669900

204,255,102	204,255,51	204,255,0	153,204,51	153,204,0
CCFF66	CCFF33	CCFF00	99CC33	99CC00

255,255,204	204,204,153	153,153,102	102,102,51	51,51,0
FFFFCC	CCCC99	999966	666633	333300

255,255,153	204,204,102	204,204,51	153,153,51	102,102,0
FFFF99	CCCC66	CCCC33	999933	666600

255,255,102	255,255,51	255,255,0	204,204,0	153,153,0
FFFF66	FFFF33	FFFF00	CCCC00	999900

255,255,255	204,204,204	153,153,153	102,102,102	51,51,51	0,0,0
FFFFFF	CCCCCC	999999	666666	333333	000000

Каждый HEX-код состоит из трех пар шестнадцатеричных значений: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий. Коды безопасной палитры могут состоять только из пар — 00, 33, 66, 99, СС и FF. Если код цвета содержит какое-либо другое значение, то этот цвет не из безопасной палитры.

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

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

Web Safe Colors

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

Системная палитра Windows резервирует для своего использования 20 цветов, а Netscape резервирует для своего использования 13 дополнительных цветов.

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

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

Два веб-сайта, которые создали палитру из 216 цветов в форме образца для использования в PhotoShop. Их можно загрузить по адресу: http://webreference.com/dev/graphics/palette.html или http://www.homepage.co.uk/webcolour/.

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

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

RGB 0, 0, 0 HEX 000000	RGB 0, 0, 51 HEX 000033	RGB 0, 0, 102 HEX 000066	RGB 0, 0, 153 HEX 000099	RGB 0, 0, 204 HEX 0000CC	RGB 0, 0, 255 HEX 0000FF
RGB 0, 51, 0 HEX 003300	RGB 0, 51, 51 HEX 003333	RGB 0, 51, 102 HEX 003366	RGB 0, 51, 153 HEX 003399	RGB 0, 51, 204 HEX 0033CC	RGB 0, 51, 255 HEX 0033FF
RGB 0, 102, 0 HEX 006600	RGB 0, 102, 51 HEX 006633	RGB 0, 102, 102 HEX 006666	RGB 0, 102, 153 HEX 006699	RGB 0, 102, 204 HEX 0066CC	RGB 0, 102, 255 HEX 0066FF
RGB 0, 153, 0 HEX 009900	RGB 0, 153, 51 HEX 009933	RGB 0, 153, 102 HEX 009966	RGB 0, 153, 153 HEX 009999	RGB 0, 153, 204 HEX 0099CC	RGB 0, 153, 255 HEX 0099FF
RGB 0, 204, 0 HEX 00CC00	RGB 0, 204, 51 HEX 00CC33	RGB 0, 204, 102 HEX 00CC66	RGB 0, 204, 153 HEX 00CC99	RGB 0, 204, 204 HEX 00CCCC	RGB 0, 204, 255 HEX 00CCFF
RGB 0, 255, 0 HEX 00FF00	RGB 0, 255, 51 HEX 00FF33	RGB 0, 255, 102 HEX 00FF66	RGB 0, 255, 153 HEX 00FF99	RGB 0, 255, 204 HEX 00FFCC	RGB 0, 255, 255 HEX 00FFFF

RGB 51, 0, 0 HEX 330000	RGB 51, 0, 51 HEX 330033	RGB 51, 0, 102 HEX 330066	RGB 51, 0, 153 HEX 330099	RGB 51, 0, 204 HEX 3300CC	RGB 51, 0, 255 HEX 3300FF
RGB 51, 51, 0 HEX 333300	RGB 51, 51, 51 HEX 333333	RGB 51, 51, 102 HEX 333366	RGB 51, 51, 153 HEX 333399	RGB 51, 51, 204 HEX 3333CC	RGB 51, 51, 255 HEX 3333FF
RGB 51, 102, 0 HEX 336600	RGB 51, 102, 51 HEX 336633	RGB 51, 102, 102 HEX 336666	RGB 51, 102, 153 HEX 336699	RGB 51, 102, 204 HEX 3366CC	RGB 51, 102, 255 HEX 3366FF
RGB 51, 153, 0 HEX 339900	RGB 51, 153, 51 HEX 339933	RGB 51, 153, 102 HEX 339966	RGB 51, 153, 153 HEX 339999	RGB 51, 153, 204 HEX 3399CC	RGB 51, 153, 255 HEX 3399FF
RGB 51, 204, 0 HEX 33CC00	RGB 51, 204, 51 HEX 33CC33	RGB 51, 204, 102 HEX 33CC66	RGB 51, 204, 153 HEX 33CC99	RGB 51, 204, 204 HEX 33CCCC	RGB 51, 204, 255 HEX 33CCFF
RGB 51, 255, 0 HEX 33FF00	RGB 51, 255, 51 HEX 33FF33	RGB 51, 255, 102 HEX 33FF66	RGB 51, 255, 153 HEX 33FF99	RGB 51, 255, 204 HEX 33FFCC	RGB 51, 255, 255 HEX 33FFFF

RGB 102, 0, 0 HEX 6000200 9600200
RGB 102, 0, 51 HEX 660033	RGB 102, 0, 102 HEX 660066	RGB 102, 0, 153 HEX 660099	RGB 102, 0, 204 HEX 6600CC	RGB 102, 0, 255 HEX 6600FF
RGB 102, 51, 0 HEX 663300	RGB 102, 51, 51 HEX 663333	RGB 102, 51, 102 HEX 663366	RGB 102, 51, 153 HEX 663399	RGB 102, 51, 204 HEX 6633CC	RGB 102, 51, 255 HEX 6633FF
RGB 102, 102, 0 HEX 666600	RGB 102, 102, 51 HEX 666633	RGB 102, 102, 102 HEX 666666	RGB 102, 102, 153 HEX 666699	RGB 102, 102, 204 HEX 6666CC	RGB 102, 102, 255 HEX 6666FF
RGB 102, 153, 0 HEX 669900	RGB 102, 153, 51 Шестнадцатеричный 669933	RGB 102, 153, 102 HEX 669966	RGB 102, 153, 153 HEX 669999	RGB 102, 153, 204 HEX 6699CC	RGB 102, 153, 255 HEX 6699FF
RGB 102, 204, 0 HEX 66CC00	RGB 102, 204, 51 HEX 66CC33	RGB 102, 204, 102 HEX 66CC66	RGB 102, 204, 153 Шестнадцатеричный 66CC99	RGB 102, 204, 204 HEX 66CCCC	RGB 102, 204, 255 HEX 66CCFF
RGB 102, 255, 0 HEX 66FF00	RGB 102, 255, 51 HEX 66FF33	RGB 102, 255, 102 HEX 66FF66	RGB 102, 255, 153 HEX 66FF99	RGB 102, 255, 204 HEX 66FFCC	RGB 102, 255, 255 HEX 66FFFF

RGB 153, 0, 0 HEX 9	RGB 153, 0, 51 HEX 9		RGB 153, 0, 102 HEX 9	RGB 153, 0, 153 HEX 9	RGB 153, 0, 204 HEX 9900CC	RGB 153, 0, 255 HEX 9900FF
RGB 153, 51, 0 HEX 993300	RGB 153, 51, 51 Шестигранник 993333	RGB 153, 51, 102 HEX 993366	RGB 153, 51, 153 HEX 993399	RGB 153, 51, 204 HEX 9933CC	RGB 153, 51, 255 HEX 9933FF
RGB 151, 102, 0 HEX 996600	RGB 153, 102, 51 HEX 996633	RGB 153, 102, 102 HEX 996666	RGB 153, 102, 153 Шестнадцатеричный 996699	RGB 153, 102, 204 HEX 9966CC	RGB 153, 102, 255 HEX 9966FF
RGB 153, 153, 0 HEX 999900	RGB 153, 153, 51 HEX 999933	RGB 153, 153, 102 HEX 999966	RGB 153, 153, 153 HEX 999999	RGB 53, 153, 204 HEX 9999CC	RGB 153,153, 255 HEX 9999FF
RGB 153, 204, 0 HEX 99CC00	RGB 153, 204, 51 HEX 99CC33	RGB 153, 204, 102 HEX 99CC66	RGB 153, 204, 153 HEX 99CC99	RGB 153, 204, 204 HEX 99CCCC	RGB 153, 204, 255 HEX 99CCFF
RGB 153, 255, 0 HEX 99FF00	RGB 153, 255, 51 HEX 99FF33	RGB 153, 255, 102 HEX 99FF66	RGB 153, 255, 153 HEX 99FF99	RGB 153, 255, 206 HEX 99FFCC	RGB 155, 255, 255 HEX 99FFFF

RGB 204, 0, 0 HEX CC00200 90	RGB 204, 0, 51 HEX CC0033	RGB 204, 0, 102 HEX CC0066	RGB 204, 0, 153 HEX CC0099	RGB HEX CC00CC	RGB 204, 0, 255 HEX CC00FF
RGB 204, 51, 0 HEX CC3300	RGB 204, 51, 102 HEX CC3333	RGB 204, 51, 152 HEX CC3366	RGB 204, 51, 153 HEX CC3399	RGB 204, 51, 204 HEX CC33CC	RGB 204, 51, 255 HEX CC33FF
RGB 204, 102, 0 HEX CC6600	RGB 204, 102, 51 HEX CC6633	RGB 204, 102, 102 HEX CC6666	RGB 204, 102, 153 HEX CC6699	RGB 204, 102, 204 HEX CC66CC	RGB 204, 102, 255 HEX CC66FF
RGB 204, 153, 0 HEX CC9900	RGB 204, 153, 51 HEX CC9933	RGB 204, 153, 102 HEX CC9966	RGB 204, 153, 153 HEX CC9999	RGB 204,153, 204 HEX CC99CC	RGB 204, 153, 255 HEX CC99FF
RGB 204, 204, 0 HEX CCCC00	RGB 204, 204, 51 HEX CCCC33	RGB 204, 204, 102 HEX CCCC66	RGB 204, 204, 153 HEX CCCC99	RGB 204, 204, 204 HEX CCCCCC	RGB 204, 204, 255 HEX CCCCFF
RGB 204, 255, 0 HEX CCFF00	RGB 204, 255, 51 HEX CCFF33	RGB 204, 255, 102 HEX CCFF66	RGB 204, 255, 153 HEX CCFF99	RGB 204, 255, 204 HEX CCFFCC	RGB 204, 255, 255 HEX CCFFFF

RGB 255, 0, 0 HEX FF00020 0 0

	RGB 255, 0, 51 HEX FF0033	RGB 255, 0, 102 HEX FF0066	RGB 255, 0, 153 HEX FF0099	RGB 255, 0, 204 HEX FF00CC	RGB 255, 0, 255 HEX FF00FF
RGB 255, 51, 0 HEX FF3300	RGB 255, 51, 51 HEX FF3333	RGB 255, 51, 102 HEX FF3366	RGB 255, 51, 153 HEX FF3399	RGB 255, 51, 204 HEX FF33CC	RGB HEX FF33FF
RGB 255, 102, 0 HEX FF6600	RGB 255, 102, 51 HEX FF6633	RGB 255, 102, 102 Шестигранник FF6666	RGB 255, 102, 153 HEX FF6699	RGB 255, 102, 204 HEX FF66CC	RGB 255, 102, 255 HEX FF66FF
RGB 255, 153, 0 HEX FF9900	RGB 255, 153, 51 HEX FF9933	RGB 255, 153, 102 HEX FF9966	RGB 255, 153, 153 HEX FF9999	RGB 255, 153, 204 Шестнадцатеричный FF99CC	RGB 255, 153, 255 HEX FF99FF
RGB 255, 204, 0 HEX FFCC00	RGB 255, 204, 51 HEX FFCC33	RGB 255, 204, 102 HEX FFCC66	RGB 255, 204, 153 HEX FFCC99	RGB 255, 204, 204 HEX FFCCCC	255, 204, 255 HEX FFCCFF
RGB 255, 255, 0 HEX FFFF00	RGB 255, 255, 51 HEX FFFF33	RGB 255, 255, 102 HEX FFFF66	RGB 255, 255, 153 HEX FFFF99	RGB 255, 255, 206 HEX FFFFCC	RGB 255, 255, 255 HEX FFFFFF

Полное руководство по цветовым кругам и цветовым схемам

Когда вы просматриваете ленту новостей, что привлекает ваше внимание? Скорее всего, это видеоролики YouTube, изображения, анимированные GIF-файлы и другой визуальный контент, верно?

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

Я знаю, что вы можете подумать: «Я не знаю, как создавать потрясающие визуальные эффекты. Я не креативен».

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

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

И вы можете сделать это, изучив теорию цвета. Считайте, что это ваш вводный курс, и мы рассмотрим следующие темы:

Что такое теория цвета?
Почему теория цвета важна в веб-дизайне?
Теория цвета 101
Аддитивная и субтрактивная теория цвета
Значение цвета
Семь цветовых схем
Как выбрать цветовую схему
Цветные инструменты

Что такое теория цвета?

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

Почему теория цвета так важна в веб-дизайне?

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

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

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

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

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

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

Теория цвета 101

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

Помните, вы слышали о первичных, вторичных и третичных цветах? Они очень важны, если вы хотите понять, ну, все остальное о цвете.

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

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

Существует три основных цвета:

Красный
Желтый
Синий

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

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

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

Вторичные цвета

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

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

Красный + Желтый = Оранжевый
Синий + Красный = Фиолетовый
Желтый + Синий = Зеленый

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

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

Третичные цвета создаются при смешивании основного цвета со вторичным.

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

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

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

Красный + фиолетовый = Красно-фиолетовый (пурпурный)
Красный + Оранжевый = Красно-оранжевый (киноварь)
Синий + Фиолетовый = Сине-фиолетовый (фиолетовый)
Синий + Зеленый = Сине-зеленый (бирюзовый)
Желтый + Оранжевый = Желто-оранжевый (янтарный)
Желтый + Зеленый = Желто-зеленый (шартрез)

Колесо теории цвета

Хорошо, отлично. Итак, теперь вы знаете, что такое «основные» цвета, но мы оба знаем, что подбор цветовых комбинаций, особенно на компьютере, предполагает гораздо более широкий диапазон, чем 12 основных цветов.

Это движущая сила цветового круга, круговая диаграмма, которая отображает каждый первичный, вторичный и третичный цвет, а также их соответствующие оттенки, оттенки, тона и оттенки. Визуализация цветов таким образом помогает вам выбирать цветовые схемы, показывая, как каждый цвет соотносится с цветом, который идет рядом с ним в цветовой шкале радуги. (Как вы, наверное, знаете, цветов радуги по порядку 9.1257 Red , Orange , Yellow , Green , Blue , Indigo и Viollet .) ярче, светлее, мягче и темнее цвета путем смешивания белого, черного и серого с исходными цветами. Эти смеси создают цветовые варианты, описанные ниже:

Оттенок

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

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

Если бы вы смешали, например, оттенки красного и синего вместе, вы бы получили фиолетовый, верно? Но смешав оттенок красного с оттенком синего, вы получите взамен слегка окрашенный фиолетовый.

Оттенок

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

Оттенок

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

Тон (или Насыщенность)

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

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

Аддитивная и субтрактивная теория цвета

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

Вы когда-нибудь задумывались, что означают эти буквы?

CMYK

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

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

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

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

Мне легче думать о CMYK с точки зрения соответствующих чисел. CMYK работает по шкале от 0 до 100. Если C = 100, M = 100, Y = 100 и K = 100, вы получите черный цвет. Но если все четыре цвета равны 0, вы получите настоящий белый цвет.

RGB

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

RGB означает красный, зеленый, синий и основан на аддитивной цветовой модели световых волн. Это означает, что чем больше цвета вы добавите, тем вы приблизитесь к белому. Для компьютеров RGB создается с использованием масштабов от 0 до 255. Таким образом, черный будет R = 0, G = 0 и B = 0. Белый будет R = 255, G = 255 и B = 255.

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

Однако многие веб-программы предоставляют вам только значения RGB или HEX-код (код, присвоенный цвету для CSS и HTML). Итак, если вы разрабатываете цифровые изображения или веб-дизайн, RGB, вероятно, лучший выбор для выбора цветов.

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

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

Наряду с разным визуальным воздействием разные цвета также несут разную эмоциональную символику.

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

Стоит отметить? Разные зрители могут по-разному воспринимать цвета. Перечисленные выше значения являются общими для аудитории в Северной Америке, но если ваш бренд перемещается в другие части мира, рекомендуется изучить, как пользователи будут воспринимать определенные цвета. Например, хотя в Соединенных Штатах красный обычно символизирует страсть или власть, в Южной Африке он считается цветом траура.

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

Какие семь цветовых схем?

Семь основных цветовых схем: монохроматическая, аналогичная, дополнительная, расщепленная дополнительная, триадная, квадратная и прямоугольная (или тетрадная).

Рассмотрим каждый подробнее.

1. Монохроматический

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

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

Проверьте все монохроматические цвета, которые относятся к красному оттенку, основному цвету.

2. Аналоговые

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

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

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

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

3. Дополнительные

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

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

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

4. Раздельно-дополнительный цвет

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

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

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

5. Triadic

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

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

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

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

6. Квадрат

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

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

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

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

7. Прямоугольник

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

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

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

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

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

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

Как выбрать цветовую схему

В первую очередь отдавайте предпочтение пользовательскому опыту. Используйте естественное вдохновение.
Задайте настроение своей цветовой гамме.
Учитывайте цветовой контекст.
: Обратитесь к своему цветовому кругу.
Используйте правило 60-30-10.
Создание нескольких дизайнов.

1. В первую очередь отдайте предпочтение пользовательскому опыту.

Прежде чем добавить цвет на свой веб-сайт, приложение, продукт или упаковку, сделайте базовый дизайн в оттенках серого.
Это позволяет вам сосредоточиться на самом важном: пользовательском опыте. Вместо того, чтобы сосредотачиваться на цветовой гамме вашего сайта в целом или на оттенке конкретных кнопок или ссылок, убедитесь, что все работает так, как должно. Убедитесь, что ссылки не повреждены, страницы продуктов обновлены, а подписки по электронной почте готовы к работе.
И вот почему: даже самого красивого веб-сайта или продукта с идеальным выбором цветов будет недостаточно, чтобы удержать посетителей, если они не смогут найти то, что ищут.
2. Используйте естественное вдохновение.
После того, как работа вашего сайта наладится, пора приступать к выбору цветов.
Не знаете, что выглядит хорошо? Посмотрите снаружи. Природа — лучший пример цветов, которые дополняют друг друга — от зеленых стеблей и ярких цветков цветущих растений до лазурного неба и белых облаков — вы не ошибетесь, выбрав контекст из естественных цветов и сочетаний.
3. Создайте настроение для своей цветовой схемы.
Имея в виду несколько цветовых вариантов, подумайте, какое настроение вы хотите создать с помощью цветовой схемы. Если страсть и энергия являются вашими приоритетами, больше склоняйтесь к красному или яркому желтому цвету. Если вы хотите создать ощущение умиротворения или спокойствия, отдайте предпочтение более светлым голубым и зеленым цветам.
Также стоит подумать о негативном. Это связано с тем, что негативное пространство — либо черное, либо белое — может помочь вашему дизайну не казаться слишком загроможденным цветом.
4. Учитывайте цветовой контекст.
Также стоит учитывать, как воспринимаются цвета на контрасте.
На изображении ниже середина каждого из кругов имеет одинаковый размер, форму и цвет. Единственное, что меняется, это цвет фона.
Тем не менее, средние круги кажутся мягче или ярче в зависимости от контрастного цвета позади них. Вы можете даже заметить изменение движения или глубины только на основе одного изменения цвета.
Это потому, что то, как мы используем два цвета вместе, меняет наше восприятие. Итак, когда вы выбираете цвета для своего графического дизайна, подумайте о том, какой контраст вы хотите получить во всем дизайне.
Например, если вы создаете простую гистограмму, вам нужен темный фон с темными полосами? Возможно нет. Скорее всего, вы захотите создать контраст между полосами и самим фоном, поскольку хотите, чтобы ваши зрители сосредоточились на полосах, а не на фоне.
5. Обратитесь к цветовому кругу.
Далее рассмотрите свой цветовой круг и упомянутые выше схемы. Выберите несколько различных цветовых комбинаций, используя такие схемы, как монохромный, дополнительный и триадный, чтобы увидеть, что выделяется.
Здесь цель состоит не в том, чтобы с первой попытки подобрать правильные цвета и создать идеальный дизайн, а в том, чтобы понять, какая схема естественным образом резонирует с вашим личным восприятием и внешним видом вашего сайта.
Вы также можете обнаружить, что выбранные вами схемы, которые теоретически выглядят хорошо, не работают с дизайном вашего сайта. Это часть процесса — метод проб и ошибок поможет вам найти цветовую палитру, которая подчеркнет ваш контент и улучшит взаимодействие с пользователем.
6. Используйте правило 60-30-10.
Часто используемое в домашнем дизайне правило 60-30-10 также полезно для дизайна веб-сайтов или приложений. Идея состоит в том, чтобы использовать три цвета: основной цвет для 60% вашего дизайна, дополнительный цвет для 30% вашего дизайна и акцентный цвет для последних 10%.
Хотя это не точные цифры, они помогают придать вашему сайту ощущение пропорции и баланса, предоставляя основной цвет с дополнительными и акцентными цветами, которые работают вместе.
7. Проектирование нескольких проектов.
Спроектируйте и примените несколько цветовых дизайнов к своему веб-сайту и посмотрите, какие из них выделяются. Затем сделайте шаг назад, подождите несколько дней и снова проверьте, не изменились ли ваши избранные.
И вот почему: хотя многие дизайнеры приходят с видением того, что они хотят видеть и что выглядит хорошо, готовый продукт на цифровых экранах часто отличается от физических цветовых кругов — то, что казалось идеальным дополнением или идеальным цветовым акцентом, может закончиться. выглядит тусклым или устаревшим.
Не бойтесь набрасывать, просматривать, набрасывать снова и выбрасывать то, что не работает — цвет, как и создание веб-сайта, — это постоянно развивающаяся форма искусства.
Проще говоря? Практика делает совершенным. Чем больше вы играете с цветом и практикуете дизайн, тем лучше у вас получается. Никто не создает свой шедевр с первого раза.
Инструменты для работы с цветом
Существует много теоретической и практической информации для понимания того, какие цвета лучше всего сочетаются друг с другом и почему. Но когда дело доходит до фактической задачи выбора цветов во время проектирования, всегда полезно иметь инструменты, которые помогут вам выполнить работу быстро и легко.
К счастью, существует ряд инструментов, которые помогут вам найти и выбрать цвета для ваших рисунков.
Adobe Color
Adobe Color (ранее Adobe Kuler) — один из моих любимых инструментов для работы с цветом при создании чего-либо — будь то инфографика или просто круговая диаграмма.
Этот бесплатный онлайн-инструмент позволяет быстро создавать цветовые схемы на основе цветовых структур, описанных ранее в этом посте. После того, как вы выбрали цвета в желаемой схеме, вы можете скопировать и вставить коды HEX или RGB в любую программу, которую вы используете.
Он также содержит сотни готовых цветовых схем, которые вы можете изучить и использовать в своих собственных проектах. Если вы являетесь пользователем Adobe, вы можете легко сохранять свои темы в своей учетной записи.
Цветовая шкала Illustrator
Я провожу много времени в Adobe Illustrator, и одной из моих наиболее часто используемых функций является цветовая шкала. Справочник цветов позволяет вам выбрать один цвет, и он автоматически сгенерирует для вас пятицветную схему. Это также даст вам ряд оттенков и оттенков для каждого цвета в схеме.
Если вы переключите свой основной цвет, цветовая шкала переключит соответствующие цвета в этой схеме. Поэтому, если вы выбрали дополнительную цветовую схему с основным синим цветом, как только вы переключите основной цвет на красный, дополнительный цвет также переключится с оранжевого на зеленый.
Как и Adobe Color, цветовая шкала имеет несколько предустановленных режимов для выбора нужной цветовой схемы. Это поможет вам выбрать правильный стиль цветовой схемы в программе, которую вы уже используете.
После того, как вы создали нужную цветовую схему, вы можете сохранить эту схему в модуле «Цветовые темы», чтобы использовать ее в своем проекте или в будущем.
Предустановленные направляющие цветов
Если вы не являетесь пользователем Adobe, вы, вероятно, хотя бы раз использовали продукты Microsoft Office. Все продукты Office имеют предустановленные цвета, которые можно использовать и экспериментировать для создания цветовых схем. PowerPoint также имеет ряд предустановок цветовых схем, которые вы можете использовать, чтобы черпать вдохновение для своих проектов.
Расположение цветовых схем в PowerPoint зависит от того, какую версию вы используете, но как только вы найдете цветовые «темы» вашего документа, вы можете открыть настройки и найти коды RGB и HEX для используемых цветов.
Затем вы можете скопировать и вставить эти коды, чтобы использовать их в любой программе, которую вы используете для проектирования.
Поиск правильной цветовой схемы
Насколько я знаю, в этом посте много теории. Но когда дело доходит до выбора цвета, понимание теории цвета может творить чудеса с тем, как вы на самом деле используете цвет. Это может упростить создание фирменных визуальных элементов, особенно при использовании шаблонов дизайна, в которых можно настраивать цвета.

Не забудьте поделиться этим постом!
Color — Foundations — Atlassian Design System
Используйте сфокусированные, осмысленные цвета, чтобы точно определить, что нужно видеть людям. Мы стремимся соблюдать стандартные коэффициенты контрастности AA Руководства по обеспечению доступности веб-контента.
Для этого выберите основные, дополнительные и расширенные цвета, которые обеспечивают удобство использования, обеспечивая достаточный цветовой контраст между элементами, чтобы люди с плохим зрением могли видеть и использовать наши продукты.
Основная палитра
Наша основная палитра состоит из нейтральных, белых и синих тонов, чтобы придать смелости нашему бренду, и логически используется в продуктах и маркетинге, чтобы направлять взгляд и выделять важные детали. Мы приправляем более теплыми, второстепенными цветами палитры, чтобы смягчить впечатление и придать уверенности и оптимизма.
Мы используем синий (B400) для основных действий, кнопок, текстовых ссылок, для индикации прогресса и представления аутентификации. Нейтральный (N800) используется в основном для основного текста и заголовков, а белый (N0) используется для фона страницы.
Загрузите наши цветовые палитры.
NAME
B400 — Pacific bridge
HEX
#0052CC
RGB
0, 82, 204
NAME
N800 — Squid ink
HEX
#172B4D
RGB
23, 43 , 77
ИМЯ
N0 — Doctor
HEX
#FFFFFF
RGB
255, 255, 255
Наша вторичная палитра содержит многообразие вторичных цветов и интересные вещи
2 9. Мы чаще полагаемся на эти цвета, когда известность бренда высока, или на наших собственных свойствах, когда мы контролируем окружающую среду. При использовании в сочетании с нашей основной палитрой эти цвета делают каждый момент брендинговым, а каждое взаимодействие информативным.
Наша дополнительная палитра состоит из красного (R300), желтого (Y300), зеленого (G300), бирюзового (T300) и фиолетового (P300). Каждый цвет выбран намеренно, чтобы обеспечить значимую обратную связь в наших продуктах. Дополнительные сведения см. в приведенных ниже рекомендациях по семантическим цветам.
Название
R300 — Сюрприз мака
HEX
#FF5630
RGB
255, 86, 48
Имя
Y300 — Золотое государство
HEX
#FFAB00
0002 RGB
255, 171, 0
NAME
G300 — Fine pine
HEX
#36B37E
RGB
54, 179, 126
NAME
T300 — Tamarama
HEX
#00B8D9
RGB
0, 184, 217
Имя
P300 — DA ‘JUCE
HEX
#6554C0
RGB
101, 84, 192
9121 EXTED PATETTE используемые оттенки и оттенки каждого цвета в палитре. Все они пронумерованы для удобства поиска. Использование этих цветов зависит от точки касания, но они удобны для иллюстраций и компонентов продукта.
Нейтральные оттенки
Нейтральные оттенки имеют различную степень насыщенности, что обеспечивает соответствующий уровень теплоты в маркетинге и продукте. Обычно они используются для текста и тонкого фона, когда мы не хотим привлекать слишком много внимания к конкретной точке взаимодействия или передавать информацию, такую как «сделать» или «отключено».
Темные нейтральные цвета
Темные нейтральные цвета очень эффективны для создания контраста и поэтому являются основным цветом, используемым в типографике. Иногда на иллюстрациях встречаются темные нейтральные тона, но они редко доминируют в палитре. Некоторыми исключениями являются элементы пользовательского интерфейса и иллюстрации темного режима.
NAME
N900 — Slate
HEX
#091E42
RGB
9, 30, 66
NAME
N800 — Squid ink
HEX
#172B4D
RGB
23, 43, 77
NAME
N700 — Snorlax
HEX
#253858
RGB
37, 56, 88
NAME
N600 — Pet rock
HEX
#344563
RGB
52, 69 , 99
NAME
N500 — McFanning
HEX
#42526E
RGB
66, 82, 110
Средние нейтральные
карты для создания диалоговых окон средних и нейтральных цветов, таких как модальные диалоги. Избегайте средних нейтральных цветов в качестве фоновых цветов, потому что обычно недостаточно контраста, чтобы соответствовать стандарту AA. Средние нейтральные оттенки от N400 до N200 можно использовать для тонкого текста и значков на светло-нейтральном фоне. Вы можете найти стиль текста, используя эти цвета в Типографике.
NAME
N400 — Concrete jungle
HEX
#505F79
RGB
80, 95, 121
NAME
N300 — Clooney
HEX
#5E6C84
RGB
94, 108, 132
NAME
N200 — Bling bling
HEX
#6B778C
RGB
107, 119, 140
NAME
N100 — Humboldt fog
HEX
#7A869A
RGB
122, 134, 154
NAME
N90 — Meredith
HEX
#8993A4
RGB
137, 147, 164
NAME
N80 — Spooky ghost
HEX
#97A0AF
RGB
151, 160, 175
NAME
N70 — Blanche
HEX
#A5ADBA
RGB
165, 173, 186
NAME
N60 — Sentinel
HEX
#B3BAC5
RGB
179, 186, 197
Светлые нейтральные тона
Мы используем светлые нейтральные цвета в качестве тонкого фона для обозначения различных интерактивных состояний, таких как наведение и отключение, или просто для привлечения вторичного внимания к компоненту. Вы найдете светлые нейтральные цвета в кнопках, текстовых полях, тегах и иллюстрациях.
Светлые нейтральные оттенки помогают компенсировать содержимое преимущественно белого макета без потери теплоты и чистоты, поэтому их часто используют в качестве фонового цвета. Их тонкость позволяет им быть полезными в создании тонких теней или глубины в иллюстрации, а также они могут быть полезны в изображении иллюстративных объектов, которые обычно сделаны из металлических материалов, таких как оборудование, или атмосферных элементов в иллюстрациях, таких как облака.
NAME
N50 — Karl
HEX
#C1C7D0
RGB
193, 199, 208
NAME
N40 — Jolly fun time
HEX
#DFE1E6
RGB
223, 225 , 230
NAME
N30 — Northeast snow
HEX
#EBECF0
RGB
235, 236, 240
NAME
N20 — Gram’s hair
HEX
#F4F5F7
RGB
244, 245, 247
NAME
N10 — Wash me
HEX
#FAFBFC
RGB
250, 251, 252
NAME
N0 — Doctor
HEX
#FFFFFF
RGB
255, 255, 255
Красный в основном используется для фона в сообщениях и состояниях ошибок, чтобы привлечь внимание к важной информации или действиям, которые являются разрушительными или блокируют рабочий процесс. Вы найдете красный цвет, используемый в таких компонентах, как леденцы, баннеры, флаговые сообщения, кнопки, иллюстрации и типографика.
NAME
R500 — Dragon’s blood
HEX
#BF2600
RGB
191, 38, 0
NAME
R400 — Red dirt
HEX
#DE350B
RGB
222, 53 , 11
NAME
R300 — Poppy surprise
HEX
#FF5630
RGB
255, 86, 48
NAME
R200 — Salmon sashimi
HEX
#FF7452
RGB
255, 116, 82
NAME
R100 — Alexandria
HEX
#FF8F73
RGB
255, 143, 115
NAME
R75 — Bondi sunburn
HEX
#FFBDAD
RGB
255, 189, 173
Название
R50 — Rosie
HEX
#FFEBE6
RGB
255, 235, 230
Желтый
Желтый указывает на то, что прогресс. Желтый чувствует себя как дома в таких компонентах, как леденцы, баннеры, сообщения с флажками и кнопки.
NAME
Y500 — Debrito
HEX
#FF8B00
RGB
255, 139, 0
NAME
Y400 — Cheezy blasters
HEX
#FF991F
RGB
255, 153, 31
NAME
Y300 — Golden state
HEX
#FFAB00
RGB
255, 171, 0
NAME
Y200 — Pub mix
HEX
#FFC400
RGB
255, 196, 0
NAME
Y100 — Cowbell
HEX
#FFE380
RGB
255, 227, 128
NAME
Y75 — Dandelion whisper
HEX
#FFF0B3
RGB
255 , 240, 179
ИМЯ
Y50 — Джеймс Блонд
HEX
#FFFAE6
RGB
255, 250, 230
Мы используем зеленый цвет, чтобы отметить победу или отметить успех. Зеленый хорошо сочетается с леденцами, значками, переключателями, сообщениями и иллюстрациями. Имейте в виду, что наш зеленый цвет очень яркий, что может вызвать напряжение глаз в больших дозах. Однако из-за этой яркости он также может хорошо выделяться среди многих других элементов на странице, поэтому это хороший выбор для призывов к действию и кнопок в маркетинге.
NAME
G500 — Keen green
HEX
#006644
RGB
0, 102, 68
NAME
G400 — Slime
HEX
#00875A
RGB
0, 135, 90
NAME
G300 — Fine pine
HEX
#36B37E
RGB
54, 179, 126
NAME
G200 — Green tea
HEX
#57D9A3
RGB
87, 217, 163
NAME
G100 — Cloverleaf
HEX
#79F2C0
RGB
121, 242, 192
NAME
G75 — Mintie
HEX
#ABF5D1
RGB
171, 245, 209
НАЗВАНИЕ
G50 — Запах
HEX
#E3FCEF
RGB
227, 252, 239
Синий цвет используется, чтобы помочь нам усилить наше присутствие в маркетинге и унифицировать точки соприкосновения с нашим продуктом. Он резкий и ясный, что делает его смелым и оптимистичным, и в то же время он мягкий и привлекательный, отдавая дань уважения практичному человеческому происхождению Atlassian. Он лежит в основе любого общения и должен использоваться преднамеренно, но с осторожностью. Как и для всех цветов в палитре, вы должны помнить о цветовых значениях, указанных в этих рекомендациях. При правильном и точном использовании цвета оказывают невероятное воздействие.
Синий используется для обозначения аутентификации, подключения или прогресса. Вы найдете синий цвет в сообщениях, кнопках, навигации, леденцах, значках, вкладках и трекере прогресса.
NAME
B500 — Chore coat
HEX
#0747A6
RGB
7, 71, 166
NAME
B400 — Pacific bridge
HEX
#0052CC
RGB
0, 82 , 204
НАИМЕНОВАНИЕ
B300 — Взрыв натрия
HEX
#0065FF
RGB
0, 101, 255
NAME
B200 — Coogee
HEX
#2684FF
RGB
38, 132, 255
NAME
B100 — Arvo breeze
HEX
#4C9AFF
RGB
76, 154, 255
NAME
B75 — Schwag
HEX
#B3D4FF
RGB
179, 212, 255
NAME
B50 — Pixie пыль
HEX
#DEEBFF
RGB
222, 235, 255
Бирюзовый обычно можно найти на иллюстрациях или в качестве акцентного цвета для таких компонентов, как ярлыки.
NAME
T500 — Shabby chic
HEX
#008DA6
RGB
0, 141, 166
NAME
T400 — Prom dress
HEX
#00A3BF
RGB
0, 163 , 191
ИМЯ
T300 — Тамарама
HEX
#00B8D9
RGB
0, 184, 217
NAME
T200 — Mermaid net
HEX
#00C7E6
RGB
0, 199, 230
NAME
T100 — Hairy fairy
HEX
#79E2F2
RGB
121, 226, 242
NAME
T75 — Arctic chill
HEX
#B3F5FF
RGB
179, 245, 255
NAME
T50 — диван Грамма
HEX
#E6FCFF
RGB
230, 252, 255
Фиолетовый
Фиолетовый указывает на помощь и поддержку и используется в центре внимания, кнопках, сообщениях, леденцах и выносках изображений. Он также используется для отображения посещенных ссылок в веб-типографике и в качестве акцентного цвета на иллюстрациях. Тем не менее, его лучше всего использовать в небольших дозах для иллюстрации, так как иногда он может конфликтовать с синим.
ИМЯ
P500 — Принц
HEX
#403294
RGB
64, 50, 148
NAME
P400 — Snozzberry
HEX
#5243AA
RGB
82, 67, 170
NAME
P300 — Da’ juice
HEX
# 6554C0
RGB
101, 84, 192
Название
P200 — Pastell #998dd9
RGB
153, 141, 217
Имя
P75 — Phantom Tist
HEX
#C0B6F2
RGB
192, 182, 242
ИМЯ
P500002
9000 2
.
#EAE6FF
RGB
234, 230, 255
Семантический цвет
Следующие рекомендации определяют, когда использовать цвета в продукте. Семантический цвет помогает пользователям находить людей, определять статус, видеть действия, находить справку и понимать следующие шаги.