Содержание

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

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

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

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

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

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

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

ОбразецЦвет PantoneCMYKHTMLRGB
PANTONE 10000560#FCEA76252234118
PANTONE 10100680#FCE85F25223295
PANTONE 10200950#FEE5002542290
PANTONE 1035510016#D0BC002081880
PANTONE 10471310028#BBA30D18716313
PANTONE 10513188845#99873015313548
PANTONE 10600750#FCE85D25223293
PANTONE 10700920#FDE72425323136
PANTONE 10805980#F9DA002492180
PANTONE 109091000#F8D5002482130
PANTONE 1102221008#DBB21621917822
PANTONE 11182110028#B6992018215332
PANTONE 112102010040#A48C1A16414026
PANTONE 11302830#FAE34E25022778
PANTONE 11404870#F9DE4524922269
PANTONE 11506870#F8DB4624821970
PANTONE 1160141000#F5CB082452038
PANTONE 11762710012#CDA31F20516331
PANTONE 11872810030#B48F1F18014331
PANTONE 119172210047#937F2014712732
PANTONE 12005640#F7DD76247221118
PANTONE 12108700#F6D86F246216111
PANTONE 122011800#F5D25824521088
PANTONE 123019890#F2C54124219765
PANTONE 1240301000#EDB22023717832
PANTONE 12563210024#BB912118714533
PANTONE 126113110036#A7861D16713429
PANTONE 12704620#FAE17B250225123
PANTONE 12807750#F8D96224821798
PANTONE 129011780#F6D15A24620990
PANTONE 1300321000#EDAC1A23717226
PANTONE 13123910010#D0941F20814831
PANTONE 13293810032#AB7F2017112732
PANTONE 133193710059#775F1F1199531
PANTONE 134012600#F5D27A245210122
PANTONE 135021760#F1C15C24119392
PANTONE 136028870#EFB64623918270
PANTONE 1370411000#EAA12423416136
PANTONE 1380521000#E68C2823014040
PANTONE 13974910025#B2782717812039
PANTONE 140194910054#7D5A251259037
PANTONE 141016650#F5CD66245205102
PANTONE 142024780#F2BF4C24219176
PANTONE 143032870#F0B33624017954
PANTONE 1440511000#EA961C23415028
PANTONE 1454531008#D0892120813733
PANTONE 14675010034#A9762016911832
PANTONE 14719389058#78642812010040
PANTONE 148017430#F4D199244209153
PANTONE 149024510#F2C688242198136
PANTONE 150041780#EDAA5023717080
PANTONE 1510601000#E88D2123214133
PANTONE 1520661000#E6852323013335
PANTONE 15356410017#C1772319311935
PANTONE 15486610041#9D61201579732
PANTONE 155012340#F5D7A5245215165
PANTONE 156023490#F1C382241195130
PANTONE 157042740#EBA34423516368
PANTONE 158062950#E47E1A22812626
PANTONE 1591721007#D0651E20810130
PANTONE 16067110031#AB5A201719032
PANTONE 161166710071#66401D1026429
PANTONE 162025350#F0C4A0240196160
PANTONE 163044520#EBA677235166119
PANTONE 164059800#E68A4823013872
PANTONE 1650701000#E3782822712040
PANTONE 1660761000#E06C2A22410842
PANTONE 16757710015#BB5D291879341
PANTONE 168128010060#6F3B201115932
PANTONE 169030260#EEBCA8238188168
PANTONE 170048500#E89C77232156119
PANTONE 171061720#E4834E22813178
PANTONE 172073870#E06E3722411055
PANTONE 173082942#D7572B2158743
PANTONE 17488610036#9C41241566536
PANTONE 17518797856#77402E1196446
PANTONE 176035180#EDB9B4237185180
PANTONE 177054380#E7948A231148138
PANTONE 178070580#E27865226120101
PANTONE 179087850#DD51432218167
PANTONE 1803918612#C1433C1936760
PANTONE 18121938850#80352F1285347
PANTONE 18203180#ECBEC5236190197
PANTONE 183049170#E79CA6231156166
PANTONE 184073320#DF6B7C223107124
PANTONE 185093790#D937402175564
PANTONE 1862100856#C92A392014257
PANTONE 18771008226#AC2B371724355
PANTONE 188161006558#7D29351254153
PANTONE 189039100#EBB3BC235179188
PANTONE 190056180#E58F9E229143158
PANTONE 191079360#DE627622298118
PANTONE 192094640#DB3B502195980
PANTONE 1932996211#C32E4C1954676
PANTONE 19481005537#9D29451574169
PANTONE 19519905055#7E35451265369
PANTONE 19602360#EFCAD0239202208
PANTONE 197046120#E8A1B0232161176
PANTONE 198082370#DC567222086114
PANTONE 1990100720#D829492164173

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

ОбразецЦвет NCSCMYKHTMLRGB
NCS S 0300-N0000#FFFFFF255255255
NCS S 0500-N0011#FCFCFB252252251
NCS S 1000-N0026#F2F2F0242242240
NCS S 1500-N01214#E0DFDE224223222
NCS S 2000-N01218#D8D8D7216216215
NCS S 2500-N01223#CECDCC206205204
NCS S 3000-N01329#C0BFBE192191190
NCS S 3500-N01336#B0B0AF176176175
NCS S 4000-N01341#A5A5A4165165164
NCS S 4500-N01447#979796151151150
NCS S 5000-N01451#8E8E8D142142141
NCS S 5500-N02555#858583133133131
NCS S 6000-N02560#7A7977122121119
NCS S 6500-N02565#6D6D6B109109107
NCS S 7000-N02570#60605E969694
NCS S 7500-N02575#545452848482
NCS S 8000-N02582#434241676665
NCS S 8500-N1001592#262824384036
NCS S 9000-N15025100#111410172016
NCS S 0502-Y0080#FFFDF2255253242
NCS S 1002-Y001010#EAE8DB234232219
NCS S 1502-Y001020#D5D3C7213211199
NCS S 2002-Y001025#C9C8BD201200189
NCS S 2502-Y001033#B8B7AD184183173
NCS S 3502-Y001146#9A9B92154155146
NCS S 4502-Y001255#86867E134134126
NCS S 5502-Y001265#6D6D66109109102
NCS S 6502-Y001275#55554F858579
NCS S 7502-Y001288#353430535248
NCS S 8502-Y0015100#151311211917
NCS S 0502-Y50R02100#FFFAED255250237
NCS S 1002-Y50R03107#F0E9DD240233221
NCS S 1502-Y50R041017#DAD4CA218212202
NCS S 2002-Y50R051025#C8C1B9200193185
NCS S 0502-R0230#FFFBF8255251248
NCS S 1002-R03510#E9E4DF233228223
NCS S 1502-R04520#D4CFCC212207204
NCS S 2002-R05527#C3BEBC195190188
NCS S 2502-R05532#B9B4B2185180178
NCS S 3502-R05550#918D8D145141141
NCS S 4502-R05560#7A7776122119118
NCS S 5502-R061065#6C6965108105101
NCS S 6502-R081075#54504D848077
NCS S 7502-R091090#2F2C2A474442
NCS S 8502-R01010100#161212221818
NCS S 0502-R50B2200#FCFBFD252251253
NCS S 1002-R50B22012#E1E2E5225226229
NCS S 1502-R50B44018#D1D1D6209209214
NCS S 2002-R50B44028#BCBDC2188189194
NCS S 0502-B3000#FAFDFF250253255
NCS S 1002-B40010#E3E8EA227232234
NCS S 1502-B40018#D2D7DA210215218
NCS S 2002-B40027#BFC4C7191196199
NCS S 2502-B40035#AEB3B6174179182
NCS S 3502-B40050#8D9194141145148
NCS S 4502-B40060#767A7C118122124
NCS S 5502-B70070#5B5F61919597
NCS S 6502-B90080#434749677173
NCS S 7502-B120090#292D2F414547
NCS S 8502-B3000100#09111591721
NCS S 0502-B50G3040#FAFDF8250253248
NCS S 1002-B50G4058#E7EBE6231235230
NCS S 1502-B50G70519#CBD3D0203211208
NCS S 2002-B50G80528#B6BFBD182191189
NCS S 0502-G3050#FAFDF7250253247
NCS S 1002-G5085#EBF0E7235240231
NCS S 1502-G50815#D6DBD3214219211
NCS S 2002-G50825#C1C6BF193198191
NCS S 2502-G50833#B0B5B0176181176
NCS S 3502-G50847#919692145150146
NCS S 4502-G50855#808481128132129
NCS S 5502-G50870#5C5F5C929592
NCS S 6502-G50880#464845707269
NCS S 7502-G100890#2B2E2C434644
NCS S 8502-G10020100#131411192017
NCS S 0502-G50Y2050#FCFDF7252253247
NCS S 1002-G50Y2055#F0F2EB240242235
NCS S 1502-G50Y301015#DADCD0218220208
NCS S 2002-G50Y301025#C4C7BD196199189
NCS S 0505-Y00140#FFFBE7255251231
NCS S 0507-Y00250#FFF9D6255249214
NCS S 0510-Y00300#FFF8CA255248202
NCS S 0515-Y00350#FFF6BE255246190
NCS S 0520-Y03460#FFEEA7255238167
NCS S 0530-Y03550#FFEB92255235146
NCS S 0540-Y03700#FEE66B254230107
NCS S 0550-Y07800#FDDD4E25322178
NCS S 0560-Y010900#FDD72C25321544
NCS S 0570-Y081000#FAD5002502130
NCS S 0580-Y0121000#F9CF002492070
NCS S 1005-Y00205#F5F0D3245240211
NCS S 1010-Y01355#F4EAB5244234181
NCS S 1015-Y03384#F6E9B0246233176
NCS S 1020-Y04435#F4E5A3244229163
NCS S 1030-Y08553#F6DE8A246222138
NCS S 1040-Y010602#F9DD80249221128
NCS S 1050-Y012800#FED74C25421576
NCS S 1060-Y013900#FCD32B25221143
NCS S 1070-Y017902#F7CA2724720239
NCS S 1080-Y0201005#ECBC002361880

Цвета 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) не является нормативным, для обозначения цвета достаточно запомнить лишь цифры.

Жёлтые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 1000
Зелёно-бежевый
 10  10  50  10  0   3  40  10#CCC58F204 197 143
RAL 1001
Бежевый
  0  20  50  20 10  20  40   0#D1BC8A209 188 138
RAL 1002
Песочно-жёлтый
  0  20  60  10  3  23  60   7#D2B773210 183 115
RAL 1003
Сигнальный жёлтый
  5  20  90   0  0  20 100   0#F7BA0B247 186  11
RAL 1004
Жёлто-золотой
  5  30 100   0  0  20 100  10#E2B007226 176   7
RAL 1005
Медово-жёлтый
 10  30 100   0 10  20  90   0#C89F04200 159   4
RAL 1006
Кукурузно-жёлтый
  5  30  90   0  0  30 100   0#E1A100225 161   0
RAL 1007
Нарциссово-жёлтый
  0  40 100   0  0  30 100   0#E79C00231 156   0
RAL 1011
Коричнево-бежевый
 30  40  70   0 20  50 100  10#AF8A54175 138  84
RAL 1012
Лимонно-жёлтый
 10  10  90   0 10  10 100   0#D9C022217 192  34
RAL 1013
Жемчужно-белый
  0   5  20  10 10  10  20   0#E9E5CE233 229 206
RAL 1014
Слоновая кость
  0  10  40  10 10  10  30   0#DED09F222 208 159
RAL 1015
Светлая слоновая кость
  0   5  30  10 10  10  20   0#EADEBD234 222 189
RAL 1016
Жёлтая сера
 10   0  90   0 10   0  80   0#EAF044234 240  68
RAL 1017
Шафраново-жёлтый
  0  30  70   0  0  30  90   0#F4B752244 183  82
RAL 1018
Цинково-жёлтый
  0   0  80   0  0   0  90   0#F3E03B243 224  59
RAL 1019
Серо-бежевый
  5  20  40  40 10  20  30   0#A4957D164 149 125
RAL 1020
Оливково-жёлтый
  1   5  30  40 10  10  50  25#9A9464154 148 100
RAL 1021
Рапсово-жёлтый
  0  10 100   0  0   0 100   0#EEC900238 201   0
RAL 1023
Транспортно-жёлтый
  0  10  90   0  0  10 100   0#F0CA00240 202   0
RAL 1024
Охра жёлтая
 30  40  70  10  0  20 100  25#B89C50184 156  80
RAL 1026 Флуоресцентный (Fluorescent)
Люминесцентный жёлтый
  0   0 100   0  0   0 100   0#F5FF00245 255   0
RAL 1027
Карри жёлтый
 10  20  90  40 30  30 100   0#A38C15163 140  21
RAL 1028
Дынно-жёлтый
  0  30 100   0  0  20 100   0#FFAB00255 171   0
RAL 1032
Жёлтый ракитник
  0  30  90  10  0  20 100  10#DDB20F221 178  15
RAL 1033
Георгиново-жёлтый
  0  30  90   0  0  30 100   0#FAAB21250 171  33
RAL 1034
Пастельно-жёлтый
  0  30  80   0  0  30  60   0#EDAB56237 171  86
RAL 1035 Жемчужный Глянец (Pearl Gloss)
Перламутрово-бежевый
 16  19  33  26 20  20  33  12#A29985162 153 133
RAL 1036 Жемчужный Глянец (Pearl Gloss)
Перламутрово-золотой
 33  46  80  18  9  36  97  28#927549146 117  73
RAL 1037
Солнечно-жёлтый
  0  40 100   0  0  35  90   0#EEA205238 162   5
Оранжевые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 2000
Жёлто-оранжевый
  0  50 100   0  0  40 100   0#DD7907221 121   7
RAL 2001
Красно-оранжевый
  0  80 100  20  0  70 100   0#BE4E24190  78  36
RAL 2002
Алый
  0  90 100  10  0  80 100   0#C63927198  57  39
RAL 2003
Пастельно-оранжевый
  0  52 100   0  0  60 100   0#FA842B250 132  43
RAL 2004
Оранжевый
  0  70 100   0  0  70 100   0#E75B12231  91  18
RAL 2005 Флуоресцентный (Fluorescent)
Люминесцентный оранжевый
  0  75  75   5  0  50 100   0#FF2300255  35   0
RAL 2007 Флуоресцентный (Fluorescent)
Люминесцентный ярко-оранжевый
  0  50 100   0  0  20  90   0#FFA421255 164  33
RAL 2008
Ярко-красно-оранжевый
  0  60 100   0  0  50 100   0#F3752C243 117  44
RAL 2009
Транспортный оранжевый
  5  70 100  10  0  60 100   0#E15501225  85   1
RAL 2010
Сигнальный оранжевый
  0  70 100  10  0  60 100   0#D4652F212 101  47
RAL 2011
Насыщенный оранжевый
  0  55 100   0  0  40 100   0#EC7C25236 124  37
RAL 2012
Лососёво-оранжевый
  0  60  70   0  0  80  80   0#DB6A50219 106  80
RAL 2013 Жемчужный Глянец (Pearl Gloss)
Перламутрово-оранжевый
  0  80 100  40 10  80 100  10#954527149  69  39
Красные тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 3000
Огненно-красный
  0 100 100  20  0 100  90   0#AB2524171  37  36
RAL 3001
Сигнальный красный
 20 100  90  10  0 100  90   0#A02128160  33  40
RAL 3002
Карминно-красный
 10 100  90  20  0 100  90   0#A1232B161  35  43
RAL 3003
Рубиново-красный
  0 100 100  40  0 100  90  15#8D1D2C141  29  44
RAL 3004
Пурпурно-красный
 20 100 100  60  0 100  90  30#701F29112  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#703731112  55  49
RAL 3011
Коричнево-красный
 20 100 100  40  0 100  90  30#7E292C126  41  44
RAL 3012
Бежево-красный
  5  50  50  10 20  60  50   0#CB8D73203 141 115
RAL 3013
Томатно-красный
 20  90 100  20  0 100 100  15#9C322E156  50  46
RAL 3014
Розовый антик
  0  70  30  10 10  70  40   0#D47479212 116 121
RAL 3015
Светло-розовый
  0  50  20  10 10  40  10   0#E1A6AD225 166 173
RAL 3016
Кораллово-красный
  0  90  90  20  0  90  90  10#AC4034172  64  52
RAL 3017
Розовый
  0  80  50  10  0  80  40   0#D3545F211  84  95
RAL 3018
Клубнично-красный
  5  90  70   5  0  90 100   0#D14152209  65  82
RAL 3020
Транспортный красный
  0 100 100  10  0  90  90   0#C1121C193  18  28
RAL 3022
Лососёво-красный
  0  60  70   0  0  70  60   0#D56D56213 109  86
RAL 3024 Флуоресцентный (Fluorescent)
Люминесцентный красный
  0  80  90   0  0  70 100   0#F70000247   0   0
RAL 3026 Флуоресцентный (Fluorescent)
Люминесцентный ярко-красный
  0  80 100   0  0  70 100   0#FF0000255   0   0
RAL 3027
Малиново-красный
  0 100  70  20  0 100  60  15#B42041180  32  65
RAL 3028
Красный
  5 100 100   0  5 100 100   0#CB3334203  51  52
RAL 3031
Ориент красный
 20 100  90  20  0  90  60  15#AC323B172  50  59
RAL 3032 Жемчужный Глянец (Pearl Gloss)
Перламутрово-рубиновый
 10 100  90  50 10 100 100  30#711521113  21  33
RAL 3033 Жемчужный Глянец (Pearl Gloss)
Перламутрово-розовый
  8  84  72  13  0  93  93   7#B24C43178  76  67
Фиолетовые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 4001
Красно-сиреневый
 60  70   5  10 50  97  20   0#8A5A83138  90 131
RAL 4002
Красно-фиолетовый
 40 100  90   5  0 100  40  30#933D50147  61  80
RAL 4003
Вересково-фиолетовый
 10  70  10   0  7  90   0   0#D15B8F209  91 143
RAL 4004
Бордово-фиолетовый
 60 100  50  20 10 100   0  50#691639105  22  57
RAL 4005
Сине-сиреневый
 60 100   5  10 50  60   0   0#83639D131  99 157
RAL 4006
Транспортный пурпурный
 50 100   0  10 30 100   0   0#992572153  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#904684144  70 132
RAL 4009
Пастельно-фиолетовый
 40  40  30   0 17  40  10  15#A38995163 137 149
RAL 4010
Телемагента
 10  90  30   0  0 100   0   0#C63678198  54 120
RAL 4011 Жемчужный Глянец (Pearl Gloss)
Перламутрово-фиолетовый
 47  57   3   7 47  64   0   0#8773A1135 115 161
RAL 4012 Жемчужный Глянец (Pearl Gloss)
Перламутрово-ежевичный
 50  50  20  23 54  57   3  26#6B6880107 104 128
Синие тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 5000
Фиолетово-синий
100  40   5  40100  70  10  25#384C70 56  76 112
RAL 5001
Зелёно-синий
 90  20   0  80100  50  10  20#1F4764 31  71 100
RAL 5002
Ультрамариново-синий
100  70   0  40100  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  40100  40   0  20#41678D 65 103 141
RAL 5008
Серо-синий
 60   0   0  90100  50  10  60#313C48 49  60  72
RAL 5009
Лазурно-синий
 90  30  10  40100  40  10  20#2E5978 46  89 120
RAL 5010
Горечавково-синий
100  40   5  40100  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#6C7C98108 124 152
RAL 5015
Небесно-синий
100  30   0  10100  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  10100  30   0  20#1A5784 26  87 132
RAL 5020
Океанская синь
100   0  40  80100  30  50  40#0B4151 11  65  81
RAL 5021
Водная синь
100  20  50  10100   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  20100  60  10   0#4D668E 77 102 142
RAL 5024
Пастельно-синий
 70  20  10  20 63  17   7   8#6A93B0106 147 176
RAL 5025 Жемчужный Глянец (Pearl Gloss)
Перламутровый горечавково-синий
 97  48  31  15100  30  20  20#296478 41 100 120
RAL 5026 Жемчужный Глянец (Pearl Gloss)
Перламутровый ночной синий
100  80   0  50 90   0  10  25#102C54 16  44  84
Зелёные тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 6000
Патиново-зелёный
 80  20  60  20 98   8  68  17#327662 50 118  98
RAL 6001
Изумрудно-зелёный
 90  30  90  10100   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  40100  30  50  40#0E4243 14  66  67
RAL 6005
Зелёный мох
100  60  90  20100  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  80100 100 100  75#35382E 53  56  46
RAL 6009
Пихтовый зелёный
 90  50  90  60100  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#66825B102 130  91
RAL 6012
Чёрно-зелёный
100  80 100  20100  50  80  60#31403D 49  64  61
RAL 6013
Тростниково-зелёный
 40  20  60  40 40  40  70  10#797C5A121 124  90
RAL 6014
Жёлто-оливковый
 80  50  90  60 50  70 100  50#444337 68  67  55
RAL 6015
Чёрно-оливковый
 80  60  70  40100 100 100  75#3D403A 61  64  58
RAL 6016
Бирюзово-зелёный
100  30  80   0100   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#B7D9B1183 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#86A47C134 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  40100   0  70  15#005D52  0  93  82
RAL 6027
Светло-зелёный
 60   0  30   0 50   0  20   0#81C0BB129 192 187
RAL 6028
Сосновый зелёный
100  60 100   0100  30 100  40#2D5546 45  85  70
RAL 6029
Мятно-зелёный
100  20 100   5100   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#7FB0B2127 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  50100  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   0100   0 100   0#00BB2E  0 187  46
Серые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 7000
Серая белка
 40  10  10  40 33   6   6  36#7E8B92126 139 146
RAL 7001
Серебристо-серый
 10   0   0  40 20   7   7  30#8F999F143 153 159
RAL 7002
Оливково-серый
 30  30  50  40 37  37  57  15#817F68129 127 104
RAL 7003
Серый мох
 30  20  40  40 27  20  40  40#7A7B6D122 123 109
RAL 7004
Сигнальный серый
  0   0   0  45  7   4   4  33#9EA0A1158 160 161
RAL 7005
Мышино-серый
 30  10  20  60 48  42  39  20#6B716F107 113 111
RAL 7006
Бежево-серый
  0  10  30  60 29  43  56  35#756F61117 111  97
RAL 7008
Серое хаки
 30  40  70  40 10  30  90  40#746643116 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  80100  50  30  60#373F43 55  63  67
RAL 7021
Чёрно-серый
 50  10   5  95100  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#818479129 132 121
RAL 7024
Графитовый серый
 80  60  50  40 90  60  30  60#474A50 71  74  80
RAL 7026
Гранитовый серый
 60  20  30  80100  40  50  60#374447 55  68  71
RAL 7030
Каменно-серый
 20  10  20  40  0   0  10  40#939388147 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#B9B9A8185 185 168
RAL 7033
Цементно-серый
 30  10  30  40 37  13  37  30#818979129 137 121
RAL 7034
Жёлто-серый
  5   5  40  40  0   0  30  40#939176147 145 118
RAL 7035
Светло-серый
  5   0   5  20 20  14  14   0#CBD0CC203 208 204
RAL 7036
Платиново-серый
 10  10  10  40 30  30  20  10#9A9697154 150 151
RAL 7037
Пыльно-серый
 30  20  20  40 11   8   8  46#7C7F7E124 127 126
RAL 7038
Агатовый серый
 30  10  20  20 30  22  22   0#B4B8B0180 184 176
RAL 7039
Кварцевый серый
 50  40  50  40 60  60  60   0#6B695F107 105  95
RAL 7040
Серое окно
 20   5  10  40 30  20  10  10#9DA3A6157 163 166
RAL 7042
Транспортный серый A
 30  10  20  40 17   9   9  33#8F9695143 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#BDBDB2189 189 178
RAL 7045
Телегрей 1
 20  10  10  40 10   0   0  40#91969A145 150 154
RAL 7046
Телегрей 2
 30  10  10  40 31  18  14  25#82898E130 137 142
RAL 7047
Телегрей 4
  0   0   5  20  0   0   0  12#CFD0CF207 208 207
RAL 7048 Жемчужный Глянец (Pearl Gloss)
Перламутровый мышино-серый
 32  32  39  27 18  18  31  34#888175136 129 117
Коричневые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 8000
Зелёно-коричневый
 50  50  80  10 20  40  90  25#887142136 113  66
RAL 8001
Охра коричневая
 40  60  90  10 10  50 100  10#9C6B30156 107  48
RAL 8002
Сигнальный коричневый
 60  80  80  10 20  80 100  30#7B5141123  81  65
RAL 8003
Глиняный коричневый
 50  70  80  10  0  60 100  40#80542F128  84  47
RAL 8004
Медно-коричневый
 40  80  80  10  0  70 100  25#8F4E35143  78  53
RAL 8007
Олень коричневый
 60  70  80  20  0  70 100  40#6F4A2F111  74  47
RAL 8008
Оливково-коричневый
 50  60  70  20 30  60 100  10#6F4F28111  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#673831103  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#A65E2F166  94  47
RAL 8024
Бежево-коричневый
 30  60  70  40  0  60 100  40#79553C121  85  60
RAL 8025
Бледно-коричневый
 40  50  60  40  7  60  93  43#755C49117  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#773C27119  60  39
Чёрные и белые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 9001
Кремово-белый
  0   0  10   5  0   0  10   0#EFEBDC239 235 220
RAL 9002
Светло-серый
  5   0  10  10  3   3  10   7#DDDED4221 222 212
RAL 9003
Сигнальный белый
  0   0   0   0  0   0   0   0#F4F8F4244 248 244
RAL 9004
Сигнальный чёрный
100  90 100  80100 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#A5A8A6165 168 166
RAL 9007 Железный блеск (Iron Glimmer)
Тёмно-алюминиевый
  0   0   0  60 17  14  17  29#8F8F8C143 143 140
RAL 9010
Белый
  0   0   5   0  0   0   7   0#F7F9EF247 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#F7FBF5247 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#CFD3CD207 211 205
RAL 9022 Жемчужный Глянец (Pearl Gloss)
Перламутровый светло-серый
 21  14  14  31 10   7   7  28#9C9C9C156 156 156
RAL 9023 Жемчужный Глянец (Pearl Gloss)
Перламутровый тёмно-серый
  8   6   6  57 20  10  10  40#7E8182126 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).

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

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

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

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

</head>

<body>

</body>

</html>

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

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

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

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

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

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

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

<meta charset=»utf-8″ > — кодировка UTF-8

<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>

<input type=»submit» value=»Отправить»>
</form>

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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  со следующими параметрами:

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 записано выравнивание по центру, то обе строчки будут выглядеть вполне эстетично.

<h2>Tree Man In A Boat<br/>

(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 использует цветовые схемы, которые определяют предпочтительные цвета и шрифты.

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

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

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

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

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

  • Classic Light: разработан для тем интерфейса macOS Light и Windows 10 Light

  • Darcula: разработан для темы интерфейса Darcula

  • High контраст: разработан для темы интерфейса High Contrast (рекомендуется для пользователей с недостаточным зрением)

  • IntelliJ Light: разработан для темы интерфейса IntelliJ Light

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

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

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

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

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

  3. (Необязательно) Чтобы переименовать настраиваемую схему, щелкните и выберите «Переименовать».

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

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

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

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

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

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

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

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

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

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

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

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

  3. Укажите имя и расположение файла и сохраните его.

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

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

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

  3. В диалоговом окне «Создать плагин цветовой схемы» укажите сведения о версии и информацию о поставщике. Затем нажмите ОК.

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

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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

  • Поместите курсор на нужный символ, нажмите 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 и просмотрите все оттенки или приятные палитры с цветами.