Безопасные цвета для Веб. Таблица из 216 цветов, рекомендуемых для экранного дизайна — ColorScheme.Ru

· Инструмент для подбора цветов и генерации цветовых схем ·

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

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

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

Безопасные цвета были выведены математически, а не потому, что они кому-то больше пришлись по душе. Для получения безопасного цвета из Красного, Зелёного и Синего, нужно использовать только данные десятичные значения: 0, 51, 102, 153, 204, 255 — и никакие другие. Каждое из трёх шестнадцатеричных значений не должно отличаться от 00, 33, 66, 99, CC, FF.

Таблица Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.

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

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

Все стандартные цвета – их названия, HEX коды и RGB значения.

1

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

Черный	Black	#000000	rgb(0, 0, 0)
Серый	Gray	#808080	rgb(128, 128, 128)
Серебряный	Silver	#c0c0c0	rgb(192, 192, 192)
Белый	White	#ffffff	rgb(255, 255, 255)
Фуксия, Маджента	Fuchsia, Magenta	#ff00ff	rgb(255, 0, 255)
Пурпурный	Purple	#800080	rgb(128, 0, 128)
Красный	Red	#ff0000	rgb(255, 0, 0)
Коричнево-малиновый	Maroon	#800000	rgb(128, 0, 0)
Жёлтый	Yellow	#ffff00	rgb(205, 92, 92)
Оливковый	Olive	#808000	rgb(240, 128, 128)
Лайм	Lime	#00ff00	rgb(250, 128, 114)
Зелёный	Green	#008000	rgb(233, 150, 122)
Цвет морской волны	Aqua	#00ffff	rgb(205, 92, 92)
Окраски птицы чирок	Teal	#008080	rgb(240, 128, 128)
Синий	Blue	#0000ff	rgb(250, 128, 114)
Форма морских офицеров	Navy	#000080	rgb(233, 150, 122)

2

Серые тона

Дымчато-белый	WhiteSmoke	#f5f5f5	rgb(245, 245, 245)
Гейнсборо	Gainsboro	#dcdcdc	rgb(220, 220, 220)
Светло серый	LightGrey, LightGray	#d3d3d3	rgb(211, 211, 211)
Серебряный	Silver	#c0c0c0	rgb(192, 192, 192)
Темно серый	DarkGray, DarkGrey	#a9a9a9	rgb(169, 169, 169)
Серый	Gray, Grey	#808080	rgb(128, 128, 128)
Тусклый серый	DimGray, DimGrey	#696969	rgb(105, 105, 105)
Светлый аспидно-серый	LightSlateGray, LightSlateGrey	#778899	rgb(119, 136, 153)
Серый шифер	SlateGray, SlateGrey	#708090	rgb(112, 128, 144)
Аспидно-серый	DarkSlateGray, DarkSlateGrey	#2f4f4f	rgb(47, 79, 79)
Чёрный	Black	#000000	rgb(0, 0, 0)

3

Красные тона

Светло-коралловый	LightCoral	#f08080	rgb(240, 128, 128)
Лососевый	Salmon	#fa8072	rgb(250, 128, 114)
Тёмно-лососёвый	DarkSalmon	#e9967a	rgb(233, 150, 122)
Светло-лососёвый	LightSalmon	#ffa07a	rgb(255, 160, 122)
Малиновый	Crimson	#dc143c	rgb(220, 20, 60)
Красный	Red	#ff0000	rgb(255, 0, 0)
Индийский красный	IndianRed	#cd5c5c	rgb(205, 92, 92)
Кирпичный	FireBrick	#b22222	rgb(178, 34, 34)
Коричнево-бордовый	Brown	#a52a2a	rgb(165, 42, 42)
Тёмно-красный	DarkRed	#8b0000	rgb(139, 0, 0)
Коричнево-малиновый	Maroon	#800000	rgb(128, 0, 0)

4

Оранжевые тона

Цвет морской раковины	Seashell	#fff5ee	rgb(255, 245, 238)
Бежевый	Beige	#f5f5dc	rgb(245, 245, 220)
Старое кружево	OldLace	#fdf5e6	rgb(253, 245, 230)
Цветочный белый	FloralWhite	#fffaf0	rgb(255, 250, 240)
Белый антик	AntiqueWhite	#faebd7	rgb(250, 235, 215)
Льняной	Linen	#faf0e6	rgb(250, 240, 230)
Очищенный миндаль	BlanchedAlmond	#ffebcd	rgb(255, 235, 205)
Бисквитный	Bisque	#ffe4c4	rgb(255, 228, 196)
Белый навахо	NavajoWhite	#ffdead	rgb(255, 222, 173)
Пшеничный	Wheat	#f5deb3	rgb(245, 222, 179)
Плотная древесина	BurlyWood	#deb887	rgb(222, 184, 135)
Цвет загара	Tan	#d2b48c	rgb(210, 180, 140)
Красный песок	SandyBrown	#f4a460	rgb(244, 164, 96)
Золотисто-березовый	Goldenrod	#daa520	rgb(218, 165, 32)
Тёмный золотарник	DarkGoldenRod	#b8860b	rgb(184, 134, 11)
Перу	Peru	#cd853f	rgb(205, 133, 63)
Шоколадный	Chocolate	#d2691e	rgb(210, 105, 30)
Кожаного седла для лошади	SaddleBrown	#8b4513	rgb(139, 69, 19)
Сиена	Sienna	#a0522d	rgb(160, 82, 45)
Светлый сомон	LightSalmon	#ffa07a	rgb(255, 160, 122)
Коралловый	Coral	#ff7f50	rgb(255, 127, 80)
Томатный	Tomato	#ff6347	rgb(255, 99, 71)
Оранжево-красный	OrangeRed	#ff4500	rgb(255, 69, 0)
Тёмно-оранжевый	DarkOrange	#ff8c00	rgb(255, 140, 0)
Оранжевый	Orange	#ffa500	rgb(255, 165, 0)

5

Жёлтые тона

Цвет пестиков неспелой кукурузы	Cornsilk	#fff8dc	rgb(255, 248, 220)
Слоновая кость	Ivory	#fffff0	rgb(255, 255, 240)
Светло-жёлтый	LightYellow	#ffffe0	rgb(255, 255, 224)
Лимонно-кремовый	LemonChiffon	#fffacd	rgb(255, 250, 205)
Светло-жёлтый золотистый	LightGoldenrodYellow	#fafad2	rgb(250, 250, 210)
Побег папайи	PapayaWhip	#ffefd5	rgb(255, 239, 213)
Мокасиновый	Moccasin	#ffe4b5	rgb(255, 228, 181)
Тёмно-персиковый	PeachPuff	#ffdab9	rgb(255, 218, 185)
Бледно-золотистый	PaleGoldenrod	#eee8aa	rgb(238, 232, 170)
Светлый хаки	Khaki	#f0e68c	rgb(240, 230, 140)
Тёмный хаки	DarkKhaki	#bdb76b	rgb(189, 183, 107)
Жёлтый	Yellow	#ffff00	rgb(255, 255, 0)
Золотой	Gold	#ffd700	rgb(255, 215, 0)

6

Зелёные тона

Медовая роса	Honeydew	#f0fff0	rgb(240, 255, 240)
Мятно-кремовый	MintCream	#f5fffa	rgb(245, 255, 250)
Зелёно-жёлтый	GreenYellow	#adff2f	rgb(173, 255, 47)
Шартрёз	Chartreuse	#7fff00	rgb(127, 255, 0)
Зелёная лужайка	LawnGreen	#7cfc00	rgb(124, 252, 0)
Лайм	Lime	#00ff00	rgb(0, 255, 0)
Лаймово-зелёный	LimeGreen	#32cd32	rgb(50, 205, 50)
Бледный зелёный	PaleGreen	#98fb98	rgb(152, 251, 152)
Светло-зелёный	LightGreen	#90ee90	rgb(144, 238, 144)
Умеренный весенний зелёный	MediumSpringGreen	#00fa9a	rgb(0, 250, 154)
Весенне-зелёный	SpringGreen	#00ff7f	rgb(0, 255, 127)
Умеренно-зелёное море	MediumSeaGreen	#3cb371	rgb(60, 179, 113)
Зелёное море	SeaGreen	#2e8b57	rgb(46, 139, 87)
Лесной зелёный	ForestGreen	#228b22	rgb(34, 139, 34)
Зелёный	Green	#008000	rgb(0, 128, 0)
Очень тёмный лимонный зеленый	DarkGreen	#006400	rgb(0, 100, 0)
Жёлто-зелёный	YellowGreen	#9acd32	rgb(154, 205, 50)
Нежно-оливковый	OliveDrab	#6b8e23	rgb(107, 142, 35)
Оливковый	Olive	#808000	rgb(128, 128, 0)
Тёмный оливково-зеленый	DarkOliveGreen	#556b2f	rgb(85, 107, 47)
Умеренный аквамариновый	MediumAquamarine	#66cdaa	rgb(102, 205, 170)
Тёмное зелёное море	DarkSeaGreen	#8fbc8f	rgb(143, 188, 143)
Светлое зелёное море	LightSeaGreen	#20b2aa	rgb(32, 178, 170)
Тёмный циан	DarkCyan	#008b8b	rgb(0, 139, 139)
Окраски птицы чирок	Teal	#008080	rgb(0, 128, 128)

7

Синие тона

Небесная лазурь	Azure	#f0ffff	rgb(240, 255, 255)
Синяя Элис	AliceBlue	#f0f8ff	rgb(240, 248, 255)
Светлый циан	LightCyan	#e0ffff	rgb(224, 255, 255)
Циан, цвет морской волны	Cyan, Aqua	#00ffff	rgb(0, 255, 255)
Аквамариновый	Aquamarine	#7fffd4	rgb(127, 255, 212)
Светло-бирюзовый	Turquoise	#40e0d0	rgb(64, 224, 208)
Умеренно-бирюзовый	MediumTurquoise	#48d1cc	rgb(72, 209, 204)
Тёмно-бирюзовый	DarkTurquoise	#00ced1	rgb(0, 206, 209)
Бледно-синий	PaleTurquoise	#afeeee	rgb(175, 238, 238)
Пыльный голубой	PowderBlue	#b0e0e6	rgb(176, 224, 230)
Светлый синий	LightBlue	#add8e6	rgb(173, 216, 230)
Светлый стальной синий	LightSteelBlue	#b0c4de	rgb(176, 196, 222)
Городское небо	SkyBlue	#87ceeb	rgb(135, 206, 235)
Светло-голубой	LightSkyBlue	#87cefa	rgb(135, 206, 250)
Морозное небо	DeepSkyBlue	#00bfff	rgb(0, 191, 255)
Защитно-синий	DodgerBlue	#1e90ff	rgb(30, 144, 255)
Васильковый	CornflowerBlue	#6495ed	rgb(100, 149, 237)
Умеренный аспидно-синий	MediumSlateBlue	#7b68ee	rgb(123, 104, 238)
Кадетский синий	CadetBlue	#5f9ea0	rgb(95, 158, 160)
Синяя сталь	SteelBlue	#4682b4	rgb(70, 130, 180)
Королевский синий	RoyalBlue	#4169e1	rgb(65, 105, 225)
Синий	Blue	#0000ff	rgb(0, 0, 255)
Средний синий	MediumBlue	#0000cd	rgb(0, 0, 205)
Тёмный ультрамариновый	DarkBlue	#00008b	rgb(0, 0, 139)
Формы морских офицеров	Navy	#000080	rgb(0, 0, 128)
Полуночный чёрный	MidnightBlue	#191970	rgb(25, 25, 112)
Аспидно-синий	SlateBlue	#6a5acd	rgb(106, 90, 205)
Тёмный аспидно-синий	DarkSlateBlue	#483d8b	rgb(72, 61, 139)

8

Фиолетовые тона

Призрачно-белый	GhostWhite	#f8f8ff	rgb(248, 248, 255)
Лаванда	Lavender	#e6e6fa	rgb(230, 230, 250)
Чертополох	Thistle	#d8bfd8	rgb(216, 191, 216)
Светлая слива	Plum	#dda0dd	rgb(221, 160, 221)
Розово-фиолетовый	Violet	#ee82ee	rgb(238, 130, 238)
Орхидея	Orchid	#da70d6	rgb(218, 112, 214)
Фуксия, Маджента	Fuchsia, Magenta	#ff00ff	rgb(255, 0, 255)
Умеренный фиолетово-красный	MediumVioletRed	#c71585	rgb(199, 21, 133)
Умеренный цвет орхидеи	MediumOrchid	#ba55d3	rgb(186, 85, 211)
Умеренный пурпурный	MediumPurple	#9370db	rgb(147, 112, 219)
Сине-лиловый	BlueViolet	#8a2be2	rgb(138, 43, 226)
Тёмно-фиолетовый	DarkViolet	#9400d3	rgb(148, 0, 211)
Тёмная орхидея	DarkOrchid	#9932cc	rgb(153, 50, 204)
Тёмный маджента	DarkMagenta	#8b008b	rgb(139, 0, 139)
Пурпурный	Purple	#800080	rgb(128, 0, 128)
Индиго	Indigo	#4b0082	rgb(75, 0, 130)

9

Розовые тона

Белоснежный	Snow	#fffafa	rgb(255, 250, 250)
Розово-лавандовый	LavenderBlush	#fff0f5	rgb(255, 240, 245)
Тускло-розовый	MistyRose	#ffe4e1	rgb(255, 228, 225)
Розовый	Pink	#ffc0cb	rgb(255, 192, 203)
Светло-розовый	LightPink	#ffb6c1	rgb(255, 182, 193)
Ярко-розовый	HotPink	#ff69b4	rgb(255, 105, 180)
Глубокий розовый	DeepPink	#ff1493	rgb(255, 20, 147)
Лиловый	PaleVioletRed	#db7093	rgb(219, 112, 147)
Розово-коричневый	RosyBrown	#bc8f8f	rgb(188, 143, 143)

HTML цвета

Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:

Конвертер цветов

Конвертер цветов позволяет преобразовать (конвертировать) RGB цвета (аббревиатура английских слов red, green, blue — красный, зелёный, синий) в шестнадцатеричные (HEX) значения, RGB цвета в формат HSL (от англ. hue, saturation, lightness (intensity) — тон, насыщенность и осветленность) и обратно HEX значения в RGB и HSL цвета.

Предопределенные имена цветов

Красные

Имя цвета	HEX	RGB
IndianRed	#CD5C5C	rgb(205, 92, 92)
LightCoral	#F08080	rgb(240, 128, 128)
Salmon	#FA8072	rgb(250, 128, 114)
DarkSalmon	#E9967A	rgb(233, 150, 122)
LightSalmon	#FFA07A	rgb(255, 160, 122)
Crimson	#DC143C	rgb(220, 20, 60)
Red	#FF0000	rgb(255, 0, 0)
FireBrick	#B22222	rgb(178, 34, 34)
DarkRed	#8B0000	rgb(139, 0, 0)

Жёлтые

Имя цвета	HEX	RGB
Gold	#FFD700	rgb(255, 215, 0)
Yellow	#FFFF00	rgb(255, 255, 0)
LightYellow	#FFFFE0	rgb(255, 255, 224)
LemonChiffon	#FFFACD	rgb(255, 250, 205)
LightGoldenrodYellow	#FAFAD2	rgb(250, 250, 210)
PapayaWhip	#FFEFD5	rgb(255, 239, 213)
Moccasin	#FFE4B5	rgb(255, 228, 181)
PeachPuff	#FFDAB9	rgb(255, 218, 185)
PaleGoldenrod	#EEE8AA	rgb(238, 232, 170)
Khaki	#F0E68C	rgb(240, 230, 140)
DarkKhaki	#BDB76B	rgb(189, 183, 107)

Оранжевые

Имя цвета	HEX	RGB
Coral	#FF7F50	rgb(255, 127, 80)
Tomato	#FF6347	rgb(255, 99, 71)
OrangeRed	#FF4500	rgb(255, 69, 0)
DarkOrange	#FF8C00	rgb(255, 140, 0)
Orange	#FFA500	rgb(255, 165, 0)

Розовые

Имя цвета	HEX	RGB
Pink	#FFC0CB	rgb(255, 192, 203)
LightPink	#FFB6C1	rgb(255, 182, 193)
HotPink	#FF69B4	rgb(255, 105, 180)
DeepPink	#FF1493	rgb(255, 20, 147)
MediumVioletRed	#C71585	rgb(199, 21, 133)
PaleVioletRed	#DB7093	rgb(219, 112, 147)

Фиолетовые

Имя цвета	HEX	RGB
Lavender	#E6E6FA	rgb(230, 230, 250)
Thistle	#D8BFD8	rgb(216, 191, 216)
Plum	#DDA0DD	rgb(221, 160, 221)
Violet	#EE82EE	rgb(238, 130, 238)
Orchid	#DA70D6	rgb(218, 112, 214)
Fuchsia(Magenta)	#FF00FF	rgb(255, 0, 255)
MediumOrchid	#BA55D3	rgb(186, 85, 211)
MediumPurple	#9370DB	rgb(147, 112, 219)
BlueViolet	#8A2BE2	rgb(138, 43, 226)
DarkViolet	#9400D3	rgb(148, 0, 211)
DarkOrchid	#9932CC	rgb(153, 50, 204)
DarkMagenta	#8B008B	rgb(139, 0, 139)
Purple	#800080	rgb(128, 0, 128)
Indigo	#4B0082	rgb(75, 0, 130)
SlateBlue	#6A5ACD	rgb(106, 90, 205)
DarkSlateBlue	#483D8B	rgb(72, 61, 139)

Коричневые

Имя цвета	HEX	RGB
Cornsilk	#FFF8DC	rgb(255, 248, 220)
BlanchedAlmond	#FFEBCD	rgb(255, 235, 205)
Bisque	#FFE4C4	rgb(255, 228, 196)
NavajoWhite	#FFDEAD	rgb(255, 222, 173)
Wheat	#F5DEB3	rgb(245, 222, 179)
BurlyWood	#DEB887	rgb(222, 184, 135)
Tan	#D2B48C	rgb(210, 180, 140)
RosyBrown	#BC8F8F	rgb(188, 143, 143)
SandyBrown	#F4A460	rgb(244, 164, 96)
Goldenrod	#DAA520	rgb(218, 165, 32)
DarkGoldenrod	#B8860B	rgb(184, 134, 11)
Peru	#CD853F	rgb(205, 133, 63)
Chocolate	#D2691E	rgb(210, 105, 30)
SaddleBrown	#8B4513	rgb(139, 69, 19)
Sienna	#A0522D	rgb(160, 82, 45)
Brown	#A52A2A	rgb(165, 42, 42)
Maroon	#800000	rgb(128, 0, 0)

Синие

Имя цвета	HEX	RGB
Aqua(Cyan)	#00FFFF	rgb(0, 255, 255)
LightCyan	#E0FFFF	rgb(224, 255, 255)
PaleTurquoise	#AFEEEE	rgb(175, 238, 238)
Aquamarine	#7FFFD4	rgb(127, 255, 212)
Turquoise	#40E0D0	rgb(64, 224, 208)
MediumTurquoise	#48D1CC	rgb(72, 209, 204)
DarkTurquoise	#00CED1	rgb(0, 206, 209)
CadetBlue	#5F9EA0	rgb(95, 158, 160)
SteelBlue	#4682B4	rgb(70, 130, 180)
LightSteelBlue	#B0C4DE	rgb(176, 196, 222)
PowderBlue	#B0E0E6	rgb(176, 224, 230)
LightBlue	#ADD8E6	rgb(173, 216, 230)
SkyBlue	#87CEEB	rgb(135, 206, 235)
LightSkyBlue	#87CEFA	rgb(135, 206, 250)
DeepSkyBlue	#00BFFF	rgb(0, 191, 255)
DodgerBlue	#1E90FF	rgb(30, 144, 255)
CornflowerBlue	#6495ED	rgb(100, 149, 237)
MediumSlateBlue	#7B68EE	rgb(123, 104, 238)
RoyalBlue	#4169E1	rgb(65, 105, 225)
Blue	#0000FF	rgb(0, 0, 255)
MediumBlue	#0000CD	rgb(0, 0, 205)
DarkBlue	#00008B	rgb(0, 0, 139)
Navy	#000080	rgb(0, 0, 128)
MidnightBlue	#191970	rgb(25, 25, 112)

Зелёные

Имя цвета	HEX	RGB
GreenYellow	#ADFF2F	rgb(173, 255, 47)
Chartreuse	#7FFF00	rgb(127, 255, 0)
LawnGreen	#7CFC00	rgb(124, 252, 0)
Lime	#00FF00	rgb(0, 255, 0)
LimeGreen	#32CD32	rgb(50, 205, 50)
PaleGreen	#98FB98	rgb(152, 251, 152)
LightGreen	#90EE90	rgb(144, 238, 144)
MediumSpringGreen	#00FA9A	rgb(0, 250, 154)
SpringGreen	#00FF7F	rgb(0, 255, 127)
MediumSeaGreen	#3CB371	rgb(60, 179, 113)
SeaGreen	#2E8B57	rgb(46, 139, 87)
ForestGreen	#228B22	rgb(34, 139, 34)
Green	#008000	rgb(0, 128, 0)
DarkGreen	#006400	rgb(0, 100, 0)
YellowGreen	#9ACD32	rgb(154, 205, 50)
OliveDrab	#6B8E23	rgb(107, 142, 35)
Olive	#808000	rgb(128, 128, 0)
DarkOliveGreen	#556B2F	rgb(85, 107, 47)
MediumAquamarine	#66CDAA	rgb(102, 205, 170)
DarkSeaGreen	#8FBC8F	rgb(143, 188, 143)
LightSeaGreen	#20B2AA	rgb(32, 178, 170)
DarkCyan	#008B8B	rgb(0, 139, 139)
Teal	#008080	rgb(0, 128, 128)

Белые

Имя цвета	HEX	RGB
White	#FFFFFF	rgb(255, 255, 255)
Snow	#FFFAFA	rgb(255, 250, 250)
Honeydew	#F0FFF0	rgb(240, 255, 240)
MintCream	#F5FFFA	rgb(245, 255, 250)
Azure	#F0FFFF	rgb(240, 255, 255)
AliceBlue	#F0F8FF	rgb(240, 248, 255)
GhostWhite	#F8F8FF	rgb(248, 248, 255)
WhiteSmoke	#F5F5F5	rgb(245, 245, 245)
Seashell	#FFF5EE	rgb(255, 245, 238)
Beige	#F5F5DC	rgb(245, 245, 220)
OldLace	#FDF5E6	rgb(253, 245, 230)
FloralWhite	#FFFAF0	rgb(255, 250, 240)
Ivory	#FFFFF0	rgb(255, 255, 240)
AntiqueWhite	#FAEBD7	rgb(250, 235, 215)
Linen	#FAF0E6	rgb(250, 240, 230)
LavenderBlush	#FFF0F5	rgb(255, 240, 245)
MistyRose	#FFE4E1	rgb(255, 228, 225)

Серые

Имя цвета	HEX	RGB
Gainsboro	#DCDCDC	(220, 220, 220)
LightGray	#D3D3D3	rgb(211, 211, 211)
Silver	#C0C0C0	rgb(192, 192, 192)
DarkGray	#A9A9A9	rgb(169, 169, 169)
Gray	#808080	rgb(128, 128, 128)
DimGray	#696969	rgb(105, 105, 105)
LightSlateGray	#778899	rgb(119, 136, 153)
SlateGray	#708090	rgb(112, 128, 144)
DarkSlateGray	#2F4F4F	rgb(47, 79, 79)
Black	#000000	rgb(0, 0, 0)

Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции

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

Умение использовать цвета можно прокачивать до бесконечности. Это настоящая бездна возможностей для воздействия на человека.

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

Теория цвета

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

Можно разбить теорию цвета на три части:

Контраст

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

Цветовое колесо

Дополнение

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

Резонанс

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

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

BBC News

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

Эмоциональное восприятие цвета

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

На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

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

Красный

Эмоции и ассоциации: власть, важность, молодость.

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

Например, красный цвет очень подходит сайту No Way NSA, цель которого — предупреждать о предполагаемых угрозах.

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

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

Оранжевый

Эмоции и ассоциации: дружелюбие, энергия, уникальность.

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

Сайт Fanta

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

Жёлтый

Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).

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

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

Flash Media

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

Зелёный цвет

Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды.

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

Ameritrade

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

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

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

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

Отличный пример — агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия.

Van Vliet & Trap

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

Фиолетовый

Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

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

Cadbury

Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

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

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

Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.

Dream + Reach

Белый

Эмоции и ассоциации: чистота, простота, добродетель.

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

Сайт с работами Клоина Тошева

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

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

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

Awwwards

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

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

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

Dishoom

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

Цвет слоновой кости

Эмоции и ассоциации: комфорт, элегантность, простота.

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

Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.

Art in My Coffee

Цветовая гамма

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

Несмотря на то, что существует множество способов сочетать цвета, мы остановимся на трёх самых успешных и часто используемых.

Триада (тройная гармония, треугольник)

Триада

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

На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.

Двойная комплиментарная система

Двойная комплиментарная система

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

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

Flourish

Аналоги (последовательная система)

Аналоги

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

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

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

Blinksale

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

Инструменты-помощники для выбора цвета

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

1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
2. Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
3. Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.

А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.

Прямая зависимость между цветом и эмоциями

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

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

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

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

Вам знакома эта проблема? Вы хотите создать сайт, но понятия не имеете, какой цвет подобрать и как лучше сочетать цвета? Пробуете, что-то делать, но в итоге получается какая-то «абра-кадабра»? Хорошая новость! Благодаря этой статье Вы получите мощный и готовый инструмент по подбору цветов. Это действительно достойно Вашего внимания.

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

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

Не буду тянуть резину. Давайте начнем.

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

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

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

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

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

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

Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего. Эти градации — 00, 33, 66, 99, CC, FF. Над каждым цветом указаны значения RGB (для создания цвета в графическом редакторе или задания в CSS).

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

Смотрите также: