Таблица 2. Все цвета (общая таблица)
Таблица 3. Оттенки фиолетового и синего цветов
Таблица 4. Оттенки зелёного цвета
Таблица 5. Оттенки жёлтого и красного цветов
Таблица 6. Оттенки розового и пурпурного цвета
Таблица 7. Светлые и бежевые тона
Эти таблицы наглядно показывают большое количество разнообразных цветов, а так же градаций серого, что поможет вам при работе с сайтом быстро подобрать необходимый вариант и просмотреть соответствующие кодировки:
- Color - прямое название, которое может быть вставлено в код, например: {color: black;}.
- RGB - кодировка, представляющая собой значение от 0 до 255 для трёх цветов: R - красный, G - зелёный, B - синий.
- 16 - кодировка, представляющая те же значения, что и RGB, но не в десятеричной системе, а в шестнадцатиричной (HEX).
- HSL - кодировка, в которой первое значение H указывает оттенок, который соответствует определённому градусу на специальном цветовом круге, второе значение S указывает в процентах насыщенность цвета, а третье L - осветлённость.
В кодировках RGB и HSL может быть добавлено четвёртое значение - A. Это значение показывает прозрачность элемента; значение может находиться в пределах от нуля (полностью прозрачно) до 1 (полностью непрозрачно) и иметь промежуточные значения.
В конце приведены примеры кода.
Color | RGB | HSL | 16 | |
black | 0,0,0 | 0,0%,0% | #000000 | |
dimgray | 105,105,105 | 0,0%,41% | #696969 | |
gray (grey) | 128,128,128 | 0,0%,50% | #808080 | |
darkgray (darkgrey) | 169,169,169 | 0,0%,67% | #a9a9a9 | |
silver | 192,192,192 | 0,0%,75% | #c0c0c0 | |
lightgray (lightgrey) | 211,211,211 | 0,0%,83% | #d3d3d3 | |
gainsboro | 220,220,220 | 0,0%,86% | #dcdcdc | |
whitesmoke | 245,245,145 | 0,0%,96% | #f5f5f5 | |
white | 255,255,255 | 0,0,100% | #ffffff |
Color | RGB | HSL | 16 | |
aliceblue | 240,248,255 | 208,100%,97% | #f0f8ff | |
antiquewhite | 250,235,215 | 34,78%,91% | #faebd7 | |
aqua (cyan) | 0,255,255 | 180,100%,50% | #00ffff | |
aquamarine | 127,255,212 | 160,100%,75% | #7fffd4 | |
azure | 240,255,255 | 180,100%,97% | #f0ffff | |
beige | 245,245,220 | 60,56%,91% | #f5f5dc | |
bisque | 255,228,196 | 33,100%,88% | #ffe4c4 | |
blanchcdalmond | 255,235,205 | 36,100%,90% | #ffebcd | |
blue | 0,0,255 | 240,100%,50% | #0000ff | |
blueviolet | 138,43,226 | 271,76%,53% | #8a2be2 | |
brown | 165,42,42 | 0,59%,41% | #a52a2a | |
burlywood | 222,184,135 | 34,57%,70% | #deb887 | |
cadetblue | 95,158,160 | 182,25%,50% | 5f9ea0 | |
chartreuse | 127,255,0 | 90,100%,50% | #7fff00 | |
chocolate | 210,105,30 | 25,75%,47% | #d2691e | |
coral | 255,127,80 | 16,100%,67% | #ff7f50 | |
cornflowerblue | 100,149,237 | 219,79%,67% | #6495ed | |
cornsilk | 255,248,220 | 48,100%,93% | #fff8dc | |
crimson | 237,20,61 | 349,86%,50% | #ed143d | |
darkblue | 0,0,139 | 240,100%,27% | #00008b | |
darkcyan | 0,139,139 | 180,100%,27% | #008b8b | |
darkgoldenrod | 184,134,11 | 43,89%,38% | #b8860b | |
darkgreen | 0,100,0 | 120,100%,20% | #006400 | |
darkkhaki | 189,183,107 | 56,38%,58% | #bdb76b | |
darkmagenta | 139,0,139 | 300,100%,27% | #8b008b | |
darkolivegreen | 85,107,47 | 82,39%,30% | #556b2f | |
darkorange | 255,140,0 | 33,100%,50% | #ff8c00 | |
darkorchid | 153,50,204 | 280,61%,50% | #9932cc | |
darkred | 139,0,0 | 0,100%,27% | #8b0000 | |
darksalmon | 233,150,122 | 15,72%,70% | #e9967a | |
darkseagreen | 143,188,143 | 120,25%,65% | #8fbc8f | |
darklateblue | 72,61,139 | 248,39%,39% | #483d8b | |
darklategray | 47,79,79 | 180,25%,25% | #2f4f4f | |
darkturquoise | 0,206,209 | 181,100%,41% | #00ced1 | |
darkviolet | 148,0,211 | 282,100%,41% | #9400d3 | |
deeppink | 255,20,147 | 328,100%,54% | #ff1493 | |
deepskyblue | 0,191,255 | 195,100%,50% | #00bfff | |
dodgerblue | 30.144,255 | 210,100%,56% | #1e90ff | |
firebrick | 178,34,34 | 0,68%,42% | #b22222 | |
floralwhite | 255,250,240 | 40,100%,97% | #fffaf0 | |
forestgreen | 34,139,34 | 120,61%,34% | #228b22 | |
fuchsia или magenta | 255,0,255 | 300,100%,50% | #ff00ff | |
ghostwhite | 248,248,255 | 240,100%,99% | #f8f8ff | |
gold | 255,215,0 | 51,100%,50% | #ffd700 | |
goldenrod | 218,165,32 | 43,74%,49% | #daa520 | |
green | 0,128,0 | 120,100%,25% | #008000 | |
greenyellow | 173,255,47 | 84,100%,59% | #adff2f | |
honeydew | 240,255,240 | 120,100%,97% | #f0fff0 | |
hotpink | 255,105,180 | 330,100%,71% | #ff69b4 | |
indianred | 205,92,92 | 0,53%,58% | #cd5c5c | |
indigo | 75,0,130 | 275,100%,25% | #4b0082 | |
ivory | 255,255,240 | 60,100%,97% | #fffff0 | |
khaki | 240,230,140 | 54,77%,75% | #f0e68c | |
lavender | 230,230,250 | 240,67%,94% | #e6e6fa | |
lavenderblush | 255,240,245 | 340,100%,97% | #fff0f5 | |
lawngreen | 124,252,0 | 90,100%,49% | #7cfc00 | |
lemoncheffon | 255,250,205 | 54,100%,90% | #fffacd | |
lightblue | 173,216,230 | 195,53%,79% | #add8e6 | |
lightcoral | 240,128,128 | 0,79%,72% | #f08080 | |
lightcyan | 224,255,255 | 180,100%,94% | #e0ffff | |
lightgoldengrodyellow | 250,250,210 | 60,80%,90% | #fafad2 | |
lightgreen | 144,238,144 | 120,73%,75% | #90ee90 | |
lightpink | 255,182,193 | 351,100%,86% | #ffb6c1 | |
lightsalmon | 255,160,122 | 17,100%,74% | #ffa07a | |
lightseegreen | 32,178,170 | 177,70%,41% | #20b2aa | |
lightskyblue | 135,206,250 | 203,92%,75% | #87cefa | |
lightslategray | 119,136,153 | 210,14%,53% | #778899 | |
lightsteelblue | 176,196,222 | 214,41%,78% | #b0c4de | |
lightyellow | 255,255,224 | 60,100%,94% | #ffffe0 | |
lime | 0,255,0 | 120,100%,50% | #00ff00 | |
limegreen | 50,205,50 | 120,61%,50% | #32cd32 | |
linen | 250,240,230 | 30,67%94% | #faf0e6 | |
maroon | 128,0,0 | 0,100%,25% | #800000 | |
mediumaquamarine | 102,205,170 | 160,51%,60% | #66cdaa | |
mediumblue | 0,0,205 | 240,100%,40% | #0000cd | |
mediumorchid | 186,85,211 | 288,59%,58% | #ba55d3 | |
mediumpurple | 147,112,219 | 260,60%65% | #9370db | |
mediumseagreen | 60,179,113 | 147,50%,47% | #3cb371 | |
mediumslateblue | 123,10,238 | 249,80%,67% | #7b68ee | |
mediumspringgreen | 0,250,154 | 157,100%,49% | #00fa9a | |
mediumturquoise | 72,209,204 | 178,60%,55% | #48d1cc | |
mediumvioletred | 199,21,133 | 322,81%,43% | #c71585 | |
midnightblue | 25,25,122 | 240,64%,27% | #191970 | |
mintcream | 245,255,250 | 150,100%,98% | #f5fffa | |
mistyrose | 255,228,225 | 6,100%,94% | #ffe4e1 | |
moccasin | 255,228,181 | 38,100%,85% | #ffe4b5 | |
navajowhite | 255,222,173 | 36,100%,84% | #ffdead | |
navy | 0,0,128 | 240,100%,25% | #000080 | |
oldlace | 253,245,230 | 39,85%,95% | #fdf5e6 | |
olive | 128,128,0 | 60,100%,25% | #808000 | |
olivedrab | 107,142,35 | 80,60%,35% | #6b8e23 | |
orange | 255,165,0 | 38.8,100%,50% | #ffa500 | |
orangered | 255,69,0 | 16,100%,50% | #ff4500 | |
orchid | 218,112,214 | 302,59%,65% | #da70d6 | |
palegoldenrod | 238,232,170 | 55,67%,80% | #eee8aa | |
palegreen | 152,251,152 | 120,93%,79% | #98fb98 | |
paleturquoise | 175,238,238 | 180,65%,81% | #afeeee | |
palevioletred | 219,112,147 | 340,60%65% | #db7093 | |
papayawhip | 255,239,213 | 37,100%,92% | #ffefd5 | |
peachpuff | 255,218,185 | 28,100%,86% | #ffdab9 | |
peru | 205,133,63 | 30,59%,53% | #cd853f | |
pink | 255,192,203 | 350,100%,88% | #ffc0cb | |
plum | 221,160,221 | 300,47%,75% | #dda0dd | |
powderblue | 176,224,230 | 187,52%,80% | #b0e0b6 | |
purple | 128,0,128 | 300,100%,25% | #800080 | |
rebeccapurple | 102,51,153 | 270,50%,40% | #663399 | |
red | 255,0,0 | 0,100%,50% | #ff0000 | |
rosybrown | 188,143,143 | 0,25%,65% | #bc8f8f | |
royalblue | 65,105,225 | 225,73%,57% | #4169e1 | |
saddlebroun | 139,69,19 | 25,76%,31% | #8b4513 | |
salmon | 250,128,114 | 6,93%,71% | #fa8072 | |
sandybroun | 244,164,96 | 28,87%,67% | #f4a460 | |
seagreen | 46,139,87 | 146,50%,36% | #2e8b57 | |
seashell | 255,245,238 | 25,100%,97% | #fff5ee | |
sienna | 160,82,45 | 19,56%,40% | #a0522d | |
skyblue | 135,206,235 | 197,71%,73% | #87ceeb | |
slateblue | 106,90,205 | 248,53%,58% | #6a5acd | |
slategray | 112,128,144 | 210,13%,50% | #708090 | |
snow | 255,250,250 | 0,100%,99% | #fffafa | |
springgreen | 0,255,127 | 150,100%,50% | #00ff7f | |
steelblue | 70,130,180 | 207,44%,49% | #4682b4 | |
tan | 210,180,140 | 34,44%,69% | #d2b48c | |
teal | 0,128,128 | 180,100%,25% | #008080 | |
thistle | 216,191,216 | 300,24%,80% | #d8bfd8 | |
tomato | 255,99,71 | 9,100%,64% | #ff6347 | |
turquoise | 64,224,208 | 174,72%,56% | #40e0d0 | |
violet | 238,130,238 | 300,76%,72% | #ee82ee | |
wheat | 245,222,179 | 39,77%,83% | #f5deb3 | |
yellow | 255,255,0 | 60,100%,50% | #ffff00 | |
yellowgreen | 154,205,50 | 80,61%,50% | #9acd32 |
Color | RGB | HSL | 16 | |
lightskyblue | 135,206,250 | 203,92%,75% | #87cefa | |
deepskyblue | 0,191,255 | 195,100%,50% | #00bfff | |
dodgerblue | 30.144,255 | 210,100%,56% | #1e90ff | |
cornflowerblue | 100,149,237 | 219,79%,67% | #6495ed | |
royalblue | 65,105,225 | 225,73%,57% | #4169e1 | |
blue | 0,0,255 | 240,100%,50% | #0000ff | |
mediumblue | 0,0,205 | 240,100%,40% | #0000cd | |
darkblue | 0,0,139 | 240,100%,27% | #00008b | |
navy | 0,0,128 | 240,100%,25% | #000080 | |
midnightblue | 25,25,122 | 240,64%,27% | #191970 | |
darklateblue | 72,61,139 | 248,39%,39% | #483d8b | |
indigo | 75,0,130 | 275,100%,25% | #4b0082 | |
darkmagenta | 139,0,139 | 300,100%,27% | #8b008b | |
darkviolet | 148,0,211 | 282,100%,41% | #9400d3 | |
darkorchid | 153,50,204 | 280,61%,50% | #9932cc | |
blueviolet | 138,43,226 | 271,76%,53% | #8a2be2 | |
violet | 238,130,238 | 300,76%,72% | #ee82ee |
Color | RGB | HSL | 16 | |
palegreen | 152,251,152 | 120,93%,79% | #98fb98 | |
springgreen | 0,255,127 | 150,100%,50% | #00ff7f | |
mediumspringgreen | 0,250,154 | 157,100%,49% | #00fa9a | |
chartreuse | 127,255,0 | 90,100%,50% | #7fff00 | |
lawngreen | 124,252,0 | 90,100%,49% | #7cfc00 | |
lime | 0,255,0 | 120,100%,50% | #00ff00 | |
limegreen | 50,205,50 | 120,61%,50% | #32cd32 | |
green | 0,128,0 | 120,100%,25% | #008000 | |
forestgreen | 34,139,34 | 120,61%,34% | #228b22 | |
seagreen | 46,139,87 | 146,50%,36% | #2e8b57 | |
darkgreen | 0,100,0 | 120,100%,20% | #006400 | |
yellowgreen | 154,205,50 | 80,61%,50% | #9acd32 | |
olivedrab | 107,142,35 | 80,60%,35% | #6b8e23 | |
olivedrab | 107,142,35 | 80,60%,35% | #6b8e23 | |
darkolivegreen | 85,107,47 | 82,39%,30% | #556b2f | |
aqua (cyan) | 0,255,255 | 180,100%,50% | #00ffff | |
aquamarine | 127,255,212 | 160,100%,75% | #7fffd4 | |
lightseegreen | 32,178,170 | 177,70%,41% | #20b2aa | |
darkcyan | 0,139,139 | 180,100%,27% | #008b8b | |
teal | 0,128,128 | 180,100%,25% | #008080 | |
darkseagreen | 143,188,143 | 120,25%,65% | #8fbc8f |
Color | RGB | HSL | 16 | |
darkred | 139,0,0 | 0,100%,27% | #8b0000 | |
maroon | 128,0,0 | 0,100%,25% | #800000 | |
firebrick | 178,34,34 | 0,68%,42% | #b22222 | |
lightcoral | 240,128,128 | 0,79%,72% | #f08080 | |
salmon | 250,128,114 | 6,93%,71% | #fa8072 | |
tomato | 255,99,71 | 9,100%,64% | #ff6347 | |
red | 255,0,0 | 0,100%,50% | #ff0000 | |
orangered | 255,69,0 | 16,100%,50% | #ff4500 | |
darkorange | 255,140,0 | 33,100%,50% | #ff8c00 | |
orange | 255,165,0 | 38.8,100%,50% | #ffa500 | |
yellow | 255,255,0 | 60,100%,50% | #ffff00 |
Color | RGB | HSL | 16 | |
rebeccapurple | 102,51,153 | 270,50%,40% | #663399 | |
mediumpurple | 147,112,219 | 260,60%65% | #9370db | |
purple | 128,0,128 | 300,100%,25% | #800080 | |
orchid | 218,112,214 | 302,59%,65% | #da70d6 | |
plum | 221,160,221 | 300,47%,75% | #dda0dd | |
pink | 255,192,203 | 350,100%,88% | #ffc0cb | |
hotpink | 255,105,180 | 330,100%,71% | #ff69b4 | |
deeppink | 255,20,147 | 328,100%,54% | #ff1493 | |
fuchsia или magenta | 255,0,255 | 300,100%,50% | #ff00ff |
Color | RGB | HSL | 16 | |
mistyrose | 255,228,225 | 6,100%,94% | #ffe4e1 | |
lavenderblush | 255,240,245 | 340,100%,97% | #fff0f5 | |
honeydew | 240,255,240 | 120,100%,97% | #f0fff0 | |
mintcream | 245,255,250 | 150,100%,98% | #f5fffa | |
azure | 240,255,255 | 180,100%,97% | #f0ffff | |
aliceblue | 240,248,255 | 208,100%,97% | #f0f8ff | |
ghostwhite | 248,248,255 | 240,100%,99% | #f8f8ff | |
snow | 255,250,250 | 0,100%,99% | #fffafa | |
ivory | 255,255,240 | 60,100%,97% | #fffff0 | |
floralwhite | 255,250,240 | 40,100%,97% | #fffaf0 | |
oldlace | 253,245,230 | 39,85%,95% | #fdf5e6 | |
seashell | 255,245,238 | 25,100%,97% | #fff5ee | |
cornsilk | 255,248,220 | 48,100%,93% | #fff8dc | |
lemoncheffon | 255,250,205 | 54,100%,90% | #fffacd | |
beige | 245,245,220 | 60,56%,91% | #f5f5dc | |
linen | 250,240,230 | 30,67%94% | #faf0e6 | |
papayawhip | 255,239,213 | 37,100%,92% | #ffefd5 | |
antiquewhite | 250,235,215 | 34,78%,91% | #faebd7 | |
blanchcdalmond | 255,235,205 | 36,100%,90% | #ffebcd | |
bisque | 255,228,196 | 33,100%,88% | #ffe4c4 | |
moccasin | 255,228,181 | 38,100%,85% | #ffe4b5 | |
wheat | 245,222,179 | 39,77%,83% | #f5deb3 | |
peachpuff | 255,218,185 | 28,100%,86% | #ffdab9 | |
burlywood | 222,184,135 | 34,57%,70% | #deb887 | |
peru | 205,133,63 | 30,59%,53% | #cd853f |
Примеры кода
Код HEX (шестнадцатиричный):
1 {
2 color: #ffff00;
3 }
Код RGB:
1 {
2 color: rgb(255,255,0);
3 }
Код RGBA (с указанием прозрачности*):
1 {
2 color: rgba(255,255,0,.7);
3 }
Код HSL:
1 {
2 color: hsl(60,100%,50%);
3 }
Код HSLA (с указанием прозрачности*):
1 {
2 color: hsla(60,100%,50%,.7);
3 }
* Значение прозрачности в виде десятичной дроби может быть указано как 0.7 или .7 (с использованием точки, а не запятой!).