О сером цвете
Серый (gray) — средний приглушенный серый цвет с HEX-кодом #808080, или rgb(128, 128, 128). В HSL он имеет тон 0°, насыщенность 0% и светлоту 50%. CSS также принимает написание grey для того же самого цвета. Это один из 148 именованных цветов, которые понимает любой браузер, поэтому вместо HEX-значения можно написать color: gray;.
Использование серого для текста и фонов
| Сочетание | Коэффициент контраста | WCAG |
|---|---|---|
| Серый текст на белом | 3.95 : 1 | только AA для крупного текста |
| Серый текст на черном | 5.32 : 1 | AA |
На ссером фоне используйте черный текст (5.32 : 1). WCAG требует не менее 4.5 : 1 для основного текста и 3 : 1 для крупного. Другие пары можно проверить с помощью Проверки контраста.
CSS
.element {
color: gray; /* or #808080 */
background-color: #808080;
border: 1px solid rgb(128 128 128 / 50%);
}Похожие именованные цвета
Сланцево-серый (#708090), Светло-сланцево-серый (#778899), Тускло-серый (#696969), Кадетский синий (#5f9ea0), Темно-морской зеленый (#8fbc8f), Розово-коричневый (#bc8f8f).
Определитель названий цветов
Вставьте HEX-код, чтобы получить ближайшее понятное название цвета и удобные имена токенов для CSS, SCSS, JavaScript или конфигурации Tailwind.