Перейти к содержимому

HTML-цвета

Существует три способа изменить цвет текста в HTML: использовать шестнадцатеричные коды цвета, имена HTML-цветов или значения RGB.

Шестнадцатеричные коды цвета

Шестнадцатеричный код цвета — это шестнадцатеричная триада, которая представляет три отдельных значения, определяющих уровни компонентных цветов. Он задаётся с помощью шестнадцатеричной (hex) нотации для смеси значений красного, зелёного и синего цветов. Наименьшее значение, которое можно задать для одного из источников света, — 0 (hex 00). Наибольшее значение — 255 (hex FF).

Шестнадцатеричные значения записываются как шестизначные числа, начинающиеся со знака #. Буквы, используемые в шестнадцатеричной цифре, могут быть заглавными или строчными. Например, чтобы задать белый цвет, можно написать #FFFFFF или #ffffff.

Чтобы добавить цвет к текстовому элементу, используйте атрибут style (где свойство color — это ваш hex-код) или соответствующие CSS-свойства, такие как color: или background-color:.

Пример использования свойства background-color со значением "hex":

Цвет текста и фона|Пример HTML Colors|Шестнадцатеричные коды цвета|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #1c87c9;
        color: #d5dce8;
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This is a text in grey, and the background is blue</p>
    </div>
    <p style="color:#8ebf42;"> This is a text in green</p>
  </body>
</html>

Результат

color-change

В таблице ниже вы можете увидеть hex-значения веб-цветов. Вы также можете использовать наш инструмент Color Picker, чтобы просматривать миллионы цветов с шестнадцатеричными кодами цвета.

Имена HTML-цветов

Чтобы окрасить текстовый элемент с помощью имени HTML-цвета, вместо hex-кода из предыдущего шага укажите имя цвета (например, blue).

Пример использования свойства color со значением "color name":

Пример имён HTML-цветов|HTML Colors|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>    
      div {
        background-color: blue;
        color: white;
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This is a text in grey, and the background is blue</p>
    </div>
    <p style="color:blue;"> This is a text in blue</p>
  </body>
</html>

Значения RGB цвета

Чтобы добавить цвет к текстовому элементу, используйте атрибут style (где свойство color — это ваше значение RGB) или соответствующие CSS-свойства.

Пример использования свойства background-color со значением "RGB":

Пример значений RGB цвета|HTML Colors|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color:rgb(25,25,112);
        color: rgb(169,169,169);
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This is a text in grey, and the background is blue</p>
    </div>
    <p style="color:rgb(25,25,112);"> This is a text in blue</p>
  </body>
</html>

Ниже приведена 216-цветная кроссбраузерная палитра, используемая для создания веб-страниц. Эта палитра во многом устарела для современных дисплеев, но здесь она всё ещё показана для справки.

Hex ValueColorRGB Value
#000000blackrgb(0,0,0)
#FFFFFFwhitergb(255,255,255)
#FF0000redrgb(255,0,0)
#00FFFFaquargb(0,255,255)
#0000FFbluergb(0,0,255)
#C0C0C0silverrgb(192,192,192)
#FF00FFfuchsiargb(255,0,255)
#000000blackrgb(0,0,0)
#080000rgb(8,0,0)
#100000rgb(16,0,0)
#180000rgb(24,0,0)
#200000rgb(32,0,0)
#280000rgb(40,0,0)
#300000rgb(48,0,0)
#380000rgb(56,0,0)
#400000rgb(64,0,0)
#480000rgb(72,0,0)
#500000rgb(80,0,0)
#580000rgb(88,0,0)
#600000rgb(96,0,0)
#680000rgb(104,0,0)
#700000rgb(112,0,0)
#780000rgb(120,0,0)
#800000rgb(128,0,0)
#880000rgb(136,0,0)
#900000rgb(144,0,0)
#980000rgb(152,0,0)
#A00000rgb(160,0,0)
#A80000rgb(168,0,0)
#B00000rgb(176,0,0)
#B80000rgb(184,0,0)
#C00000rgb(192,0,0)
#C80000rgb(200,0,0)
#D00000rgb(208,0,0)
#D80000rgb(216,0,0)
#E00000rgb(224,0,0)
#E80000rgb(232,0,0)
#F00000rgb(240,0,0)
#F80000rgb(248,0,0)
#FF0000rgb(255,0,0)
#000000rgb(0,0,0)
#080808rgb(8,8,8)
#101010rgb(16,16,16)
#181818rgb(24,24,24)
#202020rgb(32,32,32)
#282828rgb(40,40,40)
#303030rgb(48,48,48)
#383838rgb(56,56,56)
#404040rgb(64,64,64)
#484848rgb(72,72,72)
#505050rgb(80,80,80)
#585858rgb(88,88,88)
#606060rgb(96,96,96)
#686868rgb(104,104,104)
#707070rgb(112,112,112)
#787878rgb(120,120,120)
#808080rgb(128,128,128)
#888888rgb(136,136,136)
#909090rgb(144,144,144)
#989898rgb(152,152,152)
#A0A0A0rgb(160,160,160)
#A8A8A8rgb(168,168,168)
#B0B0B0rgb(176,176,176)
#B8B8B8rgb(184,184,184)
#C0C0C0rgb(192,192,192)
#C8C8C8rgb(200,200,200)
#D0D0D0rgb(208,208,208)
#D8D8D8rgb(216,216,216)
#E0E0E0rgb(224,224,224)
#E8E8E8rgb(232,232,232)
#F0F0F0rgb(240,240,240)
#F8F8F8rgb(248,248,248)
#FFFFFFrgb(255,255,255)
#000000#000033#000066
#003300#003333#003366
#006600#006633#006666
#009900#009933#009966
#00CC00#00CC33#00CC66
#00FF00#00FF33#00FF66
#330000#330033#330066
#333300#333333#333366
#336600#336633#336666
#339900#339933#339966
#33CC00#33CC33#33CC66
#33FF00#33FF33#33FF66
#660000#660033#660066
#663300#663333#663366
#666600#666633#666666
#669900#669933#669966
#66CC00#66CC33#66CC66
#66FF00#66FF33#66FF66
#990000#990033#990066
#993300#993333#993366
#996600#996633#996666
#999900#999933#999966
#99CC00#99CC33#99CC66
#99FF00#99FF33#99FF66
#CC0000#CC0033#CC0066
#CC3300#CC3333#CC3366
#CC6600#CC6633#CC6666
#CC9900#CC9933#CC9966
#CCCC00#CCCC33#CCCC66
#CCFF00#CCFF33#CCFF66
#FF0000#FF0033#FF0066
#FF3300#FF3333#FF3366
#FF6600#FF6633#FF6666
#FF9900#FF9933#FF9966
#FFCC00#FFCC33#FFCC66
#FFFF00#FFFF33#FFFF66

Список HTML-имен цветов:

Вот список некоторых стандартных HTML-имен цветов:

Color NameHexadecimal Value
AliceBlue#F0F8FF
AntiqueWhite#FAEBD7
Aqua#00FFFF
Aquamarine#7FFFD4
Azure#F0FFFF
Beige#F5F5DC
Bisque#FFE4C4
Black#000000
BlanchedAlmond#FFEBCD
Blue#0000FF
BlueViolet#8A2BE2
Brown#A52A2A
BurlyWood#DEB887
CadetBlue#5F9EA0
Chartreuse#7FFF00
Chocolate#D2691E
Coral#FF7F50
CornflowerBlue#6495ED
Cornsilk#FFF8DC
Crimson#DC143C
Cyan#00FFFF
DarkBlue#00008B
DarkCyan#008B8B
DarkGoldenRod#B8860B
DarkGray#A9A9A9
DarkGrey#A9A9A9
DarkGreen#006400
DarkKhaki#BDB76B
DarkMagenta#8B008B
DarkOliveGreen#556B2F
DarkOrange#FF8C00
DarkOrchid#9932CC
DarkRed#8B0000
DarkSalmon#E9967A
DarkSeaGreen#8FBC8F
DarkSlateBlue#483D8B
DarkSlateGray#2F4F4F
DarkSlateGrey#2F4F4F
DarkTurquoise#00CED1
DarkViolet#9400D3
DeepPink#FF1493
DeepSkyBlue#00BFFF
DimGray#696969
DimGrey#696969
DodgerBlue#1E90FF
FireBrick#B22222
FloralWhite#FFFAF0
ForestGreen#228B22
Fuchsia#FF00FF
Gainsboro#DCDCDC
GhostWhite#F8F8FF
Gold#FFD700
GoldenRod#DAA520
Gray#808080
Grey#808080
Green#008000
GreenYellow#ADFF2F
HoneyDew#F0FFF0
HotPink#FF69B4
IndianRed#CD5C5C
Indigo#4B0082
Ivory#FFFFF0
Khaki#F0E68C
Lavender#E6E6FA
LavenderBlush#FFF0F5
LawnGreen#7CFC00
LemonChiffon#FFFACD
LightBlue#ADD8E6
LightCoral#F08080
LightCyan#E0FFFF
LightGoldenRodYellow#FAFAD2
LightGray#D3D3D3
LightGrey#D3D3D3
LightGreen#90EE90
LightPink#FFB6C1
LightSalmon#FFA07A
LightSeaGreen#20B2AA
LightSkyBlue#87CEFA
LightSlateGray#778899
LightSlateGrey#778899
LightSteelBlue#B0C4DE
LightYellow#FFFFE0
Lime#00FF00
LimeGreen#32CD32
Linen#FAF0E6
Magenta#FF00FF
Maroon#800000
MediumAquaMarine#66CDAA
MediumBlue#0000CD
MediumOrchid#BA55D3
MediumPurple#9370DB
MediumSeaGreen#3CB371
MediumSlateBlue#7B68EE
MediumSpringGreen#00FA9A
MediumTurquoise#48D1CC
MediumVioletRed#C71585
MidnightBlue#191970
MintCream#F5FFFA
MistyRose#FFE4E1
Moccasin#FFE4B5
NavajoWhite#FFDEAD
Navy#000080
OldLace#FDF5E6
Olive#808000
OliveDrab#6B8E23
Orange#FFA500
OrangeRed#FF4500
Orchid#DA70D6
PaleGoldenRod#EEE8AA
PaleGreen#98FB98
PaleTurquoise#AFEEEE
PaleVioletRed#DB7093
PapayaWhip#FFEFD5
PeachPuff#FFDAB9
Peru#CD853F
Pink#FFC0CB
Plum#DDA0DD
PowderBlue#B0E0E6
Purple#800080
Red#FF0000
RosyBrown#BC8F8F
RoyalBlue#4169E1
SaddleBrown#8B4513
Salmon#FA8072
SandyBrown#F4A460
SeaGreen#2E8B57
SeaShell#FFF5EE
Sienna#A0522D
Silver#C0C0C0
SkyBlue#87CEEB
SlateBlue#6A5ACD
SlateGray#708090
SlateGrey#708090
Snow#FFFAFA
SpringGreen#00FF7F
SteelBlue#4682B4
Tan#D2B48C
Teal#008080
Thistle#D8BFD8
Tomato#FF6347
Turquoise#40E0D0
Violet#EE82EE
Wheat#F5DEB3
White#FFFFFF
WhiteSmoke#F5F5F5
Yellow#FFFF00
YellowGreen#9ACD32

Эти имена цветов можно использовать в HTML и CSS-коде, чтобы задавать цвет текста, фона, границ и других элементов.

Практика

Какие из следующих способов используются для задания цветов в HTML?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.