Таблица цветов html

Таблица Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.

  • 255 255 204#FFFFCC
  • 255 255 153#FFFF99
  • 255 255 102#FFFF66
  • 255 255 51#FFFF33
  • 255 255 0#FFFF00
  • 204 204 0#CCCC00
  • 255 204 102#FFCC66
  • 255 204 0#FFCC00
  • 255 204 51#FFCC33
  • 204 153 0#CC9900
  • 204 153 51#CC9933
  • 153 102 0#996600
  • 255 153 0#FF9900
  • 255 153 51#FF9933
  • 204 153 102#CC9966
  • 204 102 0#CC6600
  • 153 102 51#996633
  • 102 51 0#663300
  • 255 204 153#FFCC99
  • 255 153 102#FF9966
  • 255 102 0#FF6600
  • 204 102 51#CC6633
  • 153 51 0#993300
  • 102 0 0#660000
  • 255 102 51#FF6633
  • 204 51 0#CC3300
  • 255 51 0#FF3300
  • 255 0 0#FF0000
  • 204 0 0#CC0000
  • 153 0 0#990000
  • 255 204 204#FFCCCC
  • 255 153 153#FF9999
  • 255 102 102#FF6666
  • 255 51 51#FF3333
  • 255 0 51#FF0033
  • 204 0 51#CC0033
  • 204 153 153#CC9999
  • 204 102 102#CC6666
  • 204 51 51#CC3333
  • 153 51 51#993333
  • 153 0 51#990033
  • 51 0 0#330000
  • 255 102 153#FF6699
  • 255 51 102#FF3366
  • 255 0 102#FF0066
  • 204 51 102#CC3366
  • 153 102 102#996666
  • 102 51 51#663333
  • 255 153 204#FF99CC
  • 255 51 153#FF3399
  • 255 0 153#FF0099
  • 204 0 102#CC0066
  • 153 51 102#993366
  • 102 0 51#660033
  • 255 102 204#FF66CC
  • 255 0 204#FF00CC
  • 255 51 204#FF33CC
  • 204 102 153#CC6699
  • 204 0 153#CC0099
  • 153 0 102#990066
  • 255 204 255#FFCCFF
  • 255 153 255#FF99FF
  • 255 102 255#FF66FF
  • 255 51 255#FF33FF
  • 255 0 255#FF00FF
  • 204 51 153#CC3399
  • 204 153 204#CC99CC
  • 204 102 204#CC66CC
  • 204 0 204#CC00CC
  • 204 51 204#CC33CC
  • 153 0 153#990099
  • 153 51 153#993399
  • 204 102 255#CC66FF
  • 204 51 255#CC33FF
  • 204 0 255#CC00FF
  • 153 0 204#9900CC
  • 153 102 153#996699
  • 102 0 102#660066
  • 204 153 255#CC99FF
  • 153 51 204#9933CC
  • 153 51 255#9933FF
  • 153 0 255#9900FF
  • 102 0 153#660099
  • 102 51 102#663366
  • 153 102 204#9966CC
  • 153 102 255#9966FF
  • 102 0 204#6600CC
  • 102 51 204#6633CC
  • 102 51 153#663399
  • 51 0 51#330033
  • 204 204 255#CCCCFF
  • 153 153 255#9999FF
  • 102 51 255#6633FF
  • 102 0 255#6600FF
  • 51 0 153#330099
  • 51 0 102#330066
  • 153 153 204#9999CC
  • 102 102 255#6666FF
  • 102 102 204#6666CC
  • 102 102 153#666699
  • 51 51 153#333399
  • 51 51 102#333366
  • 51 51 255#3333FF
  • 51 0 255#3300FF
  • 51 0 204#3300CC
  • 51 51 204#3333CC
  • 0 0 153#000099
  • 0 0 102#000066
  • 102 153 255#6699FF
  • 51 102 255#3366FF
  • 0 0 255#0000FF
  • 0 0 204#0000CC
  • 0 51 204#0033CC
  • 0 0 51#000033
  • 0 102 255#0066FF
  • 0 102 204#0066CC
  • 51 102 204#3366CC
  • 0 51 255#0033FF
  • 0 51 153#003399
  • 0 51 102#003366
  • 153 204 255#99CCFF
  • 51 153 255#3399FF
  • 0 153 255#0099FF
  • 102 153 204#6699CC
  • 51 102 153#336699
  • 0 102 153#006699
  • 102 204 255#66CCFF
  • 51 204 255#33CCFF
  • 0 204 255#00CCFF
  • 51 153 204#3399CC
  • 0 153 204#0099CC
  • 0 51 51#003333
  • 153 204 204#99CCCC
  • 102 204 204#66CCCC
  • 51 153 153#339999
  • 102 153 153#669999
  • 0 102 102#006666
  • 51 102 102#336666
  • 204 255 255#CCFFFF
  • 153 255 255#99FFFF
  • 102 255 255#66FFFF
  • 51 255 255#33FFFF
  • 0 255 255#00FFFF
  • 0 204 204#00CCCC
  • 153 255 204#99FFCC
  • 102 255 204#66FFCC
  • 51 255 204#33FFCC
  • 0 255 204#00FFCC
  • 51 204 204#33CCCC
  • 0 153 153#009999
  • 102 204 153#66CC99
  • 51 204 153#33CC99
  • 0 204 153#00CC99
  • 51 153 102#339966
  • 0 153 102#009966
  • 0 102 51#006633
  • 102 255 153#66FF99
  • 51 255 153#33FF99
  • 0 255 153#00FF99
  • 51 204 102#33CC66
  • 0 204 102#00CC66
  • 0 153 51#009933
  • 153 255 153#99FF99
  • 102 255 102#66FF66
  • 51 255 102#33FF66
  • 0 255 102#00FF66
  • 51 153 51#339933
  • 0 102 0#006600
  • 204 255 204#CCFFCC
  • 153 204 153#99CC99
  • 102 204 102#66CC66
  • 102 153 102#669966
  • 51 102 51#336633
  • 0 51 0#003300
  • 51 255 51#33FF33
  • 0 255 51#00FF33
  • 0 255 0#00FF00
  • 0 204 0#00CC00
  • 51 204 51#33CC33
  • 0 204 51#00CC33
  • 102 255 0#66FF00
  • 102 255 51#66FF33
  • 51 255 0#33FF00
  • 51 204 0#33CC00
  • 51 153 0#339900
  • 0 153 0#009900
  • 204 255 153#CCFF99
  • 153 255 102#99FF66
  • 102 204 0#66CC00
  • 102 204 51#66CC33
  • 102 153 51#669933
  • 51 102 0#336600
  • 153 255 0#99FF00
  • 153 255 51#99FF33
  • 153 204 102#99CC66
  • 153 204 0#99CC00
  • 153 204 51#99CC33
  • 102 153 0#669900
  • 204 255 102#CCFF66
  • 204 255 0#CCFF00
  • 204 255 51#CCFF33
  • 204 204 153#CCCC99
  • 102 102 51#666633
  • 51 51 0#333300
  • 204 204 102#CCCC66
  • 204 204 51#CCCC33
  • 153 153 102#999966
  • 153 153 51#999933
  • 153 153 0#999900
  • 102 102 0#666600
  • 255 255 255#FFFFFF
  • 204 204 204#CCCCCC
  • 153 153 153#999999
  • 102 102 102#666666
  • 51 51 51#333333
  • 0 0 0#000000

Имена цветов, отсортированные по цветным группам

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

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

Имена цветов, поддерживаемые всеми обозревателями

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

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

❮ Назад
Дальше ❯

Таблица цветов

Цветовая константа Red Green Blue Образец
alicemblue F0 F8 FF  
antiquewhite FA EB D7  
aqua 00 FF FF  
aquamarine 7F FF D4  
azure F0 FF FF  
beige F5 F5 DC  
bisque FF E4 C4  
black 00 00 00  
blanchedalmond FF EB CD  
blue 00 00 FF  
blueviolet 8A 2B E2  
brown A5 2A 2A  
burlywood DE B8 87  
cadetblue 5F 9E A0  
chartreuse 7F FF 00  
chocolate D2 69 1E  
coral FF 7F 50  
cornflowerblue 64 95 ED  
cornsilk FF F8 DC  
crimson DC 14 3C  
cyan 00 FF FF  
darkblue 00 00 8B  
darkcyan 00 8B 8B  
darkgoldenrod B8 86 0B  
darkgray A9 A9 A9  
darkgreen 00 64 00  
darkkhaki BD B7 6B  
darkmagenta 8B 00 8b  
darkolivegreen 55 6B 2F  
darkorange FF 8C 00  
darkochid 99 32 CC  
darkred 8B 00 00  
darksalmon E9 96 7A  
darkseagreen 8F BC 8F  
darkslateblue 48 3D 8B  
darkslategray 2F 4F 4F  
darkturquoise 00 CE D1  
darkviolet 94 00 D3  
deeppink FF 14 93  
deepskyblue 00 BF FF  
dimgray 69 69 69  
dodgerblue 1E 90 FF  
firebrick B2 22 22  
floralwhite FF FA F0  
forestgreen 22 8B 22  
fushsia FF 00 FF  
gainsboro DC DC DC  
ghostwhite F8 F8 FF  
gold FF D7 00  
goldenrod DA A5 20  
gray 80 80 80  
green 00 80 00  
greenyellow AD FF 2F  
honeydew F0 FF F0  
hotpink FF 69 B4  
indiandred CD 5C 5C  
indigo 4B 00 82  
ivory FF FF F0  
khaki F0 E6 8C  
lavender E6 E6 FA  
lavenderblush FF F0 F5  
lawngreen 7C FC 00  
lemonchiffon FF FA CD  
ligtblue AD D8 E6  
lightcoral F0 80 80  
lightcyan E0 FF FF  
lightgoldenrodyellow FA FA D2  
lightgreen 90 EE 90  
lightgrey D3 D3 D3  
lightpink FF B6 C1  
Цветовая константа Red Green Blue Образец
lightsalmon FF A0 7A  
lightseagreen 20 B2 AA  
lightscyblue 87 CE FA  
lightslategray 77 88 99  
lightsteelblue B0 C4 DE  
lightyellow FF FF E0  
lime 00 FF 00  
limegreen 32 CD 32  
linen FA F0 E6  
magenta FF 00 FF  
maroon 80 00 00  
mediumaquamarine 66 CD AA  
mediumblue 00 00 CD  
mediumorchid BA 55 D3  
mediumpurple 93 70 DB  
mediumseagreen 3C B3 71  
mediumslateblue 7B 68 EE  
mediumspringgreen 00 FA 9A  
mediumturquoise 48 D1 CC  
medium violetred C7 15 85  
midnightblue 19 19 70  
mintcream F5 FF FA  
mistyrose FF E4 E1  
moccasin FF E4 B5  
navajowhite FF DE AD  
navy 00 00 80  
oldlace FD F5 E6  
olive 80 80 00  
olivedrab 6B 8E 23  
orange FF A5 00  
orengered FF 45 00  
orchid DA 70 D6  
palegoldenrod EE E8 AA  
palegreen 98 FB 98  
paleturquose AF EE EE  
palevioletred DB 70 93  
papayawhop FF EF D5  
peachpuff FF DA B9  
peru CD 85 3F  
pink FF C0 CB  
plum DD A0 DD  
powderblue B0 E0 E6  
purple 80 00 80  
red FF 00 00  
rosybrown BC 8F 8F  
royalblue 41 69 E1  
saddlebrown 8B 45 13  
salmon FA 80 72  
sandybrown F4 A4 60  
seagreen 2E 8B 57  
seashell FF F5 EE  
sienna A0 52 2D  
silver C0 C0 C0  
skyblue 87 CE EB  
slateblue 6A 5A CD  
slategray 70 80 80  
snow FF FA FA  
springgreen 00 FF 7F  
steelblue 46 82 B4  
tan D2 B4 8C  
teal 00 80 80  
thistle D8 BF D8  
tomato FF 63 47  
turquose 40 E0 D0  
violet EE 82 EE  
wheat F5 DE B3  
white FF FF FF  
whitesmoke F5 F5 F5  
yellow FF FF 00  
yellowgreen 9A CD 32  

Как задать цвет, используя значение Hex ¶

HEX – шестнадцатеричная система представления цвета, которая использует арабские десятичные цифры от 0 до 9 и латинские буквы от A до F. В веб-дизайне используются 16 ключевых цветов, так называемый шестнадцатеричный код цвета #RRGGBB, RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Регистр букв в Hex не имеет значение. К примеру, определением белого цвета могут быть как заглавные буквы #FFFFFF, так и строчные #ffffff.

Для задания цвета используйте атрибут style, где свойством цвета будет код Hex.

Результат

В приведенной ниже таблице вы можете найти Hex код для каждого цвета. Получить код необходимого вам цвета вы также можете при помощи инструмента Пипетка/Color Picker.

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:

  1. 1.Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;

    PHP

    <p style=”color:#fff!important;”>…</p>

    1 <pstyle=”color#fff!important;”>…</p>
  2. 2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.

    Аналогично если вы зададите цвет текста для блока, внутри которого находится список, то для элементов этого списка он может не примениться и нужно будет отдельно задавать его именно для тегов списка.

  3. 3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
    Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

Более подробно об этом я писала в отдельной статье: Почему не работают CSS-стили?

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

HSL значение

В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:

HSL (оттенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Насыщенность

Насыщенность может быть охарактеризована как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

0% полностью серый, вы больше не можете видеть цвет.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Легкость

Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:

Инструмент для определения значений цветов онлайн

Так же если значений этих цветов вам будет недостаточно, то можно воспользоваться специальным инструментом для подбора цветов для сайта.

Кликните по области палитры чтобы определить значение цвета

  • RGB:
  • HSV:
  • HEX:

Здесь вы можете двигать мышкой указатель  и получать значения цветов в формате RGB и HEX (в шестнадцатеричном коде)


Данный инструмент по подбору цвета сайта довольно полезен, поэтому не забудьте добавить эту статью в закладки.

Надеюсь, что данная статья была для вас полезной. Подбирайте цвета и разукрашивайте ваши сайты на свой вкус. Только не перестарайтесь 🙂

Хорошего вам настроения! До встречи в следующих статьях!

С уважением Юлия Гусарь

Список цветов с названиями

В таблице перечислены названия цветов на английском языке (которые можно использовать в качестве значений), поддерживаемые всеми браузерами, и их шестнадцатеричные значения. Все перечисленные цвета являются «безопасными», то есть во всех браузерах будут отображаться одинаково.

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

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

    
Другой способ задать цвет — указать его код в формате RGB.
Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится
символ #. Каждая пара цифр может принимать
значения в интервале от 00 до
FF (или от 0 до 255 в десятичной записи).
Первая пара обозначает яркость красного (R — red), вторая
и третья — яркости зеленого (G — green) и синего
(B — blue) в этом цвете. Всего такая форма записи позволяет
задать более 16 миллионов разных цветов (режим True Color
истинный цвет), однако возможно, что не все они могут быть реализованы
на экране монитора. Примеры цветов в шестнадцатеричном формате:

  • #FFFFFF — белый
  • #000000 — черный
  • #FF0000 — красный
  • #00FF00 — зеленый
  • #0000FF — синий

    
В следующем разделе оба способа определения цвета используются
для оформления текста Web-страницы.

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

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Так же, как название цвета «Tomato», но 50% прозрачный:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Пример

<h1 style=»background-color:rgb(255,
99, 71);»>…</h1><h1 style=»background-color:#ff6347;»>…</h1><h1 style=»background-color:hsl(9,
100%, 64%);»>…</h1><h1 style=»background-color:rgba(255,
99, 71, 0.5);»>…</h1><h1 style=»background-color:hsla(9,
100%, 64%, 0.5);»>…</h1>

CSS свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weighthanging-punctuationheightjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

PHP

<font color=»red»>Красный текст</font>

1 <font color=»red»>Красныйтекст<font>

Значение цвета можно задавать несколькими способами:

  • При помощи кодового названия (Например: red, black, blue)
  • В шестнадцатиричном формате (Например: #000000, #ccc)
  • В формате rgba (Например: rgba(0,0,0,0.5))

Более подробно о способах задания цветов и перечень их значений описан в этой статье: Изменение цвета шрифта в CSS. Коды цветов HTML и CSS

Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда

Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>

Shades of Red

If you look at the color table below, you will see the result of varying
the red light from 0 to 255, while keeping the green and blue light at zero.

Click on the hexadecimal values, if you want to analyze the color in our color picker.

Red Light HEX RGB
  #000000  rgb(0,0,0)
  #080000  rgb(8,0,0)
  #100000  rgb(16,0,0)
  #180000  rgb(24,0,0)
  #200000  rgb(32,0,0)
  #280000  rgb(40,0,0)
  #300000  rgb(48,0,0)
  #380000  rgb(56,0,0)
  #400000  rgb(64,0,0)
  #480000  rgb(72,0,0)
  #500000  rgb(80,0,0)
  #580000  rgb(88,0,0)
  #600000  rgb(96,0,0)
  #680000  rgb(104,0,0)
  #700000  rgb(112,0,0)
  #780000  rgb(120,0,0)
  #800000  rgb(128,0,0)
  #880000  rgb(136,0,0)
  #900000  rgb(144,0,0)
  #980000  rgb(152,0,0)
  #A00000  rgb(160,0,0)
  #A80000  rgb(168,0,0)
  #B00000  rgb(176,0,0)
  #B80000  rgb(184,0,0)
  #C00000  rgb(192,0,0)
  #C80000  rgb(200,0,0)
  #D00000  rgb(208,0,0)
  #D80000  rgb(216,0,0)
  #E00000  rgb(224,0,0)
  #E80000  rgb(232,0,0)
  #F00000  rgb(240,0,0)
  #F80000  rgb(248,0,0)
  #FF0000  rgb(255,0,0)
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector