Справочники

Таблицы цветовой кодировки

 

 Общие сведения

 Таблица 1. Градации серого

 Таблица 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 (полностью непрозрачно) и иметь промежуточные значения.

 В конце приведены примеры кода.

  

 

Таблица 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

  

 

 Таблица 2. Все цвета (общая таблица)
  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

  

 

Таблица 3. Оттенки фиолетового и синего цветов 
  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 

  

 

Таблица 4. Оттенки зелёного цвета
  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 

  

 

Таблица 5. Оттенки жёлтого и красного цветов
  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

  

Таблица 6. Оттенки розового и пурпурного цветов
  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

 

  

 

Таблица 7. Светлые и бежевые тона 
  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 (с использованием точки, а не запятой!).

 

 

Добавлять комментарии и ответы могут только пользователи, прошедшие регистрацию!
Зарегистрируйтесь и напишите своё мнение или ответ!