Из-за чего тёмно-серый светлее чем серый в 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 | |
#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 | ||
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 | |
#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, цвета могут быть установлены с помощью названия цвета:
Пример
Color | Name |
---|---|
Red | |
Yellow | |
Cyan | |
Blue | |
Magenta |
Значения цвета CSS
С помощью CSS цвета можно задать различными способами:
- По именам цветов
- Как значения RGB
- В виде шестнадцатеричных значений
- Как HSL значения (CSS3)
- Как хвб значения (ксс4)
Цвета RGB
Значения цветов RGB поддерживаются во всех браузерах.
Значение цвета RGB задается с помощью: RGB (красный, зеленый, синий).
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета как целое число между 0 и 255.
Например, RGB (0, 0255) отображается синим цветом, поскольку параметру Blue присвоено наибольшее значение (255), а другим — 0.
Привер
Color | RGB | Color |
---|---|---|
rgb(255,0,0) | Red | |
rgb(0,255,0) | Green | |
rgb(0,0,255) | Blue |
Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:
Пример
Color | RGB | Color |
---|---|---|
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.
Цвет
Color | HEX | RGB | Color |
---|---|---|---|
#FF0000 | rgb(255,0,0) | Red | |
#00FF00 | rgb(0,255,0) | Green | |
#0000FF | rgb(0,0,255) | Blue |
|
|
Название цветов 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 | |||
Красновато-коричневый | #755a57 | Cине-зеленый | #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 |