Серый — нейтральный цвет, который очень распространен в веб-дизайне. При кодировании веб-сайтов в HTML есть несколько способов указать серый цвет с помощью шестнадцатеричных кодов цвета или значений RGB.
Шестнадцатеричная цветовая система использует шесть цифр для представления цветов, причем каждая пара цифр представляет интенсивность красного, зеленого и синего. Вот некоторые распространенные шестнадцатеричные коды для оттенков серого:
| Название цвета | Шестнадцатеричный код |
| Темно-серый | #A9A9A9 |
| Тускло-серый | #696969 |
| Серый | #808080 |
| Светло-серый | #D3D3D3 |
| Сланцево-серый | #708090 |
Шестнадцатеричный код определяется с помощью символа #, за которыми следуют шесть шестнадцатеричных цифр, представляющих значения RGB. Например, #A9A9A9 — шестнадцатеричный код темно-серого цвета.
Коды цвета RGB используют десятичные значения для представления интенсивности красного, зеленого и синего по шкале от 0 до 255. Вот коды RGB для некоторых распространенных оттенков серого:
| Название цвета | Код RGB |
| Темно-серый | 169, 169, 169 |
| Тускло-серый | 105, 105, 105 |
| Серый | 128, 128, 128 |
| Светло-серый | 211, 211, 211 |
| Сланцево-серый | 112, 128, 144 |
Коды RGB определяются указанием сначала значения R, а затем G и B. Для темно-серого цвета код RGB — 169, 169, 169.
В дополнение к шестнадцатеричным и RGB-кодам HTML и CSS также поддерживают названия цветов для указания оттенков серого, включая:
Например, вы можете использовать «grey» или «darkslategrey» в качестве значений свойств цвета CSS вместо шестнадцатеричных или RGB-кодов.
Между черным и белым доступно множество различных оттенков серого. Вот несколько распространенных оттенков от самого темного к самому светлому:
| Название оттенка | Шестнадцатеричный код |
| Угольно-серый | #36454F |
| Темно-сланцевый серый | #2F4F4F |
| Серый Дэвис | #555555 |
| Тускло-серый | #696969 |
| Серый | #808080 |
| Испанский серый | #989898 |
| Светло-серый | #D3D3D3 |
| Gainsboro | #DCDCDC |
Использование более светлых или более темных оттенков серого может помочь создать контраст и визуальную иерархию в дизайне веб-страниц.
Серый цвет очень универсален и может быть включен в дизайн веб-сайта различными способами:
Однако большие блоки серого могут казаться скучными или монотонными. Используйте серые цвета экономно и в сочетании с более яркими акцентными цветами.
В психологии цвета серый цвет имеет следующие символические ассоциации:
Более светлые оттенки серого предполагают стабильность и спокойствие, в то время как более темные оттенки могут символизировать горе, потерю или депрессию. Использование правильных тонов может вызывать определенные настроения и эмоции.
Серый обеспечивает достаточный контраст на белом фоне, чтобы соответствовать стандартам доступности WCAG. Однако очень светлые оттенки серого не обеспечивают достаточного контраста на белом фоне для разборчивого текста. При использовании серого цвета убедитесь, что контраст достаточен:
Правильное использование контраста серого цвета помогает сделать веб-сайты удобными для людей с нарушениями зрения или дальтонизмом.
Серый — универсальный нейтральный цвет, который имеет множество оттенков и вариаций. В HTML и CSS серый цвет может быть указан с помощью шестнадцатеричных кодов, таких как #808080, значений RGB, таких как rgb(128, 128, 128), или названий цветов, таких как «серый». Он широко используется в веб-дизайне для создания неброских фонов, элегантного текста и эффективного визуального контраста между элементами. При правильном использовании серый цвет может сделать веб-сайты чистыми, читабельными и доступными для всех пользователей.