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

12.12.2018 alexxlab

Содержание

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

Когда было время 256-цветных мониторов применялась «безопасная палитра», конечно она применяется и сейчас. У безопасной палитры всего три главных цвета для смешивания — R G B и соответствуют значениям: 00, 33, 66, 99, CC, FF.
Вообще, цветовая палитра 6x6x6 является приоритетной при выборе цвета для фона или цвета шрифта.
Вашему вниманию представляется палитра «безопасных веб цветов», которые одинаково хорошо будут отображаться во всех браузерах и во всех оперативных системах.

Имя цвета для HTML	Код для HTML	R G B
Красные
IndianRed	CD 5C 5C	205 92 92
LightCoral	F0 80 80	240 128 128
Salmon	FA 80 72	250 128 114
DarkSalmon	E9 96 7A	233 150 122
LightSalmon	FF A0 7A	255 160 122
Crimson	DC 14 3C	220 20 60
Red	FF 00 00	255 0 0
FireBrick	B2 22 22	178 34 34
DarkRed	8B 00 00	139 0 0
Розовые
Pink	FF C0 CB	255 192 203
LightPink	FF B6 C1	255 182 193
HotPink	FF 69 B4	255 105 180
DeepPink	FF 14 93	255 20 147
MediumVioletRed	C7 15 85	199 21 133
PaleVioletRed	DB 70 93	219 112 147
Оранжевые
LightSalmon	FF A0 7A	255 160 122
Coral	FF 7F 50	255 127 80
Tomato	FF 63 47	255 99 71
OrangeRed	FF 45 00	255 69 0
DarkOrange	FF 8C 00	255 140 0
Orange	FF A5 00	255 165 0
Жёлтые
Gold	FF D7 00	255 215 0
Yellow	FF FF 00	255 255 0
LightYellow	FF FF E0	255 255 224
LemonChiffon	FF FA CD	255 250 205
LightGoldenrodYellow	FA FA D2	250 250 210
PapayaWhip	FF EF D5	255 239 213
Moccasin	FF E4 B5	255 228 181
PeachPuff	FF DA B9	255 218 185
PaleGoldenrod	EE E8 AA	238 232 170
Khaki	F0 E6 8C	240 230 140
DarkKhaki	BD B7 6B	189 183 107
Фиолетовые
Lavender	E6 E6 FA	230 230 250
Thistle	D8 BF D8	216 191 216
Plum	DD A0 DD	221 160 221
Violet	EE 82 EE	238 130 238
Orchid	DA 70 D6	218 112 214
Fuchsia	FF 00 FF	255 0 255
Magenta	FF 00 FF	255 0 255
MediumOrchid	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

Зелёные
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

Коричневые
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
LightGrey	D3 D3 D3	211 211 211
Silver	C0 C0 C0	192 192 192
DarkGray	A9 A9 A9	169 169 169
Gray	80 80 80	128 128 128
DimGray	69 69 69	105 105 105
LightSlateGray	77 88 99	119 136 153
SlateGray	70 80 90	112 128 144
DarkSlateGray	2F 4F 4F	47 79 79
Black	00 00 00	0 0 0

filyanin.ru

Практика И Теория Выбора Цвета В Веб-Дизайне / WAYUP

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

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

Теория цвета в несколько абзацев

При разработке сайта у нас есть 16,8 миллионов цветов на выбор. И все их приходится комбинировать и подбирать, а если представить, сколько вариантов таких комбинаций существует, то… это практически бесконечно. Но цвета имеют смысл. Представьте, вам дарят вашу любимую вещь. Вам приятно, вы рады. А теперь представьте, что вещь вещью, но цвет её – самый ненавистный вам. Например, оттенок смешения зеленого, желтого и серого. О, вы будете возбуждены, вы будете крепиться, но радость будет сходить «на нет».

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

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

В интернете, наоборот, используется RGB (красный, зеленый, синий) и его шестнадцатеричные значения.

RGB (59, 89, 145) или #3b599b – синий Facebook

RGB (0, 0, 0) или #000000 – черный

Каждые два символа в 16-тиречном коде обозначают основной цвет: красный – 3b, зеленый – 59, синий – 9b.

Холод-тепло

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

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

Температура

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

Оттенки и тени

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

Например, возьмем основной цвет #8dbdd8 (светло-голубой). Ниже на изображения представлена монохромная палитра, в которой два оттенка справа и слева представляют собой результат добавления разного количества черного и белого.

Насыщенность, тон, свет

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

Цветовой тон определяет отличие от основного цвета радуги (их семь). То есть, например, «зеленовато-голубой». Ни тот, ни этот, но как раз тон.

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

Цветовые схемы

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

Проектирование макета цветов

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

Тем не менее, когда речь идет о веб-цветах, есть такая концепция, как «веб-безопасные цвета». Она появилась, когда еще дисплеи не могли передать 16 миллионов цветов. Но если есть такие безопасные цвета, зачем еще что-то нужно? Но, согласитесь, приятно знать, почему они вообще существуют и как влияют на выбор цветов в целом.

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

Когда помощь необходима

Если же у вас возникли затруднения проектирования еще на нулевой стадии, то идеи цветовых решений всегда можно найти в интернете. Просто посетите сайт с цветовыми палитрами и настройте его под себя, а затем соберите нужные цвета и работайте с ними в Photoshop. Например, изучайте webdesign-inspiration или awwwards, сортируйте по цветам и находите вдохновение.

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

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

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