Сложно переоценить значение правильного выбора цветовой палитры, корректного использования цветов для дизайна сайта.
Спецификаци HTML5 даёт в руки дизайнера целый набор многофункциональных инструментов управления цветом.
Спецификация стилей CSS3,4 позволяет задавать цвета несколькими способами:
Наиболее часто сегодня используются три первых способа.
Формат | Синтаксис | Пример |
---|---|---|
Шестнадцатеричный код | #RRGGBB | p{color:#FF0000;} |
#RGB | p{color:#6A7;} | |
RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
RGB | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
Название цвета | aqua, black, etc. | p{color:teal;} |
Любой цвет представляется как результат наложения трёх базовых цветов: красного (red), зелёного (green) и синего (blue).
В шестнадцатеричном представлении количество каждого цвета задаётся двузначным шестнадцатеричным числом. Это число, каждая из двух цифр которого (количество десятков и количество единиц) может принимать 16 значений: от 0 до F (0,1,2,3,... 9,A,B,C,D,E,F).
Каждый цвет, таким обазом, представляется набором из трёх пар цифр (трёх двузначных шестнадцвтеричных чисел). Перед кодом цвета ставится префикс - символ #.
Например, запись #FF0000 означает чисто красный цвет (максимум красного и 0 зелёного и синего). Код #FFFF00 - жёлтый цвет (максимум красного и зелёного и 0 - синего.
Можно использовать и сокращённую запись - только 3 цифры. Тогда каждый цвет обозначается одной из них. Например: #00F - чисто синий цвет.
Color | Color HEX |
---|---|
#000000 | |
#FF0000 | |
#00FF00 | |
#0000FF | |
#FFFF00 | |
#00FFFF | |
#FF00FF | |
#C0C0C0 | |
#FFFFFF |
Color | Color HEX |
---|---|
#000 | |
#F00 | |
#0F0 | |
#0FF | |
#FF0 | |
#0FF | |
#F0F | |
#FFF |
Цвет задаётся также количеством красного, зелёного и синего в нём, но их количество указывается или в процентах или в десятичных цифрах от 0 до 255.
Color | Color RGB |
---|---|
rgb(0,0,0) | |
rgb(255,0,0) | |
rgb(0,255,0) | |
rgb(0,0,255) | |
rgb(255,255,0) | |
rgb(0,255,255) | |
rgb(255,0,255) | |
rgb(192,192,192) | |
rgb(255,255,255) |
Часто для разработчика удобнее использовать не коды цветов, а их названия. Ниже приведены 140 названий цветов, которые поддерживаются всеми браузерами.
Название цвета | HEX | RGB |
aliceblue | #F0F8FF | 240 248 255 |
antiquewhite | #FAEBD7 | 250 235 215 |
aqua | #00FFFF | 0 255 255 |
aquamarine | #7FFFD4 | 127 255 212 |
azure | #F0FFFF | 240 255 255 |
beige | #F5F5DC | 245 245 220 |
bisque | #FFE4C4 | 255 228 196 |
black | #000000 | 0 0 0 |
blanchedalmond | #FFEBCD | 255 235 205 |
blue | #0000FF | 0 0 255 |
blueviolet | #8A2BE2 | 138 43 226 |
brown | #A52A2A | 165 42 42 |
burlywood | #DEB887 | 222 184 135 |
cadetblue | #5F9EA0 | 95 158 160 |
chartreuse | #7FFF00 | 127 255 0 |
chocolate | #D2691E | 210 105 30 |
coral | #FF7F50 | 255 127 80 |
cornflowerblue | #6495ED | 100 149 237 |
cornsilk | #FFF8DC | 255 248 220 |
crimson | #DC143C | 220 20 60 |
cyan | #00FFFF | 0 255 255 |
darkblue | #00008B | 0 0 139 |
darkcyan | #008B8B | 0 139 139 |
darkgoldenrod | #B8860B | 184 134 11 |
darkgray | #A9A9A9 | 169 169 169 |
darkgreen | #006400 | 0 100 0 |
darkgrey | #A9A9A9 | 169 169 169 |
darkkhaki | #BDB76B | 189 183 107 |
darkmagenta | #8B008B | 139 0 139 |
darkolivegreen | #556B2F | 85 107 47 |
darkorange | #FF8C00 | 255 140 0 |
darkorchid | #9932CC | 153 50 204 |
darkred | #8B0000 | 139 0 0 |
darksalmon | #E9967A | 233 150 122 |
darkseagreen | #8FBC8F | 143 188 143 |
darkslateblue | #483D8B | 72 61 139 |
darkslategray | #2F4F4F | 47 79 79 |
darkslategrey | #2F4F4F | 47 79 79 |
darkturquoise | #00CED1 | 0 206 209 |
darkviolet | #9400D3 | 148 0 211 |
deeppink | #FF1493 | 255 20 147 |
deepskyblue | #00BFFF | 0 191 255 |
dimgray | #696969 | 105 105 105 |
dimgrey | #696969 | 105 105 105 |
dodgerblue | #1E90FF | 30 144 255 |
firebrick | #B22222 | 178 34 34 |
floralwhite | #FFFAF0 | 255 250 240 |
forestgreen | #228B22 | 34 139 34 |
fuchsia | #FF00FF | 255 0 255 |
gainsboro | #DCDCDC | 220 220 220 |
ghostwhite | #F8F8FF | 248 248 255 |
gold | #FFD700 | 255 215 0 |
goldenrod | #DAA520 | 218 165 32 |
gray | #808080 | 128 128 128 |
green | #008000 | 0 128 0 |
greenyellow | #ADFF2F | 173 255 47 |
grey | #808080 | 128 128 128 |
honeydew | #F0FFF0 | 240 255 240 |
hotpink | #FF69B4 | 255 105 180 |
indianred | #CD5C5C | 205 92 92 |
indigo | #4B0082 | 75 0 130 |
ivory | #FFFFF0 | 255 255 240 |
khaki | #F0E68C | 240 230 140 |
lavender | #E6E6FA | 230 230 250 |
lavenderblush | #FFF0F5 | 255 240 245 |
lawngreen | #7CFC00 | 124 252 0 |
lemonchiffon | #FFFACD | 255 250 205 |
lightblue | #ADD8E6 | 173 216 230 |
lightcoral | #F08080 | 240 128 128 |
lightcyan | #E0FFFF | 224 255 255 |
lightgoldenrodyellow | #FAFAD2 | 250 250 210 |
lightgray | #D3D3D3 | 211 211 211 |
lightgreen | #90EE90 | 144 238 144 |
lightgrey | #D3D3D3 | 211 211 211 |
lightpink | #FFB6C1 | 255 182 193 |
lightsalmon | #FFA07A | 255 160 122 |
lightseagreen | #20B2AA | 32 178 170 |
lightskyblue | #87CEFA | 135 206 250 |
lightslategray | #778899 | 119 136 153 |
lightslategrey | #778899 | 119 136 153 |
lightsteelblue | #B0C4DE | 176 196 222 |
lightyellow | #FFFFE0 | 255 255 224 |
lime | #00FF00 | 0 255 0 |
limegreen | #32CD32 | 50 205 50 |
linen | #FAF0E6 | 250 240 230 |
magenta | #FF00FF | 255 0 255 |
maroon | #800000 | 128 0 0 |
mediumaquamarine | #66CDAA | 102 205 170 |
mediumblue | #0000CD | 0 0 205 |
mediumorchid | #BA55D3 | 186 85 211 |
mediumpurple | #9370DB | 147 112 219 |
mediumseagreen | #3CB371 | 60 179 113 |
mediumslateblue | #7B68EE | 123 104 238 |
mediumspringgreen | #00FA9A | 0 250 154 |
mediumturquoise | #48D1CC | 72 209 204 |
mediumvioletred | #C71585 | 199 21 133 |
midnightblue | #191970 | 25 25 112 |
mintcream | #F5FFFA | 245 255 250 |
mistyrose | #FFE4E1 | 255 228 225 |
moccasin | #FFE4B5 | 255 228 181 |
navajowhite | #FFDEAD | 255 222 173 |
navy | #000080 | 0 0 128 |
oldlace | #FDF5E6 | 253 245 230 |
olive | #808000 | 128 128 0 |
olivedrab | #6B8E23 | 107 142 35 |
orange | #FFA500 | 255 165 0 |
orangered | #FF4500 | 255 69 0 |
orchid | #DA70D6 | 218 112 214 |
palegoldenrod | #EEE8AA | 238 232 170 |
palegreen | #98FB98 | 152 251 152 |
paleturquoise | #AFEEEE | 175 238 238 |
palevioletred | #DB7093 | 219 112 147 |
papayawhip | #FFEFD5 | 255 239 213 |
peachpuff | #FFDAB9 | 255 218 185 |
peru | #CD853F | 205 133 63 |
pink | #FFC0CB | 255 192 203 |
plum | #DDA0DD | 221 160 221 |
powderblue | #B0E0E6 | 176 224 230 |
purple | #800080 | 128 0 128 |
rebeccapurple | #663399 | 102 51 153 |
red | #FF0000 | 255 0 0 |
rosybrown | #BC8F8F | 188 143 143 |
royalblue | #4169E1 | 65 105 225 |
saddlebrown | #8B4513 | 139 69 19 |
salmon | #FA8072 | 250 128 114 |
sandybrown | #F4A460 | 244 164 96 |
seagreen | #2E8B57 | 46 139 87 |
seashell | #FFF5EE | 255 245 238 |
sienna | #A0522D | 160 82 45 |
silver | #C0C0C0 | 192 192 192 |
skyblue | #87CEEB | 135 206 235 |
slateblue | #6A5ACD | 106 90 205 |
slategray | #708090 | 112 128 144 |
slategrey | #708090 | 112 128 144 |
snow | #FFFAFA | 255 250 250 |
springgreen | #00FF7F | 0 255 127 |
steelblue | #4682B4 | 70 130 180 |
tan | #D2B48C | 210 180 140 |
teal | #008080 | 0 128 128 |
tdistle | #D8BFD8 | 216 191 216 |
tomato | #FF6347 | 255 99 71 |
turquoise | #40E0D0 | 64 224 208 |
violet | #EE82EE | 238 130 238 |
wheat | #F5DEB3 | 245 222 179 |
white | #FFFFFF | 255 255 255 |
whitesmoke | #F5F5F5 | 245 245 245 |
yellow | #FFFF00 | 255 255 0 |
yellowgreen | #9ACD32 | 154 205 50 |
Даже сегодня не все компьютеры и мониторы могут корректно воспроизвести всю палитру цветов. WEB safe colors - это тот набор цветов, который наверняка поддердивается и корректно отображается всеми браузерами на любом компьютере. Эта пилитра содержит только те цвета, в которых количество красного, зелёного м синего соответствует одному из значений в приведённой ниже таблице.
RGB | HEX |
0 | 00 |
51 | 33 |
102 | 66 |
153 | 99 |
204 | cc |
255 | ff |
Вот эти цвета.
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Этот способ задания цвета используется реже, чем вышеперечисленные. Цвет в нём определяется, как комбинация трёх параметров: оттенок, насыщенность, яркость.
Оттенок - это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Яркость задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Спецификация стилей CSS3 позволяет добавить к цвету дополнительное свойство - прозрачность.
Прозрачность можно задавать с помошью функции rgba(r,g,b,o) , четвёртый параметр которой - прозрачность цвета (0 - полностью прозрачный цвет, 1 - непрозрачный).
Например запись:
background-color:rgba(255,0,0,0.3);
задаёт красный цвет с 30%-й прозрачностью для фона элемента.
Прозрачность можно задавать для цвета в формате HEX.
#RRGGBBAA - RR - красный, GG - зелёный, BB - синий, AA - прозрачность (от 00 до FF)
или
#RGBA - R - красный, G - зелёный, B - синий, A - прозрачность (от 0 до F)
Можно задавать прозрачность сразу и цвету и всему контенту элемента при помощи отдельного CSS свойства - opacity.
Например:
rgb(255, 0, 0);
opacity:0.8;