Серый цвет Gray #808080

Где использовать серый цвет

Серый #808080 находится ровно посередине между чёрным и белым в восьмибитной шкале RGB. Он нейтрален по тону и подходит второстепенным элементам, но как цвет мелкого текста на белом фоне может не обеспечивать требуемую читаемость.

Характер и восприятие

Серый выглядит нейтральным, спокойным и функциональным. Холодная примесь делает его технологичным, тёплая - более мягким и редакционным.

Подходящие задачи

• Второстепенный текст и служебные подписи.
• Границы, разделители и неактивные состояния.
• Нейтральный фон для ярких цветных акцентов.

Практические рекомендации

• Проверяйте контраст серого текста с фоном.
• Не делайте все второстепенные элементы одинаково бледными.
• Используйте последовательную шкалу серых для фона, границ и текста.

Как задать серый цвет в HTML и CSS

В современной HTML-странице цвет оформляют через CSS. Для одного и того же оттенка можно использовать HEX-код, функции RGB и HSL или именованное значение gray.

У этого оттенка несколько равнозначных CSS-названий: gray и grey. Они дают одинаковый результат и ведут на одну страницу.

.example {
  color: #000000;
  background-color: #808080;
}

Если значение понадобится в нескольких компонентах, вынесите его в CSS-переменную:

:root {
  --color-seryy: #808080;
}

.button {
  background: var(--color-seryy);
}