Цвета HTML

Цветa html

Одной из составляющих представления веб-страниц в интернете является цвет, современные браузеры принимают и воспроизводят его, используя цветовые модели RGB, HSL, или же ключевые слова (названия).

Значения цвета в HTML может быть задано одним из следующих способов.

  • RGB:
    в шестнадцатеричном коде (hex): #008800 или его сокращенном написании: #080.
    в процентах: rgb(80%, 20%, 30%),
    числами от 0 до 255: rgb(240, 120, 10).
  • По имени:
    Teal или teal (регистр значения не имеет).
  • HSL:
    в процентах: hsl(195, 60%, 40%).
Стандарт W3C HTML 4.01 определяет имена 16 цветов:
ИмяR G BH S L
white #ffffff 255, 255, 255 0°, 0%, 100%
silver #c0c0c0 192, 192, 192 0°, 0%, 75%
gray #808080 128, 128, 128 0°, 0%, 50%
black #000000 0, 0, 0 0°, 0%, 0%
red #ff0000 255, 0, 0 0°, 100%, 50%
maroon #800000 128, 0, 0 0°, 100%, 25%
fuchsia #ff00ff 255, 0, 255 300°, 100%, 50%
purple #800080 128, 0, 128 300°, 100%, 25%
lime #00ff00 0, 100, 0 120°, 100%, 50%
green #008000 0, 128, 0 120°, 100%, 25%
yellow #ffff00 255, 255, 0 60°, 100%, 50%
olive #808000 128, 128, 0 60°, 100%, 25%
aqua #00ffff 0, 255, 255 180°, 100%, 50%
teal #008080 0, 128, 128 180°, 100%, 25%
blue #0000ff 0, 0, 255 240°, 100%, 50%
navy #000080 0, 0, 128 240°, 100%, 25%

Согласно последним рекомендациям W3C, применение элементов и атрибутов HTML для указания цвета (к примеру: style="color: #0000ff;") устарело, и в качестве альтернативы предложено использовать каскадные таблицы стилей - CSS.

Имена цветов CSS, SVG.

В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через "a", так и через "e" (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).

Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.

ИмяR G BH S L
white #ffffffhex 0°, 0%, 100%
ivory #fffff0hex 60°, 100%, 97%
lightyellow #ffffe0hex 60°, 100%, 94%
yellow #ffff00hex 60°, 100%, 50%
snow #fffafahex 0°, 100%, 99%
floralwhite #fffaf0hex 40°, 100%, 97%
lemonchiffon #fffacdhex 54°, 100%, 90%
cornsilk #fff8dchex 48°, 100%, 93%
seashell #fff5eehex 25°, 100%, 97%
lavenderblush #fff0f5hex 340°, 100%, 97%
papayawhip #ffefd5hex 37°, 100%, 92%
blanchedalmond #ffebcdhex 36°, 100%, 90%
mistyrose #ffe4e1hex 6°, 100%, 94%
bisque #ffe4c4hex 33°, 100%, 88%
moccasin #ffe4b5hex 38°, 100%, 86%
navajowhite #ffdeadhex 36°, 100%, 84%
peachpuff #ffdab9hex 28°, 27%, 100%
gold #ffd700hex 51°, 100%, 50%
pink #ffc0cbhex 350°, 100%, 88%
lightpink #ffb6c1hex 351°, 100%, 86%
orange #ffa500hex 39°, 100%, 50%
lightsalmon #ffa07ahex 17°, 100%, 74%
darkorange #ff8c00hex 33°, 100%, 50%
coral #ff7f50hex 16°, 100%, 66%
hotpink #ff69b4hex 330°, 100%, 71%
tomato #ff6347hex 9°, 100%, 64%
orangered #ff4500hex 16°, 100%, 50%
deeppink #ff1493hex 328°, 100%, 54%
magenta, fuchsia #ff00ffhex 300°, 100%, 50%
red #ff0000hex 0°, 100%, 50%
oldlace #fdf5e6hex 39°, 85%, 95%
lightgoldenrodyellow #fafad2hex 60°, 80%, 90%
linen #faf0e6hex 30°, 67%, 94%
antiquewhite #faebd7hex 34°, 78%, 91%
salmon #fa8072hex 6°, 93%, 71%
ghostwhite #f8f8ffhex 240°, 100%, 99%
mintcream #f5fffahex 150°, 100%, 98%
whitesmoke #f5f5f5hex 0°, 0%, 96%
beige #f5f5dchex 60°, 56%, 91%
wheat #f5deb3hex 39°, 77%, 83%
sandybrown #f4a460hex 28°, 87%, 67%
azure #f0ffffhex 180°, 100%, 97%
honeydew #f0fff0hex 120°, 100%, 97%
aliceblue #f0f8ffhex 208°, 100%, 97%
khaki #f0e68chex 54°, 77%, 75%
lightcoral #f08080hex 0°, 79%, 72%
palegoldenrod #eee8aahex 55°, 67%, 80%
violet #ee82eehex 300°, 76%, 72%
darksalmon #e9967ahex 15°, 72%, 70%
lavender #e6e6fahex 240°, 67%, 94%
lightcyan #e0ffffhex 180°, 100%, 94%
burlywood #deb887hex 34°, 57%, 70%
plum #dda0ddhex 300°, 47%, 75%
gainsboro #dcdcdchex 0°, 0%, 86%
crimson #dc143chex 348°, 83%, 47%
palevioletred #db7093hex 340°, 60%, 65%
goldenrod #daa520hex 43°, 74%, 49%
orchid #da70d6hex 302°, 59%, 65%
thistle #d8bfd8hex 300°, 24%, 80%
lightgray, lightgrey #d3d3d3hex 0°, 0%, 83%
tan #d2b48chex 34°, 44%, 67%
chocolate #d2691ehex 25°, 75%, 47%
peru #cd853fhex 30°, 59%, 53%
indianred #cd5c5chex 0°, 53%, 58%
mediumvioletred #c71585hex 322°, 81%, 43%
silver #c0c0c0hex 0°, 0%, 75%
darkkhaki #bdb76bhex 56°, 38%, 58%
rosybrown #bc8f8fhex 0°, 25%, 65%
mediumorchid #ba55d3hex 288°, 59%, 58%
darkgoldenrod #b8860bhex 43°, 89%, 38%
firebrick #b22222hex 0°, 68%, 42%
powderblue #b0e0e6hex 187°, 52%, 80%
lightsteelblue #b0c4dehex 214°, 41%, 78%
paleturquoise #afeeeehex 180°, 65%, 81%
greenyellow #adff2fhex 84°, 100%, 59%
lightblue #add8e6hex 195°, 53%, 79%
darkgray, darkgrey #a9a9a9hex 0°, 0%, 66%
brown #a52a2ahex 0°, 59%, 41%
sienna #a0522dhex 19°, 56%, 40%
yellowgreen #9acd32hex 80°, 61%, 50%
darkorchid #9932cchex 280°, 61%, 50%
palegreen #98fb98hex 120°, 93%, 79%
darkviolet #9400d3hex 282°, 100%, 41%
mediumpurple #9370dbhex 260°, 60%, 65%
lightgreen #90ee90hex 120°, 73%, 75%
darkseagreen #8fbc8fhex 120°, 25%, 65%
saddlebrown #8b4513hex 25°, 76%, 31%
darkmagenta #8b008bhex 300°, 100%, 27%
darkred #8b0000hex 0°, 100%, 27%
blueviolet #8a2be2hex 271°, 76%, 53%
lightskyblue #87cefahex 203°, 92%, 76%
skyblue #87ceebhex 197°, 71%, 73%
gray, grey #808080hex 0°, 0%, 50%
olive #808000hex 60°, 100%, 25%
purple #800080hex 300°, 100%, 25%
maroon #800000hex 0°, 100%, 25%
aquamarine #7fffd4hex 160°, 100%, 75%
chartreuse #7fff00hex 90°, 100%, 50%
lawngreen #7cfc00hex 91°, 100%, 4%
mediumslateblue #7b68eehex 249°, 80%, 67%
lightslategray, lightslategrey #778899hex 210°, 14%, 53%
slategray или slategrey #708090hex 210°, 13%, 50%
olivedrab #6b8e23hex 80°, 61%, 35%
slateblue #6a5acdhex 248°, 54%, 58%
dimgray, dimgrey #696969hex 0°, 0%, 41%
mediumaquamarine #66cdaahex 160°, 51%, 60%
rebeccapurple #663399hex 270°, 50%, 40%
cornflowerblue #6495edhex 219°, 79%, 66%
cadetblue #5f9ea0hex 182°, 26%, 50%
darkolivegreen #556b2fhex 82°, 39%, 30%
indigo #4b0082hex 275°, 100%, 26%
mediumturquoise #48d1cchex 178°, 60%, 55%
darkslateblue #483d8bhex 249°, 39%, 39%
steelblue #4682b4hex 207°, 44%, 49%
royalblue #4169e1hex 225°, 73%, 57%
turquoise #40e0d0hex 174°, 72%, 57%
mediumseagreen #3cb371hex 147°, 50%, 47%
limegreen #32cd32hex 120°, 61%, 50%
darkslategray, darkslategrey #2f4f4fhex 180°, 25%, 25%
seagreen #2e8b57hex 147°, 50%, 36%
forestgreen #228b22hex 120°, 61%, 34%
lightseagreen #20b2aahex 177°, 70%, 41%
dodgerblue #1e90ffhex 210°, 100%, 56%
midnightblue #191970hex 240°, 64%, 27%
aqua, cyan #00ffffhex 180°, 100%, 50%
springgreen #00ff7fhex 150°, 100%, 50%
lime #00ff00hex 120°, 100%, 50%
mediumspringgreen #00fa9ahex 157°, 100%, 49%
darkturquoise #00ced1hex 181°, 100%, 41%
deepskyblue #00bfffhex 195°, 100%, 50%
darkcyan #008b8bhex 180°, 100%, 27%
teal #008080hex 180°, 100%, 25%
green #008000hex 120°, 100%, 25%
darkgreen #006400hex 120°, 100%, 20%
blue #0000ffhex 240°, 100%, 50%
mediumblue #0000cdhex 240°, 100%, 40%
darkblue #00008bhex 240°, 100%, 27%
navy #000080hex 240°, 100%, 25%
black #000000hex 0°, 0%, 0%

Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.