Https colorscheme ru html colors html: Конвертер Цветов Онлайн — HEX ⇒ RGB ⇒ RGBA ⇒ CMYK ⇒ HSL ⇒ HSLA ⇒ HSB ⇒ HSV ⇒ XYZ ⇒ LAB. Калькулятор цветов HTML. Генератор цветов CSS3 — ColorScheme.Ru

Содержание

Цвета Pantone — Онлайн каталог Pantone. Таблица Пантонов по CMYK и RGB — ColorScheme.Ru

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

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

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

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

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

В таблице представлен Pantone Color Bridge Coated Process. Данный каталог цветов содержит лишь ближайшие CMYK и RGB аналоги к смесевым цветам. Далеко не каждый цвет из палитры Pantone возможно передать триадными красками, — цветовой диапазон смесевых цветов Pantone гораздо шире, чем у триадных красок CMYK.

Цвет Pantone	C	M	Y	K	HTML	R	G	B
PANTONE 100	0	0	56	0	#FCEA76	252	234	118
PANTONE 101	0	0	68	0	#FCE85F	252	232	95
PANTONE 102	0	0	95	0	#FEE500	254	229	0
PANTONE 103	5	5	100	16	#D0BC00	208	188	0
PANTONE 104	7	13	100	28	#BBA30D	187	163	13
PANTONE 105	13	18	88	45	#998730	153	135	48
PANTONE 106	0	0	75	0	#FCE85D	252	232	93
PANTONE 107	0	0	92	0	#FDE724	253	231	36
PANTONE 108	0	5	98	0	#F9DA00	249	218	0
PANTONE 109	0	9	100	0	#F8D500	248	213	0
PANTONE 110	2	22	100	8	#DBB216	219	178	22
PANTONE 111	8	21	100	28	#B69920	182	153	32
PANTONE 112	10	20	100	40	#A48C1A	164	140	26
PANTONE 113	0	2	83	0	#FAE34E	250	227	78
PANTONE 114	0	4	87	0	#F9DE45	249	222	69
PANTONE 115	0	6	87	0	#F8DB46	248	219	70
PANTONE 116	0	14	100	0	#F5CB08	245	203	8
PANTONE 117	6	27	100	12	#CDA31F	205	163	31
PANTONE 118	7	28	100	30	#B48F1F	180	143	31
PANTONE 119	17	22	100	47	#937F20	147	127	32
PANTONE 120	0	5	64	0	#F7DD76	247	221	118
PANTONE 121	0	8	70	0	#F6D86F	246	216	111
PANTONE 122	0	11	80	0	#F5D258	245	210	88
PANTONE 123	0	19	89	0	#F2C541	242	197	65
PANTONE 124	0	30	100	0	#EDB220	237	178	32
PANTONE 125	6	32	100	24	#BB9121	187	145	33
PANTONE 126	11	31	100	36	#A7861D	167	134	29
PANTONE 127	0	4	62	0	#FAE17B	250	225	123
PANTONE 128	0	7	75	0	#F8D962	248	217	98
PANTONE 129	0	11	78	0	#F6D15A	246	209	90
PANTONE 130	0	32	100	0	#EDAC1A	237	172	26
PANTONE 131	2	39	100	10	#D0941F	208	148	31
PANTONE 132	9	38	100	32	#AB7F20	171	127	32
PANTONE 133	19	37	100	59	#775F1F	119	95	31
PANTONE 134	0	12	60	0	#F5D27A	245	210	122
PANTONE 135	0	21	76	0	#F1C15C	241	193	92
PANTONE 136	0	28	87	0	#EFB646	239	182	70
PANTONE 137	0	41	100	0	#EAA124	234	161	36
PANTONE 138	0	52	100	0	#E68C28	230	140	40
PANTONE 139	7	49	100	25	#B27827	178	120	39
PANTONE 140	19	49	100	54	#7D5A25	125	90	37
PANTONE 141	0	16	65	0	#F5CD66	245	205	102
PANTONE 142	0	24	78	0	#F2BF4C	242	191	76
PANTONE 143	0	32	87	0	#F0B336	240	179	54
PANTONE 144	0	51	100	0	#EA961C	234	150	28
PANTONE 145	4	53	100	8	#D08921	208	137	33
PANTONE 146	7	50	100	34	#A97620	169	118	32
PANTONE 147	19	38	90	58	#786428	120	100	40
PANTONE 148	0	17	43	0	#F4D199	244	209	153
PANTONE 149	0	24	51	0	#F2C688	242	198	136
PANTONE 150	0	41	78	0	#EDAA50	237	170	80
PANTONE 151	0	60	100	0	#E88D21	232	141	33
PANTONE 152	0	66	100	0	#E68523	230	133	35
PANTONE 153	5	64	100	17	#C17723	193	119	35
PANTONE 154	8	66	100	41	#9D6120	157	97	32
PANTONE 155	0	12	34	0	#F5D7A5	245	215	165
PANTONE 156	0	23	49	0	#F1C382	241	195	130
PANTONE 157	0	42	74	0	#EBA344	235	163	68
PANTONE 158	0	62	95	0	#E47E1A	228	126	26
PANTONE 159	1	72	100	7	#D0651E	208	101	30
PANTONE 160	6	71	100	31	#AB5A20	171	90	32
PANTONE 161	16	67	100	71	#66401D	102	64	29
PANTONE 162	0	25	35	0	#F0C4A0	240	196	160
PANTONE 163	0	44	52	0	#EBA677	235	166	119
PANTONE 164	0	59	80	0	#E68A48	230	138	72
PANTONE 165	0	70	100	0	#E37828	227	120	40
PANTONE 166	0	76	100	0	#E06C2A	224	108	42
PANTONE 167	5	77	100	15	#BB5D29	187	93	41
PANTONE 168	12	80	100	60	#6F3B20	111	59	32
PANTONE 169	0	30	26	0	#EEBCA8	238	188	168
PANTONE 170	0	48	50	0	#E89C77	232	156	119
PANTONE 171	0	61	72	0	#E4834E	228	131	78
PANTONE 172	0	73	87	0	#E06E37	224	110	55
PANTONE 173	0	82	94	2	#D7572B	215	87	43
PANTONE 174	8	86	100	36	#9C4124	156	65	36
PANTONE 175	18	79	78	56	#77402E	119	64	46
PANTONE 176	0	35	18	0	#EDB9B4	237	185	180
PANTONE 177	0	54	38	0	#E7948A	231	148	138
PANTONE 178	0	70	58	0	#E27865	226	120	101
PANTONE 179	0	87	85	0	#DD5143	221	81	67
PANTONE 180	3	91	86	12	#C1433C	193	67	60
PANTONE 181	21	93	88	50	#80352F	128	53	47
PANTONE 182	0	31	8	0	#ECBEC5	236	190	197
PANTONE 183	0	49	17	0	#E79CA6	231	156	166
PANTONE 184	0	73	32	0	#DF6B7C	223	107	124
PANTONE 185	0	93	79	0	#D93740	217	55	64
PANTONE 186	2	100	85	6	#C92A39	201	42	57
PANTONE 187	7	100	82	26	#AC2B37	172	43	55
PANTONE 188	16	100	65	58	#7D2935	125	41	53
PANTONE 189	0	39	10	0	#EBB3BC	235	179	188
PANTONE 190	0	56	18	0	#E58F9E	229	143	158
PANTONE 191	0	79	36	0	#DE6276	222	98	118
PANTONE 192	0	94	64	0	#DB3B50	219	59	80
PANTONE 193	2	99	62	11	#C32E4C	195	46	76
PANTONE 194	8	100	55	37	#9D2945	157	41	69
PANTONE 195	19	90	50	55	#7E3545	126	53	69
PANTONE 196	0	23	6	0	#EFCAD0	239	202	208
PANTONE 197	0	46	12	0	#E8A1B0	232	161	176
PANTONE 198	0	82	37	0	#DC5672	220	86	114
PANTONE 199	0	100	72	0	#D82949	216	41	73

Цвета NCS — Каталог цветов NCS.

Таблица NCS по CMYK и RGB — ColorScheme.Ru

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

Натуральная система цвета NCS (Natural Color System) — проприетарная цветовая модель, предложенная шведским Институтом Цвета. Она основана на системе противоположных цветов и нашла широкое применение в промышленности для описания цвета продукции. Сегодня NCS является одной из наиболее широко используемых систем описания цветов в мире, получила международное научное признание, а кроме того, NCS является национальным стандартом в Швеции, Норвегии, Испании, и Южной Африке.

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

При описании цвета по NCS используются шесть элементарных цветов, таких цветов, которые нельзя описать сочетанием двух других (к примеру, элементарный красный — это только красный, без желтого или синего оттенков). Из них четыре хроматических цвета — Желтый (Yellow, Y), Красный (Red, R), Синий (Blue, B) и Зеленый (Green, G), и два нехроматических – Белый (White, W) и Черный (Swarthy, S). Остальные цвета представлены сочетанием элементарных (например, оранжевый — одновременно красноватый и желтоватый). Это сходство называется элементарными признаками цвета (желтизна (yellowness), краснота (redness), белизна (whiteness) и т.д.).

Цвет NCS	C	M	Y	K	HTML	R	G	B
NCS S 0300-N	0	0	0	0	#FFFFFF	255	255	255
NCS S 0500-N	0	0	1	1	#FCFCFB	252	252	251
NCS S 1000-N	0	0	2	6	#F2F2F0	242	242	240
NCS S 1500-N	0	1	2	14	#E0DFDE	224	223	222
NCS S 2000-N	0	1	2	18	#D8D8D7	216	216	215
NCS S 2500-N	0	1	2	23	#CECDCC	206	205	204
NCS S 3000-N	0	1	3	29	#C0BFBE	192	191	190
NCS S 3500-N	0	1	3	36	#B0B0AF	176	176	175
NCS S 4000-N	0	1	3	41	#A5A5A4	165	165	164
NCS S 4500-N	0	1	4	47	#979796	151	151	150
NCS S 5000-N	0	1	4	51	#8E8E8D	142	142	141
NCS S 5500-N	0	2	5	55	#858583	133	133	131
NCS S 6000-N	0	2	5	60	#7A7977	122	121	119
NCS S 6500-N	0	2	5	65	#6D6D6B	109	109	107
NCS S 7000-N	0	2	5	70	#60605E	96	96	94
NCS S 7500-N	0	2	5	75	#545452	84	84	82
NCS S 8000-N	0	2	5	82	#434241	67	66	65
NCS S 8500-N	10	0	15	92	#262824	38	40	36
NCS S 9000-N	15	0	25	100	#111410	17	20	16
NCS S 0502-Y	0	0	8	0	#FFFDF2	255	253	242
NCS S 1002-Y	0	0	10	10	#EAE8DB	234	232	219
NCS S 1502-Y	0	0	10	20	#D5D3C7	213	211	199
NCS S 2002-Y	0	0	10	25	#C9C8BD	201	200	189
NCS S 2502-Y	0	0	10	33	#B8B7AD	184	183	173
NCS S 3502-Y	0	0	11	46	#9A9B92	154	155	146
NCS S 4502-Y	0	0	12	55	#86867E	134	134	126
NCS S 5502-Y	0	0	12	65	#6D6D66	109	109	102
NCS S 6502-Y	0	0	12	75	#55554F	85	85	79
NCS S 7502-Y	0	0	12	88	#353430	53	52	48
NCS S 8502-Y	0	0	15	100	#151311	21	19	17
NCS S 0502-Y50R	0	2	10	0	#FFFAED	255	250	237
NCS S 1002-Y50R	0	3	10	7	#F0E9DD	240	233	221
NCS S 1502-Y50R	0	4	10	17	#DAD4CA	218	212	202
NCS S 2002-Y50R	0	5	10	25	#C8C1B9	200	193	185
NCS S 0502-R	0	2	3	0	#FFFBF8	255	251	248
NCS S 1002-R	0	3	5	10	#E9E4DF	233	228	223
NCS S 1502-R	0	4	5	20	#D4CFCC	212	207	204
NCS S 2002-R	0	5	5	27	#C3BEBC	195	190	188
NCS S 2502-R	0	5	5	32	#B9B4B2	185	180	178
NCS S 3502-R	0	5	5	50	#918D8D	145	141	141
NCS S 4502-R	0	5	5	60	#7A7776	122	119	118
NCS S 5502-R	0	6	10	65	#6C6965	108	105	101
NCS S 6502-R	0	8	10	75	#54504D	84	80	77
NCS S 7502-R	0	9	10	90	#2F2C2A	47	44	42
NCS S 8502-R	0	10	10	100	#161212	22	18	18
NCS S 0502-R50B	2	2	0	0	#FCFBFD	252	251	253
NCS S 1002-R50B	2	2	0	12	#E1E2E5	225	226	229
NCS S 1502-R50B	4	4	0	18	#D1D1D6	209	209	214
NCS S 2002-R50B	4	4	0	28	#BCBDC2	188	189	194
NCS S 0502-B	3	0	0	0	#FAFDFF	250	253	255
NCS S 1002-B	4	0	0	10	#E3E8EA	227	232	234
NCS S 1502-B	4	0	0	18	#D2D7DA	210	215	218
NCS S 2002-B	4	0	0	27	#BFC4C7	191	196	199
NCS S 2502-B	4	0	0	35	#AEB3B6	174	179	182
NCS S 3502-B	4	0	0	50	#8D9194	141	145	148
NCS S 4502-B	4	0	0	60	#767A7C	118	122	124
NCS S 5502-B	7	0	0	70	#5B5F61	91	95	97
NCS S 6502-B	9	0	0	80	#434749	67	71	73
NCS S 7502-B	12	0	0	90	#292D2F	41	45	47
NCS S 8502-B	30	0	0	100	#091115	9	17	21
NCS S 0502-B50G	3	0	4	0	#FAFDF8	250	253	248
NCS S 1002-B50G	4	0	5	8	#E7EBE6	231	235	230
NCS S 1502-B50G	7	0	5	19	#CBD3D0	203	211	208
NCS S 2002-B50G	8	0	5	28	#B6BFBD	182	191	189
NCS S 0502-G	3	0	5	0	#FAFDF7	250	253	247
NCS S 1002-G	5	0	8	5	#EBF0E7	235	240	231
NCS S 1502-G	5	0	8	15	#D6DBD3	214	219	211
NCS S 2002-G	5	0	8	25	#C1C6BF	193	198	191
NCS S 2502-G	5	0	8	33	#B0B5B0	176	181	176
NCS S 3502-G	5	0	8	47	#919692	145	150	146
NCS S 4502-G	5	0	8	55	#808481	128	132	129
NCS S 5502-G	5	0	8	70	#5C5F5C	92	95	92
NCS S 6502-G	5	0	8	80	#464845	70	72	69
NCS S 7502-G	10	0	8	90	#2B2E2C	43	46	44
NCS S 8502-G	10	0	20	100	#131411	19	20	17
NCS S 0502-G50Y	2	0	5	0	#FCFDF7	252	253	247
NCS S 1002-G50Y	2	0	5	5	#F0F2EB	240	242	235
NCS S 1502-G50Y	3	0	10	15	#DADCD0	218	220	208
NCS S 2002-G50Y	3	0	10	25	#C4C7BD	196	199	189
NCS S 0505-Y	0	0	14	0	#FFFBE7	255	251	231
NCS S 0507-Y	0	0	25	0	#FFF9D6	255	249	214
NCS S 0510-Y	0	0	30	0	#FFF8CA	255	248	202
NCS S 0515-Y	0	0	35	0	#FFF6BE	255	246	190
NCS S 0520-Y	0	3	46	0	#FFEEA7	255	238	167
NCS S 0530-Y	0	3	55	0	#FFEB92	255	235	146
NCS S 0540-Y	0	3	70	0	#FEE66B	254	230	107
NCS S 0550-Y	0	7	80	0	#FDDD4E	253	221	78
NCS S 0560-Y	0	10	90	0	#FDD72C	253	215	44
NCS S 0570-Y	0	8	100	0	#FAD500	250	213	0
NCS S 0580-Y	0	12	100	0	#F9CF00	249	207	0
NCS S 1005-Y	0	0	20	5	#F5F0D3	245	240	211
NCS S 1010-Y	0	1	35	5	#F4EAB5	244	234	181
NCS S 1015-Y	0	3	38	4	#F6E9B0	246	233	176
NCS S 1020-Y	0	4	43	5	#F4E5A3	244	229	163
NCS S 1030-Y	0	8	55	3	#F6DE8A	246	222	138
NCS S 1040-Y	0	10	60	2	#F9DD80	249	221	128
NCS S 1050-Y	0	12	80	0	#FED74C	254	215	76
NCS S 1060-Y	0	13	90	0	#FCD32B	252	211	43
NCS S 1070-Y	0	17	90	2	#F7CA27	247	202	39
NCS S 1080-Y	0	20	100	5	#ECBC00	236	188	0

Цвета RAL – Таблица RAL CLASSIC — Все каталоги цветов RAL по CMYK и RGB с примерами — ColorScheme.Ru

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

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

Цветовой стандарт RAL начинает свою историю с 1927 года, когда специалистами из «Управления по торговым стандартам» Германии была впервые разработана коллекция, состоящая на тот момент из 40 цветов. С тех пор палитра RAL постоянно расширяется. Компания выпускает каталоги цветов, веера, содержащие примеры красок по RAL, разрабатывает и добавляет новые образцы.

На нашем сайте имеются все три современные цветовые шкалы, таблицы RAL с раскладкой по CMYK и RGB.

Каталог RAL CLASSIC в настоящее время содержит 213 цветов, в том числе 15 перламутровых, 5 люминесцентных, и 2 железных.

Имя цвета в таблице RAL CLASSIC состоит из четырёхзначного числа в сочетании с префиксом «RAL» (например, RAL 1037). Первая цифра является кодом оттенка (1 – желтые, 2 – оранжевые, 3 – красные, 4 – фиолетовые, 5 – синие, 6 – зелёные, 7 – серые, 8 – коричневые, 9 – белые и чёрные). Остальные три цифры выбраны последовательно. Русскоязычное имя цвета (например, «солнечно-жёлтый» для RAL 1037) не является нормативным, для обозначения цвета достаточно запомнить лишь цифры.

Жёлтые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 1000 Зелёно-бежевый	10 10 50 10	0 3 40 10	#CCC58F	204 197 143
	RAL 1001 Бежевый	0 20 50 20	10 20 40 0	#D1BC8A	209 188 138
	RAL 1002 Песочно-жёлтый	0 20 60 10	3 23 60 7	#D2B773	210 183 115
	RAL 1003 Сигнальный жёлтый	5 20 90 0	0 20 100 0	#F7BA0B	247 186 11
	RAL 1004 Жёлто-золотой	5 30 100 0	0 20 100 10	#E2B007	226 176 7
	RAL 1005 Медово-жёлтый	10 30 100 0	10 20 90 0	#C89F04	200 159 4
	RAL 1006 Кукурузно-жёлтый	5 30 90 0	0 30 100 0	#E1A100	225 161 0
	RAL 1007 Нарциссово-жёлтый	0 40 100 0	0 30 100 0	#E79C00	231 156 0
	RAL 1011 Коричнево-бежевый	30 40 70 0	20 50 100 10	#AF8A54	175 138 84
	RAL 1012 Лимонно-жёлтый	10 10 90 0	10 10 100 0	#D9C022	217 192 34
	RAL 1013 Жемчужно-белый	0 5 20 10	10 10 20 0	#E9E5CE	233 229 206
	RAL 1014 Слоновая кость	0 10 40 10	10 10 30 0	#DED09F	222 208 159
	RAL 1015 Светлая слоновая кость	0 5 30 10	10 10 20 0	#EADEBD	234 222 189
	RAL 1016 Жёлтая сера	10 0 90 0	10 0 80 0	#EAF044	234 240 68
	RAL 1017 Шафраново-жёлтый	0 30 70 0	0 30 90 0	#F4B752	244 183 82
	RAL 1018 Цинково-жёлтый	0 0 80 0	0 0 90 0	#F3E03B	243 224 59
	RAL 1019 Серо-бежевый	5 20 40 40	10 20 30 0	#A4957D	164 149 125
	RAL 1020 Оливково-жёлтый	1 5 30 40	10 10 50 25	#9A9464	154 148 100
	RAL 1021 Рапсово-жёлтый	0 10 100 0	0 0 100 0	#EEC900	238 201 0
	RAL 1023 Транспортно-жёлтый	0 10 90 0	0 10 100 0	#F0CA00	240 202 0
	RAL 1024 Охра жёлтая	30 40 70 10	0 20 100 25	#B89C50	184 156 80
	RAL 1026 Флуоресцентный (Fluorescent) Люминесцентный жёлтый	0 0 100 0	0 0 100 0	#F5FF00	245 255 0
	RAL 1027 Карри жёлтый	10 20 90 40	30 30 100 0	#A38C15	163 140 21
	RAL 1028 Дынно-жёлтый	0 30 100 0	0 20 100 0	#FFAB00	255 171 0
	RAL 1032 Жёлтый ракитник	0 30 90 10	0 20 100 10	#DDB20F	221 178 15
	RAL 1033 Георгиново-жёлтый	0 30 90 0	0 30 100 0	#FAAB21	250 171 33
	RAL 1034 Пастельно-жёлтый	0 30 80 0	0 30 60 0	#EDAB56	237 171 86
	RAL 1035 Жемчужный Глянец (Pearl Gloss) Перламутрово-бежевый	16 19 33 26	20 20 33 12	#A29985	162 153 133
	RAL 1036 Жемчужный Глянец (Pearl Gloss) Перламутрово-золотой	33 46 80 18	9 36 97 28	#927549	146 117 73
	RAL 1037 Солнечно-жёлтый	0 40 100 0	0 35 90 0	#EEA205	238 162 5
Оранжевые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 2000 Жёлто-оранжевый	0 50 100 0	0 40 100 0	#DD7907	221 121 7
	RAL 2001 Красно-оранжевый	0 80 100 20	0 70 100 0	#BE4E24	190 78 36
	RAL 2002 Алый	0 90 100 10	0 80 100 0	#C63927	198 57 39
	RAL 2003 Пастельно-оранжевый	0 52 100 0	0 60 100 0	#FA842B	250 132 43
	RAL 2004 Оранжевый	0 70 100 0	0 70 100 0	#E75B12	231 91 18
	RAL 2005 Флуоресцентный (Fluorescent) Люминесцентный оранжевый	0 75 75 5	0 50 100 0	#FF2300	255 35 0
	RAL 2007 Флуоресцентный (Fluorescent) Люминесцентный ярко-оранжевый	0 50 100 0	0 20 90 0	#FFA421	255 164 33
	RAL 2008 Ярко-красно-оранжевый	0 60 100 0	0 50 100 0	#F3752C	243 117 44
	RAL 2009 Транспортный оранжевый	5 70 100 10	0 60 100 0	#E15501	225 85 1
	RAL 2010 Сигнальный оранжевый	0 70 100 10	0 60 100 0	#D4652F	212 101 47
	RAL 2011 Насыщенный оранжевый	0 55 100 0	0 40 100 0	#EC7C25	236 124 37
	RAL 2012 Лососёво-оранжевый	0 60 70 0	0 80 80 0	#DB6A50	219 106 80
	RAL 2013 Жемчужный Глянец (Pearl Gloss) Перламутрово-оранжевый	0 80 100 40	10 80 100 10	#954527	149 69 39
Красные тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 3000 Огненно-красный	0 100 100 20	0 100 90 0	#AB2524	171 37 36
	RAL 3001 Сигнальный красный	20 100 90 10	0 100 90 0	#A02128	160 33 40
	RAL 3002 Карминно-красный	10 100 90 20	0 100 90 0	#A1232B	161 35 43
	RAL 3003 Рубиново-красный	0 100 100 40	0 100 90 15	#8D1D2C	141 29 44
	RAL 3004 Пурпурно-красный	20 100 100 60	0 100 90 30	#701F29	112 31 41
	RAL 3005 Винно-красный	20 100 80 40	0 100 90 50	#5E2028	94 32 40
	RAL 3007 Чёрно-красный	60 100 70 80	50 100 90 40	#402225	64 34 37
	RAL 3009 Оксид красный	5 90 100 80	20 100 90 30	#703731	112 55 49
	RAL 3011 Коричнево-красный	20 100 100 40	0 100 90 30	#7E292C	126 41 44
	RAL 3012 Бежево-красный	5 50 50 10	20 60 50 0	#CB8D73	203 141 115
	RAL 3013 Томатно-красный	20 90 100 20	0 100 100 15	#9C322E	156 50 46
	RAL 3014 Розовый антик	0 70 30 10	10 70 40 0	#D47479	212 116 121
	RAL 3015 Светло-розовый	0 50 20 10	10 40 10 0	#E1A6AD	225 166 173
	RAL 3016 Кораллово-красный	0 90 90 20	0 90 90 10	#AC4034	172 64 52
	RAL 3017 Розовый	0 80 50 10	0 80 40 0	#D3545F	211 84 95
	RAL 3018 Клубнично-красный	5 90 70 5	0 90 100 0	#D14152	209 65 82
	RAL 3020 Транспортный красный	0 100 100 10	0 90 90 0	#C1121C	193 18 28
	RAL 3022 Лососёво-красный	0 60 70 0	0 70 60 0	#D56D56	213 109 86
	RAL 3024 Флуоресцентный (Fluorescent) Люминесцентный красный	0 80 90 0	0 70 100 0	#F70000	247 0 0
	RAL 3026 Флуоресцентный (Fluorescent) Люминесцентный ярко-красный	0 80 100 0	0 70 100 0	#FF0000	255 0 0
	RAL 3027 Малиново-красный	0 100 70 20	0 100 60 15	#B42041	180 32 65
	RAL 3028 Красный	5 100 100 0	5 100 100 0	#CB3334	203 51 52
	RAL 3031 Ориент красный	20 100 90 20	0 90 60 15	#AC323B	172 50 59
	RAL 3032 Жемчужный Глянец (Pearl Gloss) Перламутрово-рубиновый	10 100 90 50	10 100 100 30	#711521	113 21 33
	RAL 3033 Жемчужный Глянец (Pearl Gloss) Перламутрово-розовый	8 84 72 13	0 93 93 7	#B24C43	178 76 67
Фиолетовые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 4001 Красно-сиреневый	60 70 5 10	50 97 20 0	#8A5A83	138 90 131
	RAL 4002 Красно-фиолетовый	40 100 90 5	0 100 40 30	#933D50	147 61 80
	RAL 4003 Вересково-фиолетовый	10 70 10 0	7 90 0 0	#D15B8F	209 91 143
	RAL 4004 Бордово-фиолетовый	60 100 50 20	10 100 0 50	#691639	105 22 57
	RAL 4005 Сине-сиреневый	60 100 5 10	50 60 0 0	#83639D	131 99 157
	RAL 4006 Транспортный пурпурный	50 100 0 10	30 100 0 0	#992572	153 37 114
	RAL 4007 Пурпурно-фиолетовый	70 100 20 60	90 0 10 25	#4A203B	74 32 59
	RAL 4008 Сигнальный фиолетовый	60 90 0 10	30 100 0 0	#904684	144 70 132
	RAL 4009 Пастельно-фиолетовый	40 40 30 0	17 40 10 15	#A38995	163 137 149
	RAL 4010 Телемагента	10 90 30 0	0 100 0 0	#C63678	198 54 120
	RAL 4011 Жемчужный Глянец (Pearl Gloss) Перламутрово-фиолетовый	47 57 3 7	47 64 0 0	#8773A1	135 115 161
	RAL 4012 Жемчужный Глянец (Pearl Gloss) Перламутрово-ежевичный	50 50 20 23	54 57 3 26	#6B6880	107 104 128
Синие тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 5000 Фиолетово-синий	100 40 5 40	100 70 10 25	#384C70	56 76 112
	RAL 5001 Зелёно-синий	90 20 0 80	100 50 10 20	#1F4764	31 71 100
	RAL 5002 Ультрамариново-синий	100 70 0 40	100 90 0 0	#2B2C7C	43 44 124
	RAL 5003 Сапфирово-синий	100 50 0 80	90 0 10 25	#2A3756	42 55 86
	RAL 5004 Чёрно-синий	100 100 70 40	84 53 47 56	#1D1F2A	29 31 42
	RAL 5005 Сигнальный синий	100 40 0 40	90 60 0 0	#154889	21 72 137
	RAL 5007 Бриллиантово-синий	80 20 0 40	100 40 0 20	#41678D	65 103 141
	RAL 5008 Серо-синий	60 0 0 90	100 50 10 60	#313C48	49 60 72
	RAL 5009 Лазурно-синий	90 30 10 40	100 40 10 20	#2E5978	46 89 120
	RAL 5010 Горечавково-синий	100 40 5 40	100 70 0 0	#13447C	19 68 124
	RAL 5011 Стально-синий	100 60 10 80	96 46 10 40	#232C3F	35 44 63
	RAL 5012 Голубой	90 30 10 10	97 26 0 0	#3481B8	52 129 184
	RAL 5013 Кобальтово-синий	100 60 0 60	90 0 10 25	#232D53	35 45 83
	RAL 5014 Голубино-синий	50 20 0 40	64 41 11 12	#6C7C98	108 124 152
	RAL 5015 Небесно-синий	100 30 0 10	100 20 0 0	#2874B2	40 116 178
	RAL 5017 Транспортный синий	100 20 5 40	90 50 0 0	#0E518D	14 81 141
	RAL 5018 Бирюзово-синий	90 10 40 10	93 7 33 3	#21888F	33 136 143
	RAL 5019 Капри синий	100 50 20 10	100 30 0 20	#1A5784	26 87 132
	RAL 5020 Океанская синь	100 0 40 80	100 30 50 40	#0B4151	11 65 81
	RAL 5021 Водная синь	100 20 50 10	100 0 30 15	#07737A	7 115 122
	RAL 5022 Ночной синий	100 100 40 40	90 0 10 25	#2F2A5A	47 42 90
	RAL 5023 Отдалённо-синий	80 40 10 20	100 60 10 0	#4D668E	77 102 142
	RAL 5024 Пастельно-синий	70 20 10 20	63 17 7 8	#6A93B0	106 147 176
	RAL 5025 Жемчужный Глянец (Pearl Gloss) Перламутровый горечавково-синий	97 48 31 15	100 30 20 20	#296478	41 100 120
	RAL 5026 Жемчужный Глянец (Pearl Gloss) Перламутровый ночной синий	100 80 0 50	90 0 10 25	#102C54	16 44 84
Зелёные тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 6000 Патиново-зелёный	80 20 60 20	98 8 68 17	#327662	50 118 98
	RAL 6001 Изумрудно-зелёный	90 30 90 10	100 0 100 15	#28713E	40 113 62
	RAL 6002 Лиственно-зелёный	90 40 90 10	90 0 100 25	#276235	39 98 53
	RAL 6003 Оливково-зелёный	80 50 80 20	50 40 100 40	#4B573E	75 87 62
	RAL 6004 Сине-зелёный	100 50 60 40	100 30 50 40	#0E4243	14 66 67
	RAL 6005 Зелёный мох	100 60 90 20	100 20 90 30	#0F4336	15 67 54
	RAL 6006 Серо-оливковый	90 80 90 20	80 70 100 60	#40433B	64 67 59
	RAL 6007 Бутылочно-зелёный	80 50 80 60	80 60 100 60	#283424	40 52 36
	RAL 6008 Коричнево-зелёный	70 50 70 80	100 100 100 75	#35382E	53 56 46
	RAL 6009 Пихтовый зелёный	90 50 90 60	100 60 80 60	#26392F	38 57 47
	RAL 6010 Травяной зелёный	70 10 80 40	70 0 100 25	#3E753B	62 117 59
	RAL 6011 Резедово-зелёный	70 30 70 5	50 13 70 20	#66825B	102 130 91
	RAL 6012 Чёрно-зелёный	100 80 100 20	100 50 80 60	#31403D	49 64 61
	RAL 6013 Тростниково-зелёный	40 20 60 40	40 40 70 10	#797C5A	121 124 90
	RAL 6014 Жёлто-оливковый	80 50 90 60	50 70 100 50	#444337	68 67 55
	RAL 6015 Чёрно-оливковый	80 60 70 40	100 100 100 75	#3D403A	61 64 58
	RAL 6016 Бирюзово-зелёный	100 30 80 0	100 0 70 15	#026A52	2 106 82
	RAL 6017 Майский зелёный	80 20 100 10	77 0 97 0	#468641	70 134 65
	RAL 6018 Желто-зелёный	70 0 90 0	60 0 100 0	#48A43F	72 164 63
	RAL 6019 Бело-зелёный	35 0 40 0	30 0 30 0	#B7D9B1	183 217 177
	RAL 6020 Хромовый зелёный	90 60 80 20	80 40 100 50	#354733	53 71 51
	RAL 6021 Бледно-зелёный	50 10 50 10	43 13 50 7	#86A47C	134 164 124
	RAL 6022 Коричнево-оливковый	90 80 100 20	70 100 90 75	#3E3C32	62 60 50
	RAL 6024 Транспортный зелёный	90 10 80 10	90 100 70 0	#008754	0 135 84
	RAL 6025 Папоротниково-зелёный	80 30 90 10	50 10 100 25	#53753C	83 117 60
	RAL 6026 Опаловый зелёный	100 30 70 40	100 0 70 15	#005D52	0 93 82
	RAL 6027 Светло-зелёный	60 0 30 0	50 0 20 0	#81C0BB	129 192 187
	RAL 6028 Сосновый зелёный	100 60 100 0	100 30 100 40	#2D5546	45 85 70
	RAL 6029 Мятно-зелёный	100 20 100 5	100 0 100 0	#007243	0 114 67
	RAL 6032 Сигнальный зелёный	90 10 80 0	90 0 70 0	#0F8558	15 133 88
	RAL 6033 Мятно-бирюзовый	80 20 50 0	90 0 40 17	#478A84	71 138 132
	RAL 6034 Пастельно-бирюзовый	60 10 40 0	50 0 20 10	#7FB0B2	127 176 178
	RAL 6035 Жемчужный Глянец (Pearl Gloss) Перламутрово-зелёный	90 0 100 75	90 10 100 30	#1B542C	27 84 44
	RAL 6036 Жемчужный Глянец (Pearl Gloss) Перламутровый опаловый зелёный	100 10 60 50	100 10 60 30	#005D4C	0 93 76
	RAL 6037 Зелёный	90 0 100 0	90 0 100 0	#008F39	0 143 57
	RAL 6038 Флуоресцентный (Fluorescent) Люминесцентный зелёный	100 0 100 0	100 0 100 0	#00BB2E	0 187 46
Серые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 7000 Серая белка	40 10 10 40	33 6 6 36	#7E8B92	126 139 146
	RAL 7001 Серебристо-серый	10 0 0 40	20 7 7 30	#8F999F	143 153 159
	RAL 7002 Оливково-серый	30 30 50 40	37 37 57 15	#817F68	129 127 104
	RAL 7003 Серый мох	30 20 40 40	27 20 40 40	#7A7B6D	122 123 109
	RAL 7004 Сигнальный серый	0 0 0 45	7 4 4 33	#9EA0A1	158 160 161
	RAL 7005 Мышино-серый	30 10 20 60	48 42 39 20	#6B716F	107 113 111
	RAL 7006 Бежево-серый	0 10 30 60	29 43 56 35	#756F61	117 111 97
	RAL 7008 Серое хаки	30 40 70 40	10 30 90 40	#746643	116 102 67
	RAL 7009 Зелёно-серый	20 50 40 80	60 50 70 32	#5B6259	91 98 89
	RAL 7010 Брезентово-серый	20 5 30 80	60 47 50 43	#575D57	87 93 87
	RAL 7011 Железно-серый	40 10 20 80	60 40 30 30	#555D61	85 93 97
	RAL 7012 Базальтово-серый	20 0 10 80	50 20 20 40	#596163	89 97 99
	RAL 7013 Коричнево-серый	10 10 40 80	50 60 100 50	#555548	85 85 72
	RAL 7015 Сланцево-серый	40 10 10 80	80 65 33 45	#51565C	81 86 92
	RAL 7016 Антрацитово-серый	60 30 30 80	100 50 30 60	#373F43	55 63 67
	RAL 7021 Чёрно-серый	50 10 5 95	100 90 70 50	#2E3234	46 50 52
	RAL 7022 Серая умбра	30 20 40 80	80 80 100 75	#4B4D46	75 77 70
	RAL 7023 Серый бетон	40 20 40 40	50 40 40 0	#818479	129 132 121
	RAL 7024 Графитовый серый	80 60 50 40	90 60 30 60	#474A50	71 74 80
	RAL 7026 Гранитовый серый	60 20 30 80	100 40 50 60	#374447	55 68 71
	RAL 7030 Каменно-серый	20 10 20 40	0 0 10 40	#939388	147 147 136
	RAL 7031 Сине-серый	60 30 30 40	68 52 41 18	#5D6970	93 105 112
	RAL 7032 Галечный серый	0 0 20 40	0 0 10 25	#B9B9A8	185 185 168
	RAL 7033 Цементно-серый	30 10 30 40	37 13 37 30	#818979	129 137 121
	RAL 7034 Жёлто-серый	5 5 40 40	0 0 30 40	#939176	147 145 118
	RAL 7035 Светло-серый	5 0 5 20	20 14 14 0	#CBD0CC	203 208 204
	RAL 7036 Платиново-серый	10 10 10 40	30 30 20 10	#9A9697	154 150 151
	RAL 7037 Пыльно-серый	30 20 20 40	11 8 8 46	#7C7F7E	124 127 126
	RAL 7038 Агатовый серый	30 10 20 20	30 22 22 0	#B4B8B0	180 184 176
	RAL 7039 Кварцевый серый	50 40 50 40	60 60 60 0	#6B695F	107 105 95
	RAL 7040 Серое окно	20 5 10 40	30 20 10 10	#9DA3A6	157 163 166
	RAL 7042 Транспортный серый A	30 10 20 40	17 9 9 33	#8F9695	143 150 149
	RAL 7043 Транспортный серый B	30 10 20 80	87 81 74 29	#4E5451	78 84 81
	RAL 7044 Серый шёлк	0 0 15 30	10 10 10 10	#BDBDB2	189 189 178
	RAL 7045 Телегрей 1	20 10 10 40	10 0 0 40	#91969A	145 150 154
	RAL 7046 Телегрей 2	30 10 10 40	31 18 14 25	#82898E	130 137 142
	RAL 7047 Телегрей 4	0 0 5 20	0 0 0 12	#CFD0CF	207 208 207
	RAL 7048 Жемчужный Глянец (Pearl Gloss) Перламутровый мышино-серый	32 32 39 27	18 18 31 34	#888175	136 129 117
Коричневые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 8000 Зелёно-коричневый	50 50 80 10	20 40 90 25	#887142	136 113 66
	RAL 8001 Охра коричневая	40 60 90 10	10 50 100 10	#9C6B30	156 107 48
	RAL 8002 Сигнальный коричневый	60 80 80 10	20 80 100 30	#7B5141	123 81 65
	RAL 8003 Глиняный коричневый	50 70 80 10	0 60 100 40	#80542F	128 84 47
	RAL 8004 Медно-коричневый	40 80 80 10	0 70 100 25	#8F4E35	143 78 53
	RAL 8007 Олень коричневый	60 70 80 20	0 70 100 40	#6F4A2F	111 74 47
	RAL 8008 Оливково-коричневый	50 60 70 20	30 60 100 10	#6F4F28	111 79 40
	RAL 8011 Орехово-коричневый	10 60 100 80	10 90 100 50	#5A3A29	90 58 41
	RAL 8012 Красно-коричневый	5 100 100 80	0 100 100 50	#673831	103 56 49
	RAL 8014 Сепия коричневый	30 60 100 80	40 70 100 50	#49392D	73 57 45
	RAL 8015 Каштаново-коричневый	0 90 100 80	10 100 100 50	#633A34	99 58 52
	RAL 8016 Махагон коричневый	40 80 80 80	30 90 90 50	#4C2F26	76 47 38
	RAL 8017 Шоколадно-коричневый	60 80 80 80	50 100 90 60	#44322D	68 50 45
	RAL 8019 Серо-коричневый	90 90 80 80	70 100 90 75	#3F3A3A	63 58 58
	RAL 8022 Чёрно-коричневый	100 100 80 95	70 100 90 75	#211F20	33 31 32
	RAL 8023 Оранжево-коричневый	20 70 100 20	0 70 100 10	#A65E2F	166 94 47
	RAL 8024 Бежево-коричневый	30 60 70 40	0 60 100 40	#79553C	121 85 60
	RAL 8025 Бледно-коричневый	40 50 60 40	7 60 93 43	#755C49	117 92 73
	RAL 8028 Терракотовый	20 50 70 80	40 80 100 50	#4E3B2B	78 59 43
	RAL 8029 Перламутровый медный	23 80 93 43	0 80 100 40	#773C27	119 60 39
Чёрные и белые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 9001 Кремово-белый	0 0 10 5	0 0 10 0	#EFEBDC	239 235 220
	RAL 9002 Светло-серый	5 0 10 10	3 3 10 7	#DDDED4	221 222 212
	RAL 9003 Сигнальный белый	0 0 0 0	0 0 0 0	#F4F8F4	244 248 244
	RAL 9004 Сигнальный чёрный	100 90 100 80	100 100 100 75	#2E3032	46 48 50
	RAL 9005 Чёрный янтарь	100 100 100 95	87 65 66 58	#0A0A0D	10 10 13
	RAL 9006 Железный блеск (Iron Glimmer) Бело-алюминиевый	0 0 0 40	0 0 0 20	#A5A8A6	165 168 166
	RAL 9007 Железный блеск (Iron Glimmer) Тёмно-алюминиевый	0 0 0 60	17 14 17 29	#8F8F8C	143 143 140
	RAL 9010 Белый	0 0 5 0	0 0 7 0	#F7F9EF	247 249 239
	RAL 9011 Графитно-чёрный	100 100 100 80	90 100 97 75	#292C2F	41 44 47
	RAL 9016 Транспортный белый	3 0 0 0	0 0 0 0	#F7FBF5	247 251 245
	RAL 9017 Транспортный чёрный	100 90 100 95	87 66 66 58	#2A2D2F	42 45 47
	RAL 9018 Папирусно-белый	10 0 10 20	7 4 10 6	#CFD3CD	207 211 205
	RAL 9022 Жемчужный Глянец (Pearl Gloss) Перламутровый светло-серый	21 14 14 31	10 7 7 28	#9C9C9C	156 156 156
	RAL 9023 Жемчужный Глянец (Pearl Gloss) Перламутровый тёмно-серый	8 6 6 57	20 10 10 40	#7E8182	126 129 130

Применение цвета к HTML элементам с помощью CSS — HTML

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

К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.

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

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

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

На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

Текст

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

color (en-US)

Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.

background-color

Цвет фона текста.

text-shadow

Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows в Fundamental text and font styling, чтобы узнать больше.

text-decoration-color (en-US)

По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства

text-decoration-color.

text-emphasis-color (en-US)

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

caret-color (en-US)

Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как <input> и <textarea> (en-US) или элементам , для которых установлен атрибут contenteditable.

Блоки

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

borders: См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
background-color: Цвет фона блока.
column-rule-color: Цвет линий, которые разделяют колонки текста.
outline-color (en-US): Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Границы

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись border, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid), штриховая (dashed) и так далее.

border-color (en-US): Задаёт единый цвет для всех сторон границы элемента.
border-left-color (en-US), border-right-color (en-US), border-top-color (en-US), and border-bottom-color (en-US): Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
border-block-start-color (en-US) and border-block-end-color (en-US): С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
border-inline-start-color (en-US) and border-inline-end-color (en-US): Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode, direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

Как можно ещё использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API: Позволяет создавать растровую 2D-графику в элементе <canvas>. См. Canvas tutorial, чтобы узнать больше.
SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика): Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе <img>, как и любое другое изображение.
WebGL: Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

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

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

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

red), синий (blue), или оранжевый (orange)), оттенки серого (от чёрного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> — полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатеричная запись в виде строки

Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент

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

Цвет в шестнадцатеричной записи всегда начинается с символа "#". После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb": Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb.
"#rrggbbaa": Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb": Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb.
"#rgba": Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозрачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue: Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha: Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством <angle>, а именно — в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

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

Вот несколько примеров цвета в HSL записи:

Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (deg).

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

Цвет в таблицах стилей CSS

Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

Давайте начнём наш пример с результата, который нам нужно достичь:

HTML

HTML, который создаёт вышеупомянутый пример:

<div>
  <div>
    <p>
      This is the first box.
    </p>
  </div>
  <div>
    <p>
      This is the second box.
    </p>
  </div>
</div>

Все довольно просто: первый <div> используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <div>, каждый из которых содержит один параграф (<p>) и имеет свой стиль.

Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..

CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Класс .wrapper определяет стиль для элемента <div>, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины width, высоты height, внешних margin и внутренних padding полей.

Но больше всего нас интересует свойство граница border, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (mediumturquoise).

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

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex, и присваиваем значение center justify-content и align-items. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

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

background-color определяет цвет фона блока значением rgb(245, 130, 130).
outline (en-US), в отличие от привычного нам свойства border, не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

background-color определяется значением HSL: hsl(270deg, 50%, 75%). Это светло-фиолетовый цвет.
Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.

The <input> element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we’ll output some text from our JavaScript code.

<div>
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff">
  <p></p>
</div>

CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}

JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar): An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color theory on Wikipedia: Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code (D79C7A) into the «Base RGB» box at the bottom-left corner of the tool:

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

Язык разметки HTML | Школа программирования ProgTips

В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.

1. Что такое HTML?

Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

<p>Пример параграфа</p>

В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.

Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.

Стандарт HTML: https://www.w3.org/TR/html52/

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

<p align=»left»>Пример текста</p>

Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

Чаще всего используются следующие теги:

<b> — полужирный текст
<i> — курсив
<br> — перевод строки
<hr> — горизонтальная линия

<a> — ссылка
<pre> — форматированный текст

<ins> — добавленный текст
<del> — удаленный текст

Существует шесть уровней заголовков: с <h2> по <h6>.

<h2>Заголовок уровня 1</h2>

<h3>Заголовок уровня 2</h3>

<h4>Заголовок уровня 3</h4>

<h5>Заголовок уровня 4</h5>

<h5>Заголовок уровня 5</h5>

<h6>Заголовок уровня 6</h6>

Результат будет выглядеть так:

2. Минимальная веб-страница

Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.

Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:

<!DOCTYPE html>

<head>

<title>без имени</title>

</head>

<body>

</body>

</html>

Этот текст нужно сохранить с именем index.html.

Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.

После этого веб-страницу можно открыть в любом браузере.

Строки минимальной веб-страницы означают следующее:

<!DOCTYPE html> — стандарт HTML5

<html lang=»ru»> — язык страницы русский

<head></head> — техническая информация о веб-странице

<title>без имени</title> — Заголовок веб-страницы

<body> </body> — тело веб-страницы

</html> — завершение веб-страницы

3. Структура веб-страницы

Для указания на структуру используются теги:

<header> — шапка документа
<nav> — навигация по сайту
<article> — статья
<aside> — боковая панель
<footer> — подвал

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

4. Таблицы

Таблица задается тегами:

<table> — общий контейнер
<tr> — строка
<td> — ячейка
<th> — заголовок столбца
<caption> — название таблицы

Простая таблица выглядит так:

<table> — начало таблицы

<tr> — начало первой строки

<td>Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr> — конец первой строки

<tr> — начало второй строки

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr> — конец второй строки

</table> — конец таблицы

Текст без комментариев выглядит так:

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>

Сама таблица будет выглядеть так:

5. Блоки, аудио и видео

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

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

<div> — блочный элемент
<span> — строчный элемент.

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

Таблицы используются только для вывода табличных данных.

Размещение аудио.

1 <audio src=»sound.mp3″ controls></audio>

Видео из файла.

1 <video src=»car.mp4″ controls></video>

6. Цвета

В HTML цвет можно указать как значение RGB, используя следующую формулу:

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

Каждый параметр определяет интенсивность цвета от 0 до 255.

Например:

rgb (255, 0, 0) — красный.
rgb (0, 0, 0) — черный.

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

Стандартные названия цветов: https://colorscheme.ru/html-colors.html

7. Формы

Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.

Пример простой формы:

<form name=»form1″ action=»getform1.php»>
Имя:<br>
<input type=»text» name=»firstname»><br>
Фамилия:<br>
<input type=»text» name=»lastname»><br>
<input type=»submit» value=»Отправить»>
</form>

Для получения данных используется тег <input>:

флажки <input type=»checkbox»>
радиокнопки — <input type=»radio»>
ввод текста — <input type=»text»>
пароль — <input type=»password»>
отправить форму — <input type=»submit»>

и многое другое.

Полный список здесь:

https://developer.mozilla.org/ru/docs/Web/HTML/Element/input

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.

Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.

Пример формы с группировкой данных:

<form name=»form2″ action=»getform2.php»>
<fieldset>
<legend>Личная информация:</legend>
Имя:<br>
<input type=»text» name=»firstname» required ><br>
Фамилия:<br>
<input type=»text» name=»lastname»><br><br>
</fieldset>
<fieldset>
<legend>Ввод пароля:</legend>
Введите пароль:<br>
<input type=»password» name=»pass1″><br>
Повторите пароль:<br>
<input type=»password» name=»pass2″><br><br>
</fieldset>
<fieldset>
<legend>Интересы:</legend>
<p>Любимые музыкальные жанры</p>
<ol>
<li><input type=»checkbox» name=»musik» value=»джаз» checked>Джаз</li>
<li><input type=»checkbox» name=»musik» value=»блюз» checked>Блюз</li>
<li><input type=»checkbox» name=»musik» value=»рок»>Рок</li>
<li><input type=»checkbox» name=»musik» value=»кантри»>Кантри</li>
</ol>

<p>Хобби</p>
<select name=»hobby» size=»7″ multiple>
<option selected value=»1″>Спорт</option>
<option value=»2″>Рыбалка</option>
<option value=»3″>Игры</option>
<option value=»4″>Животные</option>
<option value=»5″>Путешествия</option>
<option value=»6″>Танцы</option>
<option value=»7″>Театр</option>
</select>

</fieldset>

Когда пользователь заполнил форму и нажал “Отправить”, данные отправляются на сервер и обрабатываются (как правило, на языке PHP). После этого пользователю выдается веб-страница с результатами обработки. В минимальном варианте данные формы можно отправить на Email.

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

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

Правила цветовых сочетаний

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

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

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

Типы цветовых сочетаний

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

Монохромные цвета (mono)

Монохромное цветовой сочетание – это один основной цвет и различные вариации его яркости и насыщенности. Подходит для стилистически строгих решений, не отвлекает от контента. Эта цветовая схема всегда гармонична, но есть риск того, что страница сайта покажется слишком скучной. Контраст в монохромной цветовой схеме обеспечивается применением белого и черного. Вариантом монохромной схемы является решение в градациях серого. Оно включает в себя нейтральные оттенки в диапазоне от белого до черного. Такой «серый» вариант можно разнообразить, добавив всего один яркий цвет для создания акцента.

Соседние (аналоговые) цвета (analogic)

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

Дополняющие (противосторонние) цвета (complement)

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

Дополняющие совмещенные цвета (triad)

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

Парная четверка

К паре дополняющих цветов добавляется пара аналоговых.

Акцентирование аналоговых цветов

Четверка состоит из основного цвета, пары его аналоговых и дополняющего акцента.

Как создать цветовые схемы для сайта, используя цветовой круг

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

Перечень сайтов, которые помогут в работе по подбору цветовых схем:

color.adobe.com

www.colourlovers.com

web.colorotate.org

ColorSchemer Studio

Ищите готовые цветовые схемы на сайтах:

ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
Flat UI Colors — отличный набор цветов для UI, один из самых популярных
Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр

Как подбирать палитры для визуализации данных

Цветовая палитра осени

Таблица стилей (CSS) в ePub — Для авторов — Статьи — Каталог статей

Каскадные таблицы стилей CSS (Cascading Style Sheets) – первый стандарт стилей, объявленный консорциумом W3C. W3C (World Wide Web Consortium) – Консорциум Всемирной паутины – организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий. Дата основания: Октябрь 1994 г.

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

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

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

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

На начальном этапе этой минимальной информации должно быть достаточно. Больше информации можно получить на сайте

http://www.w3schools.com/css/ (англ.).

Или же воспользуйтесь поиском (информации много и на русском языке).

Чтобы таблица стилей в книге «работала» – на каждой отдельной страничке книги должна быть ссылка на файл CSS. В папку Styles по нажатию правой кнопки добавьте заранее подготовленную таблицу стилей. Чтобы подключить таблицу CSS к конкретному файлу xhtml, его надо выделить и выбрать опцию Link Stylesheets…

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

Ниже приведен скриншот – в редакторе Sigil режим просмотра кода страницы.

Ссылка на таблицу стилей располагается вверху каждой страницы внутри блока <head>.

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

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

Приведенный ниже файл CSS прошел валидацию успешно.

Вы можете скачать таблицу стилей вот по этой ссылке, это легально, вы ничего не нарушаете). (загрузок 102, просмотров 828) UPD: файл теперь перезалит в облако на mail.ru, т.к. на сайте box.com с лета 2015 проблемы со скачиванием файлов.

Даже если вы не считаете себя специалистом в программировании – опасаться нечего. Я тоже изучал таблицу CSS отдельными фрагментами, постепенно. И уровень подготовки в этой области был минимальный. Это очень мощное средство управление внешним видом форматирования. В книге может быть 1 или несколько таблиц стилей. (Это удобно, когда необходимо какой-то раздел книги оформить особым образом. Злоупотреблять не стоит, но попробовать можно.)

Как создаётся таблица стилей? Скачивается программа Notepad++ (ссылка последнюю версию найдите в разделе download ). Это программа для OS Windows, для Mac поищите другую программу самостоятельно.

В этом редакторе можно сохранить введенный текст как таблицу CSS

(Сохранить как…). Сразу необходимо запомнить, что в CSS значима каждая фигурная скобка, каждая точка с запятой. (NB!)

Что описывается внутри? На примере заголовка первого уровня (h2)

h2
{
text-align: center; …….. заголовок выравнивается по центру
page-break-after: avoid; …… запрет на разрыв страницы после заголовка
page-break-inside: avoid; ….. запрет на разрыв страницы внутри заголовка
font-weight: normal; ….. тип шрифта – обычный
font-size: 1.56em; …… размер шрифта по сравнению с основным текстом (в данном случае 156%)
line-height: 1.2em;
margin: 0;
padding: 0;
color: #000080; /*navy*/ …. цвет шрифта, в данном примере цвет navy
} …… закрывающая фигурная скобка

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

<h2>Заголовок</h2>, а читатель увидит заголовок синего цвета, с выравниванием по центру страницы.

Заголовок

При форматировании книги стихов, для названий отдельных стихотворений я предпочитаю использовать заголовок 2 уровня h3 со следующими параметрами:

{

text-align: left; /*выравнивание по левому краю*/

text-indent:2em; /* отступив 2em */

page-break-after: avoid;

page-break-inside: avoid;

font-weight: normal;

font-size: 1.40em;

color: #000080;

}

Логика простая: текст стихотворения выравнивается по левому краю и при не слишком длинной строке заголовок по центру страницы выглядит немного диссонансом, потому h3 я тоже выравниваю по левому краю, с небольшим отступом (вправо). С параметром font-size надо быть очень осторожным, т.к. слишком большие значения могут приводить к появлению гигантских заголовков на страничке при даже небольшом увеличении шрифта основного текста. Если заголовок слишком длинный, допустимо внутри использовать тег <br/> для принудительной разбивки заголовка на две строчки. Если в свойствах h2 записано выравнивание по центру, то обе строчки будут выглядеть вполне эстетично.

(To Say Nothing of the Dog)</h2>

Сохраню здесь полезную ссылку на таблицу цветов CSS Color Names. Там возможно посмотреть много полезной информации.

http://www.w3schools.com/cssref/css_colornames.asp

http://colorscheme.ru/html-colors.html

http://www.stm.dp.ua/web-design/color-html.php

Тут мне необходимо сказать про форматирование отступов в параграфах, которое следует прописать в таблице CSS. При подготовке книг с прозой рекомендуют в характеристиках свойств параграфа указывать отступ 1em или 1.2em, 1.6em, 2em, например:

p.ind
{
text-indent: 1em;
margin-top: 0;
margin-bottom: 0.2em;
text-align: justify;
}

Между абзацами пустые строки не рекомендуются.

Параграф без отступов (text-indent: 0;) рекомендован для форматирования поэзии, non-fiction books (документалистика, очерки, научные работы, эссе, биографии, воспоминания, техническая документация, руководства и др.).

Если в таблицу стилей вставить:

a
{
color: #000080; /*navy*/
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

тогда гиперссылки внутренние и на ресурсы в сети будут синего цвета и без подчёркивания. Подчёркивание ссылки описано: «при наведении курсора» — a:hover . Имхо, так чуть эстетичнее вид внутри книги, особенно если вы решили сделать кликабельное содержание. Да, ещё мне кажется более логичным размещать страницу Содержание (HTML-toc) в начале книги.

В последней на данный момент версии редактора Sigil (и уже начиная с версии 0.6.0) есть очень приятное нововведение: теперь не надо вручную вставлять ссылку на CSS в редакторе кода. В левом окне выделяется группа файлов, удерживая Shift. Далее правой кнопкой выбрать Link Stylesheets… (добавить ссылки на таблицу(ы) стилей)

Все ли проблемы решаются таким способом? Увы, нет. iBooks (программа чтения на устройствах Apple) не следует спецификациям CSS. Однако, Firefox, Safari и Adobe Digital Editions (ADE), и все ридеры на основе АDE (Sony Reader и Barnes & Noble Nook) работают с CSS.

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

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

http://jigsaw.w3.org/css-validator/

или здесь http://validator.w3.org/

Ну и если речь зашла о валидаторах – онлайн-сервис для проверки

готовой книги ePub: http://validator.idpf.org/

Думаю, будет интересно ознакомиться с таблицей стилей от mattharrison – epub-css-starter-kit

https://github.com/mattharrison/epub-css-starter-kit/blob/master/css/base.css

Рекомендовано к прочтению (англ.) несколько страничек по форматированию электронных книг на сайте Dr. George Benthien

http://www.gbenthien.net/Kindle%20and%20EPUB/index.html

CSS2 Cheat Sheet by DaveChild (имхо, слишком кратко)

http://www.cheatography.com/davechild/cheat-sheets/css2/

______________________________

Короткая ссылка на данную страницу: http://goo.gl/yF8la

UPD: Возможно ли использование CSS в книгах формата fb2? Да, об этом есть публикация на форуме библиотеки:

http://maxima-library.org/forum/razdel-predlozhenij/127-stilnye-knigi

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

Мастер-класс по созданию ePub (Оглавление)

Электронная почта в темном режиме: полное практическое руководство

Темный режим. Технологическая индустрия гудит от этих двух слов, и электронный маркетинг не исключение. В 2018 году Apple добавила Dark Mode в свой почтовый клиент для настольных ПК. В следующем году Dark Mode появился в iOS Mail. И другие тяжеловесы отрасли, в том числе Gmail, объявили о поддержке темного режима. Нельзя отрицать…

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

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

Готовы погрузиться? Подведем итог.

Темный режим: более темная цветовая палитра для слабого освещения или в ночное время

Dark Mode — это перевернутая цветовая схема, в которой используются светлые шрифты, элементы пользовательского интерфейса и иконки на темном фоне. Это одна из самых популярных тенденций цифрового дизайна за последний год.От ОС Apple до таких приложений, как Twitter, Slack или Facebook Messenger, самые популярные операционные системы и приложения теперь позволяют пользователям переключаться в темный режим. Темный режим — горячая тема, и на то есть веские причины. Многие пользователи предпочитают темный режим, потому что:

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

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

Какие почтовые клиенты поддерживают темный режим?

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

Мобильные приложения

Настольные клиенты

Apple Mail
Outlook 2019 (Mac OS)
Outlook 2019 (Windows)

Веб-клиенты

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

Как клиенты применяют темный режим к моей электронной почте?

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

Без изменения цвета

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

Apple Mail
iPhone
iPad
Привет.com

Посмотрите этот пример электронного письма в Apple Mail: Дизайн письма остается неизменным, независимо от того, просматриваете ли вы его в темном или светлом пользовательском интерфейсе почтового клиента:

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

Во-вторых, , если вы случайно оставите теги темного режима в своем шаблоне, Apple Mail / iPhone / iPad автоматически преобразует любой экземпляр чисто белого #ffffff в темно-серый , если вы не переопределите его с помощью своего пользовательского темного режима. стили. Или вместо этого вы можете использовать не совсем белый цвет, например #fffffe.

Параметры темного режима: по умолчанию и пользовательские

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

Темные режимы по умолчанию: частичное инвертирование цвета

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

Outlook.com — это почтовый клиент, который частично инвертирует цвета, как вы можете видеть на этом снимке экрана:

Темные режимы по умолчанию: Инвертировать полноцветный

Full Color Invert — это наиболее агрессивная цветовая схема: она не только инвертирует области со светлым фоном, но также влияет на темный фон.Так что, если вы уже разработали свои электронные письма с темной темой, эта схема, по иронии судьбы, заставит их стать светлыми . К сожалению, в настоящее время эта тактика используется некоторыми наиболее популярными почтовыми клиентами, такими как приложение Gmail (iOS13) и Outlook 2019 (Windows).

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

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

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

Как мне настроить таргетинг на пользователей темного режима с помощью моих собственных стилей?

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

@media (предпочитаемая-цветовая-схема: темная)

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

[data-ogsc]

Это метод, на который наше внимание впервые обратил внимание Марк Роббинс, чтобы настроить таргетинг на приложение Outlook. Хотя это кажется довольно узкой долей рынка, относительно легко просто скопировать стили @media (prefers-color-scheme: dark) , которые вы уже применили, и просто добавить соответствующие префиксы [data-ogsc] к каждому CSS. правило.

Но — а в электронной почте всегда есть одно «но» — эти методы таргетинга также не пользуются постоянной поддержкой.Итак, какой почтовый клиент следует какой цветовой схеме по умолчанию? И хотя некоторые почтовые клиенты — мы смотрим на вас, Gmail — не предлагают дизайнерам электронной почты возможности настроить таргетинг на темный режим для оптимизации чтения, для большинства клиентов можно настроить таргетинг с помощью @media (prefers-color-scheme: dark) или [data-ogsc] методов.

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

Таблица поддержки почтового клиента в темном режиме (по состоянию на июль 2020 г.)

Почтовый клиент	Обработка HTML в темном режиме	@media	[data ‐ ogsc]	Причуды
Apple Mail (MacOS)	Без изменений *	✓ Да	✘ Нет	* Чистый белый (#ffffff) BG будет инвертирован, если присутствует
iPhone / iPad (iOS 13)	Без изменений *	✓ Да	✘ Нет	* Чистый белый (#ffffff) BG будет инвертирован, если присутствует
Привет.com	Без изменений	✓ Да	✘ Нет
Outlook.com	Частичное инвертирование	? Частично *	? Частично **	* Некоторые цвета BG будут затемнены. ** Замена изображений работает!
Outlook 2019 (MacOS)	Частичное инвертирование	? Частично *	✘ Нет	* Некоторые цвета BG будут затемнены
Outlook 2019 (WinOS)	Полный инверт	✘ Нет	✘ Нет
Приложение Outlook (iOS)	Частичное инвертирование	? Частично *	✘ Нет	* Некоторые цвета BG будут затемнены
Приложение Outlook (Android)	Частичное инвертирование	✘ Нет	? Частично *	* Некоторые цвета BG будут затемнены
Приложение Gmail (iOS)	Полный инверт	✘ Нет	✘ Нет
Приложение Gmail (Android)	Частичное инвертирование	✘ Нет	✘ Нет

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

1.Оптимизируйте свои логотипы и другие изображения для всех стилей

Добавьте полупрозрачный контур к прозрачным файлам PNG с темным текстом для удобочитаемости в почтовых клиентах, где таргетинг на темный режим невозможен, например в приложении Gmail и Outlook 2019 (Windows). Это поможет предотвратить любые проблемы, при которых почтовый клиент может решить использовать настройки частичного инвертирования цвета или полноцветного инвертирования, и упростит работу для ваших подписчиков. В этом поможет выбор по возможности прозрачный фон.

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

Plus, поменяйте местами изображения в светлом и темном режимах с помощью методов @media (prefers-color-scheme: dark) и [data-ogsc] , описанных в этом руководстве.

2. Включить темный режим в пользовательских агентах почтового клиента

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

Цветовое колесо — теория цвета и калькулятор

Теория цвета и цветовое колесо

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

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

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

Существует два типа цветового круга. Художники обычно используют RYB или красный, желтый, синий цветовой круг, поскольку он помогает комбинировать цвета краски. Кроме того, существует цветовое колесо RGB (красный, зеленый и синий), которое предназначено для использования в Интернете, поскольку оно относится к смешиванию света — как на экране компьютера или телевизора. Цветовое колесо Canva — это цветовое колесо RGB, поскольку оно предназначено для использования в Интернете.

Сочетания цветов

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

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

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

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

Аналог

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

Triadic

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

Tetradic

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

Основные, второстепенные и третичные цвета

На цветовом круге 12 основных цветов. В цветовом круге RGB это оттенки красного, оранжевого, желтого, зеленовато-зеленого, зеленого, весеннего зеленого, голубого, лазурного, синего, фиолетового, пурпурного и розового.

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

Основные цвета в цветовом круге RGB — это цвета, которые вместе создают чистый белый свет. Это красный, зеленый и синий цвета.

В цветовом круге RYB основные цвета — это цвета, которые нельзя смешивать с другими цветами. Есть три основных цвета: красный, желтый и синий.

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

В цветовом круге RYB вторичными цветами являются фиолетовый (красный смешанный с синим), оранжевый (красный смешанный с желтым) и зеленый (желтый смешанный с синим).

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

В цветовом круге RYB третичными цветами являются красно-оранжевый, желто-оранжевый, желто-зеленый, сине-зеленый, сине-фиолетовый и красно-фиолетовый.

Теплые и холодные цвета

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

Теплые цвета — это цвета от красного до желтого. Говорят, что эти цвета напоминают тепло, как солнце.

Холодные цвета — это цвета от синего до зеленого и фиолетового. Говорят, что эти цвета напоминают прохладу, как вода.

Оттенки, оттенки и тона

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

Оттенок

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

Оттенок

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

Тона

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

Оттенок, насыщенность и яркость

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

Насыщенность — это интенсивность или чистота цвета.

Яркость — это количество яркости или света в цвете.

Значения цвета и цветовые схемы

Это всего лишь введение в увлекательный мир цвета. Есть еще много всего, что нужно узнать! Например, знаете ли вы, что королевский синий цвет был создан в 1800-х годах для королевы Шарлотты? Если вы хотите узнать больше о цветах, посетите нашу страницу «Значения цветов» — на ней рассказывается об истории и значении сотен цветов. Или, если вы ищете более великолепные цветовые комбинации, воспользуйтесь нашим Генератором цветовой палитры или просмотрите тысячи вдохновляющих цветовых схем.

Тематика HTML — документация Sphinx

Sphinx предоставляет ряд построителей для HTML и основанных на HTML форматов.

шаблоны

Примечание

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

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

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

Использование темы

Использовать тему, поставляемую со Sphinx, очень просто. Поскольку эти не нужно устанавливать, вам нужно только установить html_theme значение конфигурации. Например, чтобы включить тему classic , добавьте следующее до конф.py :

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

 html_theme_options = {
    "rightidebar": "правда",
    "relbarbgcolor": "черный"
}

Если тема не поставляется с Sphinx, она может быть в двух статических формах или как Пакет Python.Для статических форм либо каталог (содержащий theme.conf и другие необходимые файлы) или zip-файл с тем же содержание поддерживается. Каталог или zip-файл должны быть размещены там, где Sphinx может Найди это; для этого есть значение конфигурации html_theme_path . Этот может быть списком каталогов относительно каталога, содержащего conf.py , который может содержать каталоги тем или zip-файлы. Например, если у вас есть тема в файле blue.zip , вы можете положить ее прямо в каталог, содержащий конф.py и используйте эту конфигурацию:

 html_theme = "синий"
html_theme_path = ["."]

Третья форма — это пакет Python. Если тема, которую вы хотите использовать, распространяется как пакет Python, вы можете использовать его после установки

 # установка пакета тем
$ pip установить sphinxjp.themes.dotted

После установки его можно использовать так же, как каталог или Тема на основе zip-файла:

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

Встроенные темы

Обзор темы

алебастр

классический

сфинксдок

свитков

агого

традиционный

природа

хайку

пирамида

бизстайл

Sphinx поставляется с набором тем на выбор.

Эти темы:

базовый

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

nosidebar (true или false): не включать боковую панель. По умолчанию Неверно .
sidebarwidth (int или str): ширина боковой панели в пикселях.Это может быть int, который интерпретируется как пиксели, или действительный CSS. размерная строка, например «70em» или «50%». По умолчанию 230 пикселей.
body_min_width (int или str): минимальная ширина тела документа. Это может быть int, который интерпретируется как пиксели, или действительный CSS. размерная строка, например «70em» или «50%». Используйте 0, если не хотите ограничение ширины. Значения по умолчанию могут зависеть от темы (часто 450 пикселей).
body_max_width (int или str): максимальная ширина тела документа.Это может быть int, который интерпретируется как пиксели, или действительный CSS. размерная строка, например «70em» или «50%». Используйте «none», если вы этого не сделаете. хотите ограничение ширины. Значения по умолчанию могут зависеть от темы (часто 800 пикселей).
navigation_with_keys (true или false): разрешить переход к предыдущую / следующую страницу с помощью стрелок влево и вправо на клавиатуре. По умолчанию Неверно .
globaltoc_collapse (true или false): разворачивать только подразделы текущего документа в globaltoc.HTML (см. html_sidebars ). По умолчанию True .
globaltoc_includehidden (true или false): показать даже те подразделы в globaltoc.html (см. html_sidebars ) которые были включены в флаг : hidden: директива toctree . По умолчанию Ложь .
globaltoc_maxdepth (int): максимальная глубина toctree в globaltoc.html (см. html_sidebars ). Установите значение -1, чтобы разрешить неограниченная глубина. По умолчанию максимальная глубина выбрана в директиве toctree.

alabaster

Alabaster theme представляет собой модифицированную тему «Kr» Sphinx от @kennethreitz (особенно в том виде, в котором он использовался в его проекте «Запросы»), который сам изначально был на основе темы @mitsuhiko, используемой для Flask и связанных проектов. Обратитесь к его страница установки для получения информации о том, как настроить html_sidebars за его использование.

classic

Это классическая тема, похожая на Python 2 документация. Его можно настроить с помощью эти варианты:

rightidebar (true или false): поместите боковую панель справа. По умолчанию Ложь .
stickysidebar (true или false): сделайте боковую панель «фиксированной», чтобы она не прокручивается за пределы поля зрения для длинного основного содержимого. Это может не сработать со всеми браузерами.По умолчанию Ложь .
collapsiblesidebar (true или false): добавить экспериментальный код JavaScript фрагмент, который делает боковую панель сворачиваемой с помощью кнопки сбоку. По умолчанию Ложь .
externalrefs (true или false): отображать внешние ссылки иначе, чем внутренние ссылки. По умолчанию Ложь .

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

footerbgcolor (цвет CSS): цвет фона для строки нижнего колонтитула.
footertextcolor (цвет CSS): цвет текста для строки нижнего колонтитула.
sidebarbgcolor (цвет CSS): цвет фона для боковой панели.
sidebarbtncolor (цвет CSS): цвет фона для свертывания боковой панели. кнопка (используется, когда складная боковая панель — это True ).
sidebartextcolor (цвет CSS): цвет текста для боковой панели.
sidebarlinkcolor (цвет CSS): цвет ссылки для боковой панели.
relbarbgcolor (цвет CSS): цвет фона для панели отношений.
relbartextcolor (цвет CSS): цвет текста для панели отношений.
relbarlinkcolor (цвет CSS): цвет ссылки для панели отношений.
bgcolor (цвет CSS): цвет фона тела.
textcolor (цвет CSS): цвет основного текста.
linkcolor (цвет CSS): цвет ссылки тела.
visitlinkcolor (цвет CSS): цвет тела посещенных ссылок.
headbgcolor (цвет CSS): цвет фона для заголовков.
headtextcolor (цвет CSS): цвет текста для заголовков.
headlinkcolor (цвет CSS): цвет ссылки для заголовков.
codebgcolor (цвет CSS): цвет фона для блоков кода.
codetextcolor (цвет CSS): цвет текста по умолчанию для блоков кода, если нет настраивается по-разному стилем выделения.
bodyfont (семейство шрифтов CSS): шрифт для обычного текста.
headfont (семейство шрифтов CSS): Шрифт для заголовков.

sphinxdoc

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

scrolls

Более легкая тема, основанная на документации Jinja.Следующие цветовые варианты: в наличии:

заголовок Bordercolor
цвет подзаголовка
цвет ссылки
visitlinkcolor
admonitioncolor

agogo

Тема, созданная Энди Альбрехтом. Поддерживаются следующие параметры:

bodyfont (семейство шрифтов CSS): шрифт для обычного текста.
headerfont (семейство шрифтов CSS): шрифт для заголовков.
pagewidth (длина CSS): ширина содержимого страницы, по умолчанию 70em.
ширина документа (длина CSS): ширина документа (без боковой панели), по умолчанию 50em.
sidebarwidth (длина CSS): ширина боковой панели, по умолчанию 20em.
rightidebar (true или false): поместите боковую панель справа.По умолчанию True .
bgcolor (цвет CSS): цвет фона.
headerbg (значение CSS для «background»): фон для области заголовка, по умолчанию сероватый градиент.
footerbg (значение CSS для «background»): фон для области нижнего колонтитула, по умолчанию — светло-серый градиент.
linkcolor (цвет CSS): цвет ссылки тела.
headercolor1 , headercolor2 (цвет CSS): цвета для
и
заголовки.
headerlinkcolor (цвет CSS): цвет ссылки обратной ссылки в заголовки.
textalign (значение CSS text-align ): выравнивание текста для основного текста, по умолчанию оправдывает .

природа

Зеленоватая тема. В настоящее время нет других вариантов, кроме nosidebar и sidebarwidth .

pyramid

Тема из проекта веб-фреймворка Pyramid, разработанного Блезом Лафламмом.В настоящее время нет вариантов, кроме nosidebar и sidebarwidth .

haiku

Тема без боковой панели, вдохновленная руководством пользователя Haiku OS. Следующие поддерживаются варианты:

full_logo (true или false, по умолчанию False ): если это правда, в заголовке будет отображаться только html_logo . Используйте это для больших логотипов. Если это ложь, логотип (если есть) будет показан плавающим справа, а название документации будет помещено в заголовок.
цвет текста , цвет заголовка , цвет ссылки , цвет ссылки , hoverlinkcolor (цвета CSS): цвета для различных элементов тела.

традиционный

Тема, напоминающая старую документацию Python. Есть в настоящее время нет опций, кроме nosidebar и sidebarwidth .

epub

Тема для конструктора epub.Эта тема пытается сохранить визуальное space, который является скудным ресурсом для читателей электронных книг. Следующие варианты поддерживаются:

relbar1 (true или false, по умолчанию True ): если это правда, relbar1 Блок вставляется в вывод epub, в противном случае он опускается.
нижний колонтитул (true или false, по умолчанию True ): если это правда, нижний колонтитул блок вставляется в вывод epub, в противном случае он опускается.

bizstyle

Простая голубоватая тема. Поддерживаются следующие параметры за пределами nosidebar и sidebarwidth :

Новое в версии 1.3: тема «alabaster», «sphinx_rtd_theme» и «bizstyle».

Изменено в версии 1.3: тема «по умолчанию» была переименована в «классическую». «По умолчанию» по-прежнему доступен, однако он выдаст уведомление о том, что это псевдоним для нового «Алебастровая» тема.

Сторонние темы

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

sphinx-themes.org — это галерея, в которой представлены различные темы для Sphinx, с демонстрационной документацией по каждой теме. Темы также можно найти на PyPI (с использованием классификатора Framework :: Sphinx :: Theme ), GitHub и GitLab.

цвет · PyPI

Установка

Вам не нужно загружать версию кода GIT, так как цвет доступно на PyPI.Итак, вы сможете запустить:

 цвет точки установки

Если вы скачали исходники GIT, то можете добавить colour.py прямо на один из ваших сайтов-пакетов (благодаря символической ссылке). Или установить текущая версия через традиционную:

 установка python setup.py

И если у вас нет исходных кодов GIT, но вы хотите получить последнюю master или ветку с github, вы также можете:

 pip install git + https: //github.com/vaab/colour

Или даже выберите конкретную ревизию (ветка / тег / фиксация):

 pip install git + https: // github.com / vaab / цвет @ мастер

Использование

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

Вот сокращенный пример типичного сценария использования:

Создание экземпляра

Создадим синий цвет:

 >>> из импорта цвета Цвет
>>> c = Цвет ("синий")
>>> c
<Цвет синий>

Обратите внимание, что все это эквивалентные примеры для создания красного цвета:

 Цвет ("красный") ## человек, веб-совместимое изображение
Цвет (красный = 1) ## количество синего и зеленого по умолчанию равно 0.0
Color ("blue", hue = 0) ## оттенок синего 0,66, оттенок красного 0,0
Цвет ("# f00") ## стандартное веб-представление с 3 шестнадцатеричными цифрами
Цвет ("# ff0000") ## стандартное веб-совместимое представление из 6 шестнадцатеричных цифр
Цвет (оттенок = 0, насыщенность = 1, яркость = 0,5)
Color (hsl = (0, 1, 0.5)) ## полная трехступенчатая спецификация HSL
Color (rgb = (1, 0, 0)) ## полная трехступенчатая спецификация RGB
Color (Color ("красный")) ## рекурсия не ломает объект

Считывание значений

Доступны несколько представительств:

 >>> ок.шестнадцатеричный
'# 00f'
>>> c.hsl # doctest: + ЭЛЛИПСИС
(0,66 ... 1,0, 0,5)
>>> c.rgb
(0,0, 0,0, 1,0)

И их разные части также доступны независимо, так как разные количество красного, синего, зеленого, в формате RGB:

 >>> c.red
0,0
>>> c.синий
1.0
>>> c. зеленый
0,0

Или оттенок, насыщенность и яркость представления HSL:

 >>> c.hue # doctest: + ЭЛЛИПСИС
0,66 ...
>>> c.saturation
1.0
>>> c. яркость
0,5

Примечание о свойстве .hex, оно возвращает наименьшее допустимое значение. когда возможно. Если вас интересует только длинное значение, используйте .hex_l:

 >>> c.hex_l
'# 0000ff'

Изменение цветных объектов

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

 >>> c.red = 1
>>> c
<Цвет пурпурный>

Нам может потребоваться обесцветить этот цвет:

 >>> ок.насыщенность = 0,5
>>> c
<Цвет # bf40bf>

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

 >>> "% s"% c
'# bf40bf'

>>> c.luminance = 1
>>> "% s"% c
'белый'

Палитра цветов

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

 >>> красный = Цвет ("красный")
>>> blue = Цвет ("синий")
>>> список (красный.range_to (синий, 5))
[<Красный цвет>, <Желтый цвет>, <Цвет лайма>, <Голубой цвет>, <Синий цвет>]

Или разное количество серого между черным и белым:

 >>> черный = Цвет ("черный")
>>> white = Цвет ("белый")
>>> list (black.range_to (белый, 6))
[<Черный цвет>, <Цвет # 333>, <Цвет # 666>, <Цвет # 999>, <Цвет #ccc>, <Белый цвет>]

Если необходимо создать графическое представление с цветовой шкалой между красным и зеленым («салатовый» цвет полностью зеленый):

 >>> лайм = Цвет ("лайм")
>>> список (красный.range_to (лайм, 5))
[<Цвет красный>, <Цвет # ff7f00>, <Желтый цвет>, <Цвет шартрез>, <Цвет лайма>]

Обратите внимание, насколько естественно желтый цвет отображается в человеческом формате и в середина шкалы. И что довольно необычный (но совместимый) Цвет «шартрез» был использован вместо шестнадцатеричное представление.

Сравнение цветов

Вменяемый по умолчанию

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

 >>> Цвет ("красный") == Цвет ("# f00") == Цвет ("синий", оттенок = 0)
Истинный

Алгоритм сравнения по умолчанию фокусируется только на «веб-представлении», которое эквивалентно сравнению длинного шестнадцатеричного представления (например, # FF0000) или более В частности, это эквивалентно сравнению количества красного, зеленого и синего цветов. представления RGB, каждое из этих значений квантуется по шкале из 256 значений.

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

Но это сравнение не сделало бы разницы между черно-красным и черный синий, оба они черные:

 >>> black_red = Цвет ("красный", яркость = 0)
>>> black_blue = Цвет ("синий", яркость = 0)

>>> black_red == black_blue
Истинный

Настройка

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

 >>> из импорта цвета RGB_equivalence, HSL_equivalence
>>> black_red = Color ("красный", яркость = 0, равенство = HSL_equivalence)
>>> black_blue = Color ("синий", яркость = 0, равенство = HSL_equivalence)

>>> black_red == black_blue
Ложь

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

 >>> black_red = Color ("красный", яркость = 0, равенство = RGB_equivalence)
>>> black_blue = Color ("синий", яркость = 0, равенство = RGB_equivalence)

>>> black_red == black_blue
Истинный

Вот как можно реализовать свою уникальную функцию сравнения:

 >>> saturation_equivalence = лямбда c1, c2: c1.насыщенность == c2.saturation
>>> красный = Цвет ("красный", равенство = эквивалент_ насыщенности)
>>> blue = Color ("синий", равенство = saturation_equivalence)
>>> white = Color ("белый", равенство = saturation_equivalence)

>>> красный == синий
Истинный
>>> белый == красный
Ложь

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

 >>> black_red = Color ("красный", яркость = 0, равенство = RGB_equivalence)
>>> black_blue = Color ("синий", яркость = 0, равенство = HSL_equivalence)

>>> black_red == black_blue
Истинный

Но обратная операция не эквивалентна!:

 >>> черный_синий == черный_красный
Ложь

Равенство с нецветными объектами

В качестве примечания: какой бы ни была ваша настраиваемая функция равенства, она не будет используется, если вы сравниваете с чем-либо еще, кроме экземпляра Color:

 >>> red = Color ("красный", равенство = лямбда c1, c2: True)
>>> blue = Color ("синий", равенство = lambda c1, c2: True)

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

 >>> красный == синий
Истинный

Но на другом нецветном объекте:

 >>> красный == нет
Ложь
>>> красный! = Нет
Истинный

На самом деле, экземпляры Color достаточно вежливо покинут другая сторона равенства имеет шанс решить вопрос о выходе, (путем выполнения собственного __eq__), поэтому:

 >>> класс OtherColorImplem (объект):
... def __init __ (self, color):
... self.color = цвет
... def __eq __ (себя, другое):
... вернуть self.color == other.web

>>> alien_red = OtherColorImplem ("красный")
>>> красный == alien_red
Истинный
>>> синий == alien_red
Ложь

И неравенство (с использованием __ne__) тоже вежливы:

 >>> класс AnotherColorImplem (OtherColorImplem):
... def __ne __ (я, другое):
... вернуть self.color! = other.web

>>> new_alien_red = AnotherColorImplem ("красный")
>>> красный! = new_alien_red
Ложь
>>> синий! = new_alien_red
Истинный

Выбор произвольного цвета для объекта Python

Базовое использование

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

 >>> foo = объект ()
>>> бар = объект ()

>>> Color (pick_for = foo) # doctest: + ELLIPSIS
<Цвет ...>
>>> Цвет (pick_for = foo) == Цвет (pick_for = foo)
Истинный
>>> Цвет (pick_for = foo) == Color (pick_for = bar)
Ложь

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

Расширенное использование

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

 >>> my_picker = lambda obj: "красный" if isinstance (obj, int) else "синий"
>>> Цвет (pick_for = 3, picker = my_picker, pick_key = None)
<Цвет красный>
>>> Цвет (pick_for = "foo", picker = my_picker, pick_key = None)
<Цвет синий>

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

Таким образом:

 >>> класс MyObj (str): пройти
>>> my_obj_color = Цвет (pick_for = MyObj ("foo"))
>>> my_str_color = Цвет (pick_for = "foo")
>>> my_obj_color == my_str_color
Ложь

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

Ни hash, ни str не являются идеальным решением. Так что не стесняйтесь использовать pick_key во время создания экземпляра Color, чтобы указать свой способ идентификации объектов, например:

 >>> a = объект ()
>>> b = объект ()
>>> Цвет (pick_for = a, pick_key = id) == Color (pick_for = b, pick_key = id)
Ложь

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

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

Цвет фабрики

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

Вы можете создать индивидуальную фабрику цветов с помощью make_color_factory:

 >>> из импорта цвета make_color_factory, HSL_equivalence, RGB_color_picker

>>> get_color = make_color_factory (
... равенство = HSL_equivalence,
... picker = RGB_color_picker,
... pick_key = str,
...)

Все цвета созданы благодаря классу CustomColor вместо стандартного по умолчанию получит указанные атрибуты:

 >>> black_red = get_color ("красный", яркость = 0)
>>> black_blue = get_color ("синий", яркость = 0)

Конечно, это всегда экземпляры класса Color:

 >>> isinstance (black_red, Цвет)
Истинный

Равенство было изменено с обычных значений по умолчанию, поэтому:

 >>> черный_ красный == черный_ синий
Ложь

Это потому, что эквивалент цвета по умолчанию был установлен на HSL_equivalence.

Страница без проблем

Все категорииActivitéBeauté & Bien être Accessoires beauté Autre Cheveux & coiffure Cosmétiques & Soins Massages Pro Parfums Santé & MédecineКонцерты, мероприятия и дивертисменты Autre Concert Divertissement Evenement Rencontre Sportive Sportive Showbizers Forms Of TheatreDiscussion emploiПредприятия и услуги Autre Équipement de Bureau Équipement professionalnel Matériaux de Construction ServicesErotica (массаж и т. д.) Femme cherche… Forum de DiscussionHomme cherche… Immobilier Appartements à louer Appartements à vendre Appartements meublés Bureau Autre Investissements Locriens à Immobiliers vendre Studios & Chambres à Louer Terrains & parcellesInformatique & Multimédia Accessoires informatiques Autre Jeux vidéos & Consoles Ordinateurs Photo & Caméras Son, Casques, Enceintes TV & VidéoLoisirs Искусство и Artisanat Autre Événements Музыкальные инструменты Livres, Films, Jouets Спорт и фитнес Voyage & Tourisme Mode & Vêtements Accessoires de mode & Tissus Autre Bijoux & Montres Chaussures Enfants Chaussures Femme Chaussures Homagerme Vêtements Сумки и мешочки de compagnie Arts de la table & Vaisselles Autre Bricolage & Jardinage Décoration Électroménager Enfants & Bébés Literie Meubles & LuminairesПродукты, сельское хозяйство и Elevage Autre Céréale Dérivé de céréale Épice Fruit alimentaire Huile essen à волокна Оригинальные животные Viande Produits Industriels Autre céréales du petit déjeuner Cuisine Les cookies Les boissons Les chocolats Les glacesRencontre AmicaleRencontres Activité — Erotica cherche Homme Homme — Femme Homme cherche Homme rencontre Massag e Rencontre Amicale rencontre Femme Sans lendemainSans lendemainТелефоны и планшеты Аксессуары Téléphone Autre Мобильные телефоны и смартфоны ПланшетыЛучшая кулинария и рецептыVéhicules Autre Bateau & Nautisme Location de véhicules Motos & Vélos Pièces détachés voicitures Голосование и аксессуары

цветов и шрифтов | IntelliJ IDEA

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

IntelliJ IDEA использует цветовые схемы, которые определяют предпочтительные цвета и шрифты.

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

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

Выберите цветовую схему

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Цветовая схема.
Используйте список «Схема» для выбора цветовой схемы.

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

Classic Light: разработан для тем интерфейса macOS Light и Windows 10 Light
Darcula: разработан для темы интерфейса Darcula
High контраст: разработан для темы интерфейса High Contrast (рекомендуется для пользователей с недостаточным зрением)
IntelliJ Light: разработан для темы интерфейса IntelliJ Light

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

Настройка цветовой схемы

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

Дублировать цветовую схему

Нажмите Ctrl + Alt + S , чтобы откройте настройки IDE и выберите Editor | Цветовая схема.
Выберите цветовую схему, щелкните, а затем щелкните Дублировать.
(Необязательно) Чтобы переименовать настраиваемую схему, щелкните и выберите «Переименовать».

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

Чтобы определить настройки цвета и шрифта, откройте Редактор | Страница Color Scheme настроек IDE Ctrl + Alt + S . Параметры ниже разделены на разделы. Например, в разделе «Общие» определены основные цвета редактора, такие как промежуток, номера строк, ошибки, предупреждения, всплывающие окна, подсказки и т. Д.Раздел «Параметры языка по умолчанию» содержит общие настройки подсветки синтаксиса, которые по умолчанию применяются ко всем поддерживаемым языкам программирования. В большинстве случаев достаточно настроить параметры языка по умолчанию и при необходимости внести изменения для конкретных языков. Чтобы изменить унаследованные настройки цвета для элемента, снимите флажок «Наследовать значения от».

Выделение семантики

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

Включить семантическую подсветку

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Цветовая схема | Язык по умолчанию | Семантическое выделение.
Установите флажок «Семантическое выделение» и при необходимости настройте диапазоны цветов.

Это включит семантическую подсветку для всех языков, которые наследуют этот параметр от Language Defaults. Чтобы вместо этого включить его для определенного языка (например, Java), перейдите в Редактор | Цветовая схема | Java | Страница семантического выделения настроек IDE Ctrl + Alt + S , снимите флажок «Наследовать значения от» и установите флажок «Выделение семантики».

Совместное использование цветовых схем

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

Экспорт цветовой схемы как XML

IntelliJ IDEA может сохранить настройки цветовой схемы в виде файла XML с расширением .icls. Затем вы можете импортировать файл в другую установку.

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Цветовая схема.
В списке «Схема» выберите цветовую схему, щелкните, затем щелкните «Экспорт» и выберите цветовую схему IntelliJ IDEA (.icls).
Укажите имя и расположение файла и сохраните его.

Экспорт цветовой схемы как плагина

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

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Цветовая схема.
В списке «Схема» выберите цветовую схему, щелкните, затем щелкните «Экспорт» и выберите «Плагин цветовой схемы .jar».
В диалоговом окне «Создать плагин цветовой схемы» укажите сведения о версии и информацию о поставщике. Затем нажмите ОК.

Когда вы устанавливаете плагин с цветовой схемой, эта схема будет добавлена в список предопределенных схем.

Импорт цветовой схемы

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Цветовая схема.
В списке «Схема» выберите цветовую схему, щелкните, затем щелкните «Импортировать схему».

Шрифты

Чтобы настроить шрифт по умолчанию, откройте Редактор | Шрифт страницы настроек IDE Ctrl + Alt + S . Этот шрифт используется и наследуется во всех цветовых схемах по умолчанию.

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

Настроить шрифт цветовой схемы

Вы можете установить другой шрифт для текущей схемы.

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

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Цветовая схема | Цветовая схема шрифта.
Установите флажок Использовать шрифт цветовой схемы вместо установленного по умолчанию.

Настройка шрифта консоли

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

Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выберите Editor | Цветовая схема | Шрифт консоли.
Установите флажок «Использовать шрифт консоли вместо шрифта по умолчанию».

Советы по повышению производительности

См. Настройки цветовой схемы для текущего символа

Поместите курсор на нужный символ, нажмите Ctrl + Shift + A , найдите действие «Перейти к цветам и шрифтам» и выполните его .

Это откроет соответствующие настройки цветовой схемы для символа под кареткой.

Посмотрите, какие шрифты в настоящее время используются в редакторе.

Откроется диалоговое окно «Шрифты, используемые в редакторе» со списком шрифтов.

Действия «Переход к цветам и шрифтам» и «Показать шрифты, используемые редактором» не имеют ярлыков по умолчанию. Чтобы назначить ярлык для действия, выберите его во всплывающем окне «Найти действие» и нажмите Alt + Enter .

Последнее изменение: 26 июля 2021 г.

HTML color Mac, Pikka для Mac (программное обеспечение для управления цветом экрана)

Оригинальное название: Pikka for Mac (программа для раскрашивания экрана)

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

Программная функция

многоцветный

Нужно один раз выбрать другой цвет? Просто удерживайте Shift при выборе цвета.

Мощный ярлык

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

Вставьте цвет везде

Скопируйте и вставьте код цвета в различные форматы. Пикка подходит для разработчиков и дизайнеров. Переключайтесь между RGB, CSS HEX, CSS HSL, подходит для формата разработчиков iOS, Android или .NET.

Цветное хранилище

Вы во всех цветах в одном месте. Библиотека цветов существует всегда, она вам нужна. Используйте ярлыки, чтобы открыть библиотеку, которая останется в нижней части экрана. Создайте папку и перетащите цвет между папками.Вся папка прикреплена к HTML, расширению SWIFT / Objective-C Uicolor / NSColor, палитре Adobe и т. Д. Дважды щелкните цвет в библиотеке, который нужно скопировать.

Палитра и оттенок

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

редактировать

Создайте новый цвет или настройте цвет. Редактор делает процесс редактирования незабываемым. Настройте свой цвет в различных режимах RGB, HSB или HSL и просмотрите все оттенки или приятные палитры с цветами.

Https colorscheme ru html colors html: Конвертер Цветов Онлайн — HEX ⇒ RGB ⇒ RGBA ⇒ CMYK ⇒ HSL ⇒ HSLA ⇒ HSB ⇒ HSV ⇒ XYZ ⇒ LAB. Калькулятор цветов HTML. Генератор цветов CSS3 — ColorScheme.Ru

Цвета Pantone — Онлайн каталог Pantone. Таблица Пантонов по CMYK и RGB — ColorScheme.Ru

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

Цвета NCS — Каталог цветов NCS.

Цвета RAL – Таблица RAL CLASSIC — Все каталоги цветов RAL по CMYK и RGB с примерами — ColorScheme.Ru

Применение цвета к HTML элементам с помощью CSS — HTML

Текст

Блоки

Границы

Как можно ещё использовать цвет

Ключевые слова

RGB значения

Шестнадцатеричная запись в виде строки

RGB запись в виде функции

HSL запись в виде функции

Цвет в таблицах стилей CSS

HTML

CSS

Example: Picking a color

HTML

CSS

JavaScript

Finding the right colors

Base color

Fleshing out the palette

Color theory resources

Color and accessibility

Palette design example

Язык разметки HTML | Школа программирования ProgTips

1. Что такое HTML?

2. Минимальная веб-страница

3. Структура веб-страницы

4. Таблицы

5. Блоки, аудио и видео

6. Цвета

7. Формы

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

Правила цветовых сочетаний

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

Типы цветовых сочетаний

Как создать цветовые схемы для сайта, используя цветовой круг

Перечень сайтов, которые помогут в работе по подбору цветовых схем:

Ищите готовые цветовые схемы на сайтах:

Таблица стилей (CSS) в ePub — Для авторов — Статьи — Каталог статей

Электронная почта в темном режиме: полное практическое руководство

Темный режим: более темная цветовая палитра для слабого освещения или в ночное время

Какие почтовые клиенты поддерживают темный режим?

Как клиенты применяют темный режим к моей электронной почте?

Как мне настроить таргетинг на пользователей темного режима с помощью моих собственных стилей?

Цветовое колесо — теория цвета и калькулятор

Теория цвета и цветовое колесо

Сочетания цветов

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

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

Аналог

Triadic

Tetradic

Основные, второстепенные и третичные цвета

Теплые и холодные цвета

Оттенки, оттенки и тона

Оттенок

Оттенок

Тона

Оттенок, насыщенность и яркость

Значения цвета и цветовые схемы

Тематика HTML — документация Sphinx

шаблоны

Использование темы

Встроенные темы

и

заголовки.

Сторонние темы

цвет · PyPI

Установка

Использование

Создание экземпляра

Считывание значений

Изменение цветных объектов

Палитра цветов

Сравнение цветов