Серый цвет css – Конвертер Цветов Онлайн — HEX ⇒ RGB ⇒ RGBA ⇒ CMYK ⇒ HSL ⇒ HSLA ⇒ HSB ⇒ HSV ⇒ XYZ ⇒ LAB. Калькулятор цветов HTML. Генератор цветов CSS3 — ColorScheme.Ru

Из-за чего тёмно-серый светлее чем серый в CSS / Habr

Вы, наверное, никогда не обращали внимания на такую мелочь, но в вашем браузере есть заранее определённые цвета, которые являются не тем, чем кажутся. Если бы я сказал вам, что названия образцов выше это LightGray, Gray и DarkGray, какому бы из цветов вы сопоставили каждое название?


Признаю, это был вопрос с подвохом, но почему всё-таки тёмно-серый это более светлый оттенок просто серого?

Всё сводится к небольшой исторической неурядице. Первые версии Mosaic и Netscape Navigator были X Applications, то есть они использовали систему X Window System в UNIX, которая определяет набор нормализованных имен цветов, унаследованный браузерами.

Позже, когда World Wide Web Consortium (W3C) перешел к стандартизации, он поглотил набор цветов X11, но не обошлось без конфликтов с тем, чего хотела спецификация.

В HTML цвет «Gray» был зарезервирован для триплета 128 (50% оттенок серого), в то время как X11 определял «Gray» как оттенок серого примерно в 75%, что означало, что, так как имя уже занято, «Gray» стал 50% серым, отбросив изначальное значение X11.

С другой стороны, цвет «DarkGray» никто не трогал, поскольку его на тот момент не существовало в HTML или CSS, а значит, он был перенесён без изменений из X11, где определен как 66% оттенок серого.

В конечном итоге, объединенный список цветов CSS, который сегодня преобладает в интернете, отображает «DarkGray» заметно светлее, чем «Gray», потому что «DarkGray» пришел из X11, а «Gray» пришел из HTML.

Даже сегодня в последней версии CSS цвет «DarkGray» это более светлый оттенок, чем «Gray», а ещё, как результат трудностей именования, как «Grey», так и «Gray» являются валидными именами.

коды цветов // Вебшкола онлайн



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

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


Такой же список, но отсортированный по названию

Название цвета 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  
LightGrey  #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  

Заметка: Названия цветов, представленные выше, не являются стандартом W3C.

Консорциум W3C перечисляет 16 валидных названий цветов для HTML и CSS:aqua (аквамарин), black (черный), blue (синий), fuchsia (фуксиновый), gray (серый), green (зеленый), lime (лайм или салатовый), maroon (каштановый), navy (ультрамарин), olive (оливковый), purple (пурпурный), red (красный), silver (серебристый), teal (сизый), white (белый) и yellow (желтый).

При использовании цветов, не входящих в этот список, правильнее будет использовать их шестнадцатеричный код (HEX) или код RGB.



Цвета HTML Color Теория


Цвета отображаются сочетание красного, зеленого и синего света.


Названия цветов

В CSS, цвета могут быть установлены с помощью названия цвета:

Пример

ColorName
 Red
 Yellow
 Cyan
 Blue
 Magenta

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

С помощью CSS цвета можно задать различными способами:

  • По именам цветов
  • Как значения RGB
  • В виде шестнадцатеричных значений
  • Как HSL значения (CSS3)
  • Как хвб значения (ксс4)

Цвета RGB

Значения цветов RGB поддерживаются во всех браузерах.

Значение цвета RGB задается с помощью: RGB (красный, зеленый, синий).

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета как целое число между 0 и 255.

Например, RGB (0, 0255) отображается синим цветом, поскольку параметру Blue присвоено наибольшее значение (255), а другим — 0.

Привер

ColorRGBColor
 rgb(255,0,0)Red
 rgb(0,255,0)Green
 rgb(0,0,255)Blue

Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:

Пример

ColorRGBColor
 rgb(0,0,0)Black
 rgb(128,128,128)Gray
 rgb(255,255,255)White


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

Шестнадцатеричные значения цветов также поддерживаются во всех браузерах.

Шестнадцатеричный цвет задается с помощью: #RRGGBB.

RR (red), GG (зеленый) и BB (синий) являются шестнадцатеричными целыми числами между 00 и FF, указав интенсивность цвета.

Например, #0000FF отображается синим цветом, так как синий компонент имеет наивысшее значение (FF), а остальные — 00.

Цвет

ColorHEXRGBColor
 #FF0000rgb(255,0,0)Red
 #00FF00rgb(0,255,0)Green
 #0000FFrgb(0,0,255)Blue

Таблица цветов CSS и HTML.

Имя цвета в HTML и CSSHEXRGB
Красные тона:
IndianRed#CD5C5C205, 92, 92
LightCoral#F08080240, 128, 128
Salmon#FA8072250, 128, 114
DarkSalmon#E9967A233, 150, 122
LightSalmon#FFA07A255, 160, 122
Crimson#DC143C220, 20, 60
Red#FF0000255, 0, 0
FireBrick#B22222178, 34, 34
DarkRed#8B0000139, 0, 0
Розовые тона:
Pink#FFC0CB255, 192, 203
LightPink#FFB6C1255, 182, 193
HotPink#FF69B4255, 105, 180
DeepPink#FF1493255, 20, 147
MediumVioletRed#C71585199, 21, 133
PaleVioletRed#DB7093219, 112, 147
Оранжевые тона:
LightSalmon#FFA07A255, 160, 122
Coral#FF7F50255, 127, 80
Tomato#FF6347255, 99, 71
OrangeRed#FF4500255, 69, 0
DarkOrange#FF8C00255, 140, 0
Orange#FFA500255, 165, 0
Жёлтые тона:
Gold#FFD700255, 215, 0
Yellow#FFFF00255, 255, 0
LightYellow#FFFFE0255, 255, 224
LemonChiffon#FFFACD255, 250, 205
LightGoldenrodYellow#FAFAD2250, 250, 210
PapayaWhip#FFEFD5255, 239, 213
Moccasin#FFE4B5255, 228, 181
PeachPuff#FFDAB9255, 218, 185
PaleGoldenrod#EEE8AA238, 232, 170
Khaki#F0E68C240, 230, 140
DarkKhaki#BDB76B189, 183, 107
Фиолетовые тона:
Lavender#E6E6FA230, 230, 250
Thistle#D8BFD8216, 191, 216
Plum#DDA0DD221, 160, 221
Violet#EE82EE238, 130, 238
Orchid#DA70D6218, 112, 214
Fuchsia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
MediumOrchid#BA55D3186, 85, 211
MediumPurple#9370DB147, 112, 219
BlueViolet#8A2BE2138, 43, 226
DarkViolet#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
DarkMagenta#8B008B139, 0, 139
Purple#800080128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
DarkSlateBlue#483D8B72, 61, 139
Коричневые тона:
Cornsilk#FFF8DC255, 248, 220
BlanchedAlmond#FFEBCD255, 235, 205
Bisque#FFE4C4255, 228, 196
NavajoWhite#FFDEAD255, 222, 173
Wheat#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Tan#D2B48C210, 180, 140
RosyBrown#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Goldenrod#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Chocolate#D2691E210, 105, 30
SaddleBrown#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Brown#A52A2A165, 42, 42
Maroon#800000128, 0, 0
Основные цвета:
Black#0000000, 0, 0
Gray#808080128, 128, 128
Silver#C0C0C0192, 192, 192
White#FFFFFF255, 255, 255
Fuchsia#FF00FF255, 0, 255
Purple#800080128, 0, 128
Red#FF0000255, 0, 0
Maroon#800000128, 0, 0
Yellow#FFFF00205, 92, 92
Olive#808000240, 128, 128
Lime#00FF00250, 128, 114
Green#008000233, 150, 122
Aqua#00FFFF205, 92, 92
Teal#008080240, 128, 128
Blue#0000FF250, 128, 114
Navy#000080233, 150, 122
Имя цвета в HTML и CSSHEXRGB
Зелёные тона:
GreenYellow#ADFF2F173, 255, 47
Chartreuse#7FFF00127, 255, 0
LawnGreen#7CFC00124, 252, 0
Lime#00FF000, 255, 0
LimeGreen#32CD3250, 205, 50
PaleGreen#98FB98152, 251, 152
LightGreen#90EE90144, 238, 144
MediumSpringGreen#00FA9A0, 250, 154
SpringGreen#00FF7F0, 255, 127
MediumSeaGreen#3CB37160, 179, 113
SeaGreen#2E8B5746, 139, 87
ForestGreen#228B2234, 139, 34
Green#0080000, 128, 0
DarkGreen#0064000, 100, 0
YellowGreen#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
Olive#808000128, 128, 0
DarkOliveGreen#556B2F85, 107, 47
MediumAquamarine#66CDAA102, 205, 170
DarkSeaGreen#8FBC8F143, 188, 143
LightSeaGreen#20B2AA32, 178, 170
DarkCyan#008B8B0, 139, 139
Teal#0080800, 128, 128
Синие тона:
Aqua#00FFFF0, 255, 255
Cyan#00FFFF0, 255, 255
LightCyan#E0FFFF224, 255, 255
PaleTurquoise#AFEEEE175, 238, 238
Aquamarine#7FFFD4127, 255, 212
Turquoise#40E0D064, 224, 208
MediumTurquoise#48D1CC72, 209, 204
DarkTurquoise#00CED10, 206, 209
CadetBlue#5F9EA095, 158, 160
SteelBlue#4682B470, 130, 180
LightSteelBlue#B0C4DE176, 196, 222
PowderBlue#B0E0E6176, 224, 230
LightBlue#ADD8E6173, 216, 230
SkyBlue#87CEEB135, 206, 235
LightSkyBlue#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
DodgerBlue#1E90FF30, 144, 255
CornflowerBlue#6495ED100, 149, 237
MediumSlateBlue#7B68EE123, 104, 238
RoyalBlue#4169E165, 105, 225
Blue#0000FF0, 0, 255
MediumBlue#0000CD0, 0, 205
DarkBlue#00008B0, 0, 139
Navy#0000800, 0, 128
MidnightBlue#19197025, 25, 112
Белые тона:
White#FFFFFF255, 255, 255
Snow#FFFAFA255, 250, 250
Honeydew#F0FFF0240, 255, 240
MintCream#F5FFFA245, 255, 250
Azure#F0FFFF240, 255, 255
AliceBlue#F0F8FF240, 248, 255
GhostWhite#F8F8FF248, 248, 255
WhiteSmoke#F5F5F5245, 245, 245
Seashell#FFF5EE255, 245, 238
Beige#F5F5DC245, 245, 220
OldLace#FDF5E6253, 245, 230
FloralWhite#FFFAF0255, 250, 240
Ivory#FFFFF0255, 255, 240
AntiqueWhite#FAEBD7250, 235, 215
Linen#FAF0E6250, 240, 230
LavenderBlush#FFF0F5255, 240, 245
MistyRose#FFE4E1255, 228, 225
Серые тона:
Gainsboro#DCDCDC220, 220, 220
LightGrey#D3D3D3211, 211, 211
LightGray#D3D3D3211, 211, 211
Silver#C0C0C0192, 192, 192
DarkGray#A9A9A9169, 169, 169
DarkGrey#A9A9A9169, 169, 169
Gray#808080128, 128, 128
Grey#808080128, 128, 128
DimGray#696969105, 105, 105
DimGrey#696969105, 105, 105
LightSlateGray#778899119, 136, 153
LightSlateGrey#778899119, 136, 153
SlateGray#708090112, 128, 144
SlateGrey#708090112, 128, 144
DarkSlateGray#2F4F4F47, 79, 79
DarkSlateGrey#2F4F4F47, 79, 79
Black#0000000, 0, 0

Таблица цветов HTML, CSS

Название цветов HTML, CSSКоды цветов HTML, CSSЦвета HTML, CSSНазвание цветов HTML, CSSКоды цветов HTML, CSSЦвета HTML, CSS
Кармин#960018Желто-зеленый#adff2f
Кардинал#c41e3aСалатовый#99ff99
Тициановый#d53e07Зеленой мяты#98ff98
Красный#ff0000Зеленого чая#d0f0c0
Алый#ff2400Темного зеленого чая#badbad
Карминово-красный#ff0033Зеленого мха#addfad
Киноварь#ff4d00Серо-зеленый#ace1af
Международный оранжевый#ff4f00Бледно-зеленый#77dd77
Ализариновый#e32636Зелено-морской#2e8b57
Малиновый#dc143cТемно-зеленый#013220
Каштановый#cd5c5cКрасного моря#1f4037
Темно-коралловый#cd5b45Темный весенне-зеленый#177245
Морковный#f36223Нефритовый#00a86b
Сиена жженая#e97451Изумрудный#50c878
Коралловый#ff7f50Темный пастельно-зеленый#03c03c
Лососевый#ff8c69Малахитовый#0bda51
Темно-лососевый#e9967aВесенне-зеленый#00ff7f
Оранжево-розовый#ff9966Аквамариновый#7fffd4
Сомон#efaf8cПанг#c7fcec
Розовый#ffc0cbЛягушки в обмороке#7b917b
Бледно-розовый#fadaddМаренго#4c5866
Розовато-лавандовый#fff0f5Серой спаржи#465945
Бледно-песочный#fdeaa8Аспидно-серый#2f4f4f
Циннвальдитовый#ebc2afТемно-бирюзовый#116062
Бледно-коричневый#987654Мурена#1c6b72
Темно-каштановый#986960Зеленой сосны#01796f
Красновато-коричневый#755a57Cине-зеленый#008080
Кофейный#442d25Яйца дрозда#00cccc
Бистр#3d2b1fБирюзовый#30d5c8
Темно-коричневый#654321Ярко-бирюзовый#08e8de
Коричный#7b3f00Циан#00ffff
Медвежьего ушка#834d18Электрик#7df9ff
Сепия#704214Бледно-синий#afeeee
Умбра#734a12Серебристый#c0c0c0
Кирпичный#884535Светло-серый#bbbbbb
Терракотовый#904d30Кварцевый#99958c
Коричневый#964b00Серого шифера#708090
Камелопардовый#a25f2aСерый#808080
Краснобуро-оранжевый#cd5700Мокрого асфальта#505050
Выгоревший оранжевый#cc5500Антрацитовый#464451
Шоколадный#d2691eЧерный#000000
Охра#cc7722Берлинской лазури#003153
Медный#b87333Сапфировый#082567
Светло-коричневый#cd853fПолуночно-синий#003366
Ванильный#d5713fТемно-синий#000080
Рыжий#d77d31Ультрамариновый#120a8f
Бронзовый#cd7f32Синей пыли#003399
Темно-золотой#b8860bТемно-лазурный#08457e
Золотисто-березовый#daa520Черного моря#1a4780
Гуммигут#e49b0fСиний#0000ff
Сиена#e28b00Кобальтовый#0047ab
Темно-мандариновый#ea7500Лазурно-синий#2a52be
Тыквенный#ff7518Джинсовый#1560bd
Последний вздох Жако#ff9218Королевский синий#4169e1
Мандариновый#ff8800Лазурно-серый#007ba7
Сигнальный оранжевый#ff9900Синий Клейна#3a75c4
Оранжевый#ffa500Синей стали#4682b4
Отборный желтый#ffba00Воды пляжа Бонди#0095b6
Янтарный#ffbf00Лазурный#007fff
Яндекса#ffcc00Морской волны#008cf0
Желтого школьного автобуса#ffd800Защитно-синий#1e90ff
Золотистый#ffd700Голубой#42aaff
Горчичный#ffdb58Васильковый#6495ed
Песочный#fcdd76Сизый#79a0c1
Кожи буйвола#f0dc82Ниагара#9db1cc
Старого льна#eedc82Небесный#7fc7ff
Оранжево-персиковый#ffcc99Бледно-васильковый#abcdef
Белый навахо#ffdeadБарвинковый#ccccff
Темно-персиковый#ffdab9Гридеперлевый#c7d0cc
Желто-персиковый#fadfadБороды Абдель-Керима#d5d5d5
Пшеничный#f5deb3Лавандовый#e6e6fa
Персиковый#ffe5b4Чертополоховый#d8bfd8
Желто-розовый#ffe4b2Сиреневый#c8a2c8
Побега папайи#ffefd5Глициниевый#c9a0dc
Морской пены#fff5eeАметистовый#9966cc
Белый#ffffffСеробуромалиновый#735184
Бежевый#f5f5dcФиолетовый#8b00ff
Льняной#faf0e6Персидский синий#6600ff
Бедра испуганной нимфы#faeeddТемно-фиолетовый#423189
Сливочный#f2e8c9Темный индиго#310062
Пергидрольной блондинки#eee6a3Индиго#4b0082
Желто-коричневый#d2b48cТемно-пурпурный#660099
Шамуа#a08040Сливовый#660066
Темный желто-коричневый#918151Фиолетово-баклажанный#991199
Хаки#806b2aОрхидеевый#da70d6
Темный хаки#4c3c18Гелиотроповый#df73ff
Оливковый#808000Фиалковый#ea8df7
Нежно-оливковый#6b8e23Бледно-пурпурный#f984e5
Латунный#b5a642Фуксии#f754e1
Темно-грушевый#d8a903Звезды в шоке#ff47ca
Старого золота#cfb53bПурпурный#ff00ff
Шафрановый#f4c430Ярко-розовый#fc0fc0
Грушевый#efd334Ярко-фиолетовый#cd00cd
Желтый#ffff00Баклажановый#990066
Лимонный#fde910Вишневый#911e42
Детской неожиданности#f7f21aРозовато-лиловый#993366
Кукурузный#fbec5dФиолетово-красный#c71585
Вердепешевый#dad871Светло-вишневый#de3163
Лимонно-кремовый#fffacdТемно-розовый#e75480
Слоновой кости#fffddfЛиловый#db7093
Кремовый#f2ddc6Бледно-каштановый#ddadaf
Серого зеленого чая#cadabaПюсовый#cc8899
Болотный#acb78eРозовый Маунтбэттена#997a8d
Cпаржи#7ba05bБледный розовато-лиловый#996666
Защитный#78866bУмбра жженая#8a3324
Темно-оливковый#556832Блошиного брюшка#4e1609
Зеленого папоротника#4f7942Бурый#45161c
Травяной#5da130Темно-алый#560319
Влюбленной жабы#3caa3cБургундский#900020
Вердепомовый#34c924Коричнево-малиновый#800000
Зеленый#00ff00Сангиновый#92000a
Ярко-зеленый#66ff00Бисмарк-фуриозо#a5260a
Ядовито-зеленый#7fff00Бордовый#9b2d30
Лаймовый#ccff00Бледно-карминный#af4035
Фисташковый#bef574Ржаво-коричневый#b7410e

Добавить комментарий

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