Використання кольорів
Матеріал з ТерноВікі
Зміст |
Використання кольорів
Для збереження одноманітності сторінок, кольори у Вікіпедії слід використовувати розумно. Яскраві кольори в статтях повинні використовуватися тільки як виняток, коли це доцільно. Більш різноманітне розфарбування допускається у вікіпроектах та порталах. На власній сторінці користувачі нічим не обмежені у творчих експериментах
Для фарбування в MediaWiki, як і в HTML, служить атрибут style. Шматки тексту, колір яких потрібно змінити, включають у теги, наприклад для окремих букв або слів або для абзаців. В атрибуті style колір визначається властивостями CSS color:#RRGGBB; для кольору тексту або для кольору фону. «#RRGGBB» означає шістнадцятковий код кольору: частка червоного (RR) може лежати в діапазоні від 00 до FF (це відповідає десятковому числу 255), також як і частки зеленого (GG) і синього кольору (BB). Таким чином, палітра доступних кольорів налічує 166 = 16 777 216 найменувань. Замість кодування «#RRGGBB» можна використовувати наведені нижче назви кольорів (без «#»).
Що потрібно | Вікітекст | Результат |
---|---|---|
Кольоровий текст | <span style="color:#ff0000">Текст</span> | Текст |
Кольорові абзаци | <div style="color:red">абзац</div> | абзац
|
Фон для одного або декількох слів | <span style="background-color:yellow">приклад</span> | приклад |
Фон абзацу | <div style="background-color:yellow">абзац</div> | абзац
|
Фон елементу таблиці | style="background-color:#FEDBCA;"|текст | текст |
Альтернативний варіант | bgcolor="#FEDBCA"|текст | текст |
Взяття у рамку | <div style="border-style:solid; border-color:Red;">текст у кольоровій рамці</div> | текст у кольоровій рамці
|
Екстремальний варіант | style="background-color:#FEDBCA;"|<div style="border-style:solid; border-color:Red; color:red; background-color:yellow">все включено</div> | все включено
|
Таблиця кольорів
white (255 255 255) #FFFFFF | gray91 (232 232 232) #E8E8E8 | gray81 (207 207 207) #CFCFCF | grey51 (130 130 130) #828282 |
Snow1 (255 250 250) #FFFAFA | Snow2 (238 233 233) #EEE9E9 | Snow3 (205 201 201) #CDC9C9 | Snow4 (139 137 137) #8B8989 |
Seashell1 (255 245 238) #FFF5EE | Seashell2 (238 229 222) #EEE5DE | Seashell3 (205 197 191) #CDC5BF | Seashell4 (139 134 130) #8B8682 |
AntiqueWhite1 (255 239 219) #FFEFDB | AntiqueWhite2 (238 223 204) #EEDFCC | AntiqueWhite3 (205 192 176) #CDC0B0 | AntiqueWhite4 (139 131 120) #8B8378 |
Bisque1 (255 228 196) #FFE4C4 | Bisque2 (238 213 183) #EED5B7 | Bisque3 (205 183 158) #CDB79E | Bisque4 (139 125 107) #8B7D6B |
PeachPuff1 (255 218 185) #FFDAB9 | PeachPuff2 (238 203 173) #EECBAD | PeachPuff3 (205 175 149) #CDAF95 | PeachPuff4 (139 119 101) #8B7765 |
NavajoWhite1 (255 222 173) #FFDEAD | NavajoWhite2 (238 207 161) #EECFA1 | NavajoWhite3 (205 179 139) #CDB38B | NavajoWhite4 (139 121 94) #8B795E |
LemonChiffon1 (255 250 205) #FFFACD | LemonChiffon2 (238 233 191) #EEE9BF | LemonChiffon3 (205 201 165) #CDC9A5 | LemonChiffon4 (139 137 112) #8B8970 |
Cornsilk1 (255 248 220) #FFF8DC | Cornsilk2 (238 232 205) #EEE8CD | Cornsilk3 (205 200 177) #CDC8B1 | Cornsilk4 (139 136 120) #8B8878 |
Ivory1 (255 255 240) #FFFFF0 | Ivory2 (238 238 224) #EEEEE0 | Ivory3 (205 205 193) #CDCDC1 | Ivory4 (139 139 131) #8B8B83 |
Honeydew1 (240 255 240) #F0FFF0 | Honeydew2 (224 238 224) #E0EEE0 | Honeydew3 (193 205 193) #C1CDC1 | Honeydew4 (131 139 131) #838B83 |
LavenderBlush1 (255 240 245) #FFF0F5 | LavenderBlush2 (238 224 229) #EEE0E5 | LavenderBlush3 (205 193 197) #CDC1C5 | LavenderBlush4 (139 131 134) #8B8386 |
MistyRose1 (255 228 225) #FFE4E1 | MistyRose2 (238 213 210) #EED5D2 | MistyRose3 (205 183 181) #CDB7B5 | MistyRose4 (139 125 123) #8B7D7B |
Azure1 (240 255 255) #F0FFFF | Azure2 (224 238 238) #E0EEEE | Azure3 (193 205 205) #C1CDCD | Azure4 (131 139 139) #838B8B |
SlateBlue1 (131 111 255) #836FFF | SlateBlue2 (122 103 238) #7A67EE | SlateBlue3 (105 89 205) #6959CD | SlateBlue4 (71 60 139 ) #473C8B |
RoyalBlue1 (72 118 255) #4876FF | RoyalBlue2 (67 110 238) #436EEE | RoyalBlue3 (58 95 205) #3A5FCD | RoyalBlue4 (39 64 139) #27408B |
Blue1 (0 0 255) #0000FF | Blue2 (0 0 238) #0000EE | Blue3 (0 0 205) #0000CD | Blue4 (0 0 139) #00008B |
DodgerBlue1 (30 144 255) #1E90FF | DodgerBlue2 (28 134 238) #1C86EE | DodgerBlue3 (24 116 205) #1874CD | DodgerBlue4 (16 78 139 ) #104E8B |
SteelBlue1 (99 184 255) #63B8FF | SteelBlue2 (92 172 238) #5CACEE | SteelBlue3 (79 148 205) #4F94CD | SteelBlue4 (54 100 139) #36648B |
DeepSkyBlue1 (0 191 255) #00BFFF | DeepSkyBlue2 (0 178 238) #00B2EE | DeepSkyBlue3 (0 154 205) #009ACD | DeepSkyBlue4 (0 104 139 ) #00688B |
SkyBlue1 (135 206 255) #87CEFF | SkyBlue2 (126 192 238) #7EC0EE | SkyBlue3 (108 166 205) #6CA6CD | SkyBlue4 (74 112 139 ) #4A708B |
LightSkyBlue1 (176 226 255) #B0E2FF | LightSkyBlue2 (164 211 238) #A4D3EE | LightSkyBlue3 (141 182 205) #8DB6CD | LightSkyBlue4 (96 123 139) #607B8B |
SlateGray1 (198 226 255) #C6E2FF | SlateGray2 (185 211 238) #B9D3EE | SlateGray3 (159 182 205) #9FB6CD | SlateGray4 (108 123 139) #6C7B8B |
LightSteelBlue1 (202 225 255) #CAE1FF | LightSteelBlue2 (188 210 238) #BCD2EE | LightSteelBlue3 (162 181 205) #A2B5CD | LightSteelBlue4 (110 123 139) #6E7B8B |
LightBlue1 (191 239 255) #BFEFFF | LightBlue2 (178 223 238) #B2DFEE | LightBlue3 (154 192 205) #9AC0CD | LightBlue4 (104 131 139) #68838B |
LightCyan1 (224 255 255) #E0FFFF | LightCyan2 (209 238 238) #D1EEEE | LightCyan3 (180 205 205) #B4CDCD | LightCyan4 (122 139 139) #7A8B8B |
PaleTurquoise1 (187 255 255) #BBFFFF | PaleTurquoise2 (174 238 238) #AEEEEE | PaleTurquoise3 (150 205 205) #96CDCD | PaleTurquoise4 (102 139 139) #668B8B |
CadetBlue1 (152 245 255) #98F5FF | CadetBlue2 (142 229 238) #8EE5EE | CadetBlue3 (122 197 205) #7AC5CD | CadetBlue4 (83 134 139) #53868B |
Turquoise1 (0 245 255) #00F5FF | Turquoise2 (0 229 238) #00E5EE | Turquoise3 ( 0 197 205) #00C5CD | Turquoise4 (0 134 139 ) #00868B |
Cyan1 (0 255 255) #00FFFF | Cyan2 (0 238 238) #00EEEE | Cyan3 (0 205 205) #00CDCD | Cyan4 (0 139 139) #008B8B |
DarkSlateGray1 (151 255 255) #97FFFF | DarkSlateGray2 (141 238 238) #8DEEEE | DarkSlateGray3 (121 205 205) #79CDCD | DarkSlateGray4 (82 139 139) #528B8B |
Aquamarine1 (127 255 212) #7FFFD4 | Aquamarine2 (118 238 198) #76EEC6 | Aquamarine3 (102 205 170) #66CDAA | Aquamarine4 (69 139 116) #458B74 |
DarkSeaGreen1 (193 255 193) #C1FFC1 | DarkSeaGreen2 (180 238 180) #B4EEB4 | DarkSeaGreen3 (155 205 155) #9BCD9B | DarkSeaGreen4 (105 139 105) #698B69 |
SeaGreen1 (84 255 159) #54FF9F | SeaGreen2 (78 238 148) #4EEE94 | SeaGreen3 (67 205 128) #43CD80 | SeaGreen4 (46 139 87) #2E8B57 |
PaleGreen1 (154 255 154) #9AFF9A | PaleGreen2 (144 238 144) #90EE90 | PaleGreen3 (124 205 124) #7CCD7C | PaleGreen4 (84 139 84) #548B54 |
SpringGreen1 (0 255 127) #00FF7F | SpringGreen2 (0 238 118) #00EE76 | SpringGreen3 (0 205 102) #00CD66 | SpringGreen4 (0 139 69) #008B45 |
Green1 (0 255 0) #00FF00 | Green2 (0 238 0) #00EE00 | Green3 (0 205 0) #00CD00 | Green4 (0 139 0) #008B00 |
Chartreuse1 (127 255 0) #7FFF00 | Chartreuse2 (118 238 0) #76EE00 | Chartreuse3 (102 205 0) #66CD00 | Chartreuse4 (69 139 0) #458B00 |
OliveDrab1 (192 255 62) #C0FF3E | OliveDrab2 (179 238 58) #B3EE3A | OliveDrab3 (154 205 50) #9ACD32 | OliveDrab4 (105 139 34) #698B22 |
DarkOliveGreen1 (202 255 112) #CAFF70 | DarkOliveGreen2 (188 238 104) #BCEE68 | DarkOliveGreen3 (162 205 90) #A2CD5A | DarkOliveGreen4 (110 139 61) #6E8B3D |
Khaki1 (255 246 143) #FFF68F | Khaki2 (238 230 133) #EEE685 | Khaki3 (205 198 115) #CDC673 | Khaki4 (139 134 78) #8B864E |
LightGoldenrod1 (255 236 139) #FFEC8B | LightGoldenrod2 (238 220 130) #EEDC82 | LightGoldenrod3 (205 190 112) #CDBE70 | LightGoldenrod4 (139 129 76) #8B814C |
LightYellow1 (255 255 224) #FFFFE0 | LightYellow2 (238 238 209) #EEEED1 | LightYellow3 (205 205 180) #CDCDB4 | LightYellow4 (139 139 122) #8B8B7A |
Yellow1 (255 255 0) #FFFF00 | Yellow2 (238 238 0) #EEEE00 | Yellow3 (205 205 0) #CDCD00 | Yellow4 (139 139 0) #8B8B00 |
Gold1 (255 215 0) #FFD700 | Gold2 (238 201 0) #EEC900 | Gold3 (205 173 0) #CDAD00 | Gold4 (139 117 0) #8B7500 |
Goldenrod1 (255 193 37) #FFC125 | Goldenrod2 (238 180 34) #EEB422 | Goldenrod3 (205 155 29) #CD9B1D | Goldenrod4 (139 105 20) #8B6914 |
DarkGoldenrod1 (255 185 15) #FFB90F | DarkGoldenrod2 (238 173 14) #EEAD0E | DarkGoldenrod3 (205 149 12) #CD950C | DarkGoldenrod4 (139 101 8) #8B6508 |
RosyBrown1 (255 193 193) #FFC1C1 | RosyBrown2 (238 180 180) #EEB4B4 | RosyBrown3 (205 155 155) #CD9B9B | RosyBrown4 (139 105 105) #8B6969 |
IndianRed1 (255 106 106) #FF6A6A | IndianRed2 (238 99 99) #EE6363 | IndianRed3 (205 85 85) #CD5555 | IndianRed4 (139 58 58) #8B3A3A |
Sienna1 (255 130 71) #FF8247 | Sienna2 (238 121 66) #EE7942 | Sienna3 (205 104 57) #CD6839 | Sienna4 (139 71 38) #8B4726 |
Burlywood1 (255 211 155) #FFD39B | Burlywood2 (238 197 145) #EEC591 | Burlywood3 (205 170 125) #CDAA7D | Burlywood4 (139 115 85) #8B7355 |
Wheat1 (255 231 186) #FFE7BA | Wheat2 (238 216 174) #EED8AE | Wheat3 (205 186 150) #CDBA96 | Wheat4 (139 126 102) #8B7E66 |
Tan1 (255 165 79) #FFA54F | Tan2 (238 154 73) #EE9A49 | Tan3 (205 133 63) #CD853F | Tan4 (139 90 43) #8B5A2B |
Chocolate1 (255 127 36) #FF7F24 | Chocolate2 (238 118 33) #EE7621 | Chocolate3 (205 102 29) #CD661D | Chocolate4 (139 69 19) #8B4513 |
Firebrick1 (255 48 48) #FF3030 | Firebrick2 (238 44 44) #EE2C2C | Firebrick3 (205 38 38) #CD2626 | Firebrick4 (139 26 26) #8B1A1A |
Brown1 (255 64 64) #FF4040 | Brown2 (238 59 59) #EE3B3B | Brown3 (205 51 51) #CD3333 | Brown4 (139 35 35) #8B2323 |
Salmon1 (255 140 105) #FF8C69 | Salmon2 (238 130 98) #EE8262 | Salmon3 (205 112 84) #CD7054 | Salmon4 (139 76 57) #8B4C39 |
LightSalmon1 (255 160 122) #FFA07A | LightSalmon2 (238 149 114) #EE9572 | LightSalmon3 (205 129 98) #CD8162 | LightSalmon4 (139 87 66) #8B5742 |
Orange1 (255 165 0) #FFA500 | Orange2 (238 154 0) #EE9A00 | Orange3 (205 133 0) #CD8500 | Orange4 (139 90 0) #8B5A00 |
DarkOrange1 (255 127 0) #FF7F00 | DarkOrange2 (238 118 0) #EE7600 | DarkOrange3 (205 102 0) #CD6600 | DarkOrange4 (139 69 0) #8B4500 |
Coral1 (255 114 86) #FF7256 | Coral2 (238 106 80) #EE6A50 | Coral3 (205 91 69) #CD5B45 | Coral4 (139 62 47) #8B3E2F |
Tomato1 (255 99 71) #FF6347 | Tomato2 (238 92 66) #EE5C42 | Tomato3 (205 79 57) #CD4F39 | Tomato4 (139 54 38) #8B3626 |
OrangeRed1 (255 69 0) #FF4500 | OrangeRed2 (238 64 0) #EE4000 | OrangeRed3 (205 55 0) #CD3700 | OrangeRed4 (139 37 0) #8B2500 |
Red1 (255 0 0) #FF0000 | Red2 (238 0 0) #EE0000 | Red3 (205 0 0) #CD0000 | Red4 (139 0 0) #8B0000 |
DeepPink1 (255 20 147) #FF1493 | DeepPink2 (238 18 137) #EE1289 | DeepPink3 (205 16 118) #CD1076 | DeepPink4 (139 10 80) #8B0A50 |
HotPink1 (255 110 180) #FF6EB4 | HotPink2 (238 106 167) #EE6AA7 | HotPink3 (205 96 144) #CD6090 | HotPink4 (139 58 98) #8B3A62 |
Pink1 (255 181 197) #FFB5C5 | Pink2 (238 169 184) #EEA9B8 | Pink3 (205 145 158) #CD919E | Pink4 (139 99 108) #8B636C |
LightPink1 (255 174 185) #FFAEB9 | LightPink2 (238 162 173) #EEA2AD | LightPink3 (205 140 149) #CD8C95 | LightPink4 (139 95 101) #8B5F65 |
PaleVioletRed1 (255 130 171) #FF82AB | PaleVioletRed2 (238 121 159) #EE799F | PaleVioletRed3 (205 104 137) #CD6889 | PaleVioletRed4 (139 71 93) #8B475D |
Maroon1 (255 52 179) #FF34B3 | Maroon2 (238 48 167) #EE30A7 | Maroon3 (205 41 144) #CD2990 | Maroon4 (139 28 98) #8B1C62 |
VioletRed1 (255 62 150) #FF3E96 | VioletRed2 (238 58 140) #EE3A8C | VioletRed3 (205 50 120) #CD3278 | VioletRed4 (139 34 82) #8B2252 |
Magenta1 (255 0 255) #FF00FF | Magenta2 (238 0 238) #EE00EE | Magenta3 (205 0 205) #CD00CD | Magenta4 (139 0 139) #8B008B |
Orchid1 (255 131 250) #FF83FA | Orchid2 (238 122 233) #EE7AE9 | Orchid3 (205 105 201) #CD69C9 | Orchid4 (139 71 137) #8B4789 |
Plum1 (255 187 255) #FFBBFF | Plum2 (238 174 238) #EEAEEE | Plum3 (205 150 205) #CD96CD | Plum4 (139 102 139) #8B668B |
MediumOrchid1 (224 102 255) #E066FF | MediumOrchid2 (209 95 238) #D15FEE | MediumOrchid3 (180 82 205) #B452CD | MediumOrchid4 (122 55 139) #7A378B |
DarkOrchid1 (191 62 255) #BF3EFF | DarkOrchid2 (178 58 238) #B23AEE | DarkOrchid3 (154 50 205) #9A32CD | DarkOrchid4 (104 34 139) #68228B |
Purple1 (155 48 255) #9B30FF | Purple2 (145 44 238) #912CEE | Purple3 (125 38 205) #7D26CD | Purple4 (85 26 139) #551A8B |
MediumPurple1 (171 130 255) #AB82FF | MediumPurple2 (159 121 238) #9F79EE | MediumPurple3 (137 104 205) #8968CD | MediumPurple4 (93 71 139) #5D478B |
Thistle1 (255 225 255) #FFE1FF | Thistle2 (238 210 238) #EED2EE | Thistle3 (205 181 205) #CDB5CD | Thistle4 (139 123 139) #8B7B8B |
WhiteSmoke (245 245 245) #F5F5F5 | Gainsboro (220 220 220) #DCDCDC | LightGrey (211 211 211) #D3D3D3 | Silver (192 192 192) #C0C0C0 |
grey71 (181 181 181) #B5B5B5 | DarkGrey ( 169 169 169) #A9A9A9 | gray61 (156 156 156) #9C9C9C | grey41 (105 105 105) #696969 |
grey31 (79 79 79) #4F4F4F | grey21 (54 54 54) #363636 | grey11 (28 28 28) #1C1C1C | black (0 0 0) #000000 |
Використання кольорів у таблицях
Нижче наведено складніші приклади, що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись, який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими — інші користувачі редагуватимуть їх також!
Кольоровий текст
Текст, що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML:
- для окремого слова — <font color="#ABCDEF">Текст</font>;
- для довгого тексту — <div style="color:#ABCDEF">Текст, текст.</div>,
де «ABCDEF» — індекс кольору. Для "розфарбування" тексту пишуть так:
Вихідний код
{| border=1 |Клітинка 1*1 |Кольорове <font color="#FF00FF">одне</font> слово. |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |<div style="color:#33CC66">Кольоровий весь рядок.</div> |- |Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}
Як він виглядає
Клітинка 1*1 | Кольорове одне слово. | Клітинка 3*1 |
Клітинка 1*2 | Клітинка 2*2 | Кольоровий весь рядок.
|
Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Колір клітинки
Зробити кольорову клітинку можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» — індекс кольору.
Пишеться
{| border=1 |Клітинка 1*1 |bgcolor=#FFCC00|Клітинка 2*1 |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |Клітинка 3*2 |- |bgcolor=#CCFF00|Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}
Як він виглядає
Клітинка 1*1 | Клітинка 2*1 | Клітинка 3*1 |
Клітинка 1*2 | Клітинка 2*2 | Клітинка 3*2 |
Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Фоновий колір таблиці
Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут «bgcolor=#ABCDEF» в перший рядок таблиці, де ставитися і атрибут рамки:
Пишеться
{| border=1 bgcolor=#66FFFF |Клітинка 1*1 |Клітинка 2*1 |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |Клітинка 3*2 |- |Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}
Як він виглядає
Клітинка 1*1 | Клітинка 2*1 | Клітинка 3*1 |
Клітинка 1*2 | Клітинка 2*2 | Клітинка 3*2 |
Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Класи оформлення клітинок
заголовок | звичайна клітинка | |
---|---|---|
highlight | ||
bright | ||
shadow | ||
dark |
Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок.
Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка.
|- class="bright" | ... | ...
Або до окремо взятої клітинки; якщо потрібно просто скасувати колір, заданий в рядку, використовуйте клас transparent.
|- |class="bright"| ... |class="highlight"| ...
Наприклад:
|-class="dark" | |class="highlight" | |||
|-class="bright" | |class="transparent" |
Для заголовків рекомендується використовувати підсвічування highlight
, за необхідності виділити більш важливий заголовок — bright
. Якщо є необхідність знизити важливість заголовка, можна використовувати затінення.
Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку shadow
, за необхідності — dark
). Если нужно выделить одну-две ячейки, можно использовать подсветку.
Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: style="background-color: колір;"
(див. таблицю кольорів). Рекомендується використовувати цю можливість тільки якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.