Сланцево-серый — это средне-темный серый цвет, который часто используется в веб-дизайне. Точный оттенок сланцево-серого может немного отличаться, но в целом это серый с оттенками синего или фиолетового оттенков. В HTML и CSS есть несколько различных способов указать цвет сланцево-серый. Наиболее распространенные варианты — использование шестнадцатеричного значения цвета, значения RGB или имени цвета CSS. Продолжайте читать, чтобы узнать больше о различных способах определения сланцево-серого цвета в HTML и посмотреть примеры того, как он выглядит на экране.
Один из способов указать цвета в HTML и CSS — через шестнадцатеричные значения цвета. Шестнадцатеричные коды — это 6 цифр в диапазоне от 00 до FF, которые определяют красный, зеленый и синий (RGB) компоненты цвета. Для сланцево-серого цвета распространены следующие шестнадцатеричные значения:
| Шестнадцатеричное значение | Предварительный просмотр цвета |
| #708090 | |
| #6D7B8D | |
| #778899 |
Как вы можете видеть, эти шестнадцатеричные значения создают оттенки серого с легкими оттенками синего или фиолетового. #708090 — светло-серый, а #6D7B8D — скорее темно-серый. #778899 — средне-серый. Шестнадцатеричные значения дают вам точный контроль над оттенком серого.
Чтобы использовать шестнадцатеричное значение в HTML, вы должны установить атрибут style для элемента:
“`html
Фон серого сланца“`
Или в CSS:
“`css
.slate-grey {
background-color: #708090;
}
“`
Другой способ определения цветов в HTML и CSS — через значения RGB. RGB означает красный, зеленый и синий — основные цвета, из которых состоят другие цвета на цифровом дисплее. Значения RGB представляют собой три числа в диапазоне от 0 до 255, разделенные запятыми, например: rgb(112,128,144).
Вот некоторые общие значения RGB для оттенков сланцево-серого:
| Значение RGB | Предварительный просмотр цвета |
| rgb(112,128,144) | |
| rgb(109,123,141) | |
| rgb(119,136,153) |
Эти значения RGB соответствуют шестнадцатеричным значениям из предыдущего раздела. Как и шестнадцатеричные коды, значения RGB позволяют вам точно задать нужный вам оттенок серого.
Чтобы использовать значение RGB в HTML или CSS, вам нужно сделать следующее:
“`html
Фон синевато-серый“`
“`css
.slate-grey {
background-color: rgb(112,128,144);
}
“`
Последний способ указать синевато-серый — использовать предопределенные имена цветов CSS. CSS поддерживает около 140 именованных цветов, таких как «slategrey» и «lightslategrey». Вот некоторые именованные оттенки серого:
| Название цвета | Предварительный просмотр цвета |
| slategrey | |
| darkslategrey | |
| lightslategrey |
Эти названия цветов соответствуют распространенным оттенкам сланцево-серого, используемым в дизайне. Преимущество использования названий цветов в том, что они более семантические, чем шестнадцатеричные или RGB-значения. Однако вы ограничены предопределенными названиями цветов, поддерживаемыми CSS.
Чтобы использовать название цвета в HTML или CSS:
“`html
Фон синевато-серый“`
“`css
.slate-grey {
background-color: slategrey;
}
“`
Итак, вкратце, три основных способа определения синевато-серого в HTML/CSS:
– Шестнадцатеричные значения цвета (например, #708090)
– Значения RGB (например, rgb(112,128,144))
– Названия цветов CSS (например, slategrey)
Каждый вариант позволяет вам представлять одни и те же оттенки серого. Используйте метод, который лучше всего подходит для ваших конкретных нужд.
При выборе оттенка сланцево-серого для вашего веб-дизайна помните, что цвета могут выглядеть по-разному в зависимости от экрана, на котором они отображаются. Вот несколько советов по работе с сланцево-серым в веб-интерфейсах и интерфейсах приложений:
– Просматривайте свой дизайн на нескольких экранах – ноутбуке, мониторе настольного компьютера, мобильном устройстве и т. д. Цвета могут казаться светлее или темнее на разных дисплеях.
– Протестируйте свой сайт на экранах с низкой контрастностью. На дисплеях низкого качества сланцево-серые цвета могут терять четкость.
– Убедитесь, что между сланцево-серым текстом/элементами и фоном есть достаточный контраст. Более темные оттенки могут не иметь достаточного контраста на белом фоне.
– Обесцветьте и осветлите сланцево-серый цвет для фона. Это облегчит восприятие глаз в течение длительного времени. Используйте более темные/насыщенные оттенки для акцентов.
– При использовании более темного сланцево-серого цвета текста убедитесь, что он соответствует стандартам доступности WCAG 4,5:1 контрастности по отношению к белому. Более светлые оттенки не будут иметь этой проблемы.
– Дайте пользователям возможность настраивать или переопределять цвета. Это позволит им настраивать цвета в соответствии со своими личными предпочтениями.
С некоторым тестированием и настройкой сланцево-серый может выглядеть на экранах современно, но изысканно. Просто помните об этих факторах во время разработки.
При использовании сланцево-серого цвета в разных элементах и на разных экранах вам нужно, чтобы цвета точно совпадали. Вот несколько советов по достижению согласованных оттенков сланцево-серого цвета:
– Используйте цветовую палитру — создайте образец шестнадцатеричных/RGB-значений сланцево-серого цвета для выборки. Это гарантирует точность воспроизведения цветов.
– Используйте переменные CSS – определите оттенки серого сланца как пользовательские свойства CSS, например –slate-grey-dark, и используйте их повторно.
– Работайте в рабочем процессе с управлением цветом – используйте профилированный монитор и калиброванное программное обеспечение, чтобы точно подобрать цвета.
– Начните с общего базового серого цвета – например, #808080, и последовательно тонируйте/затеняйте его до желаемого эффекта сланца.
– Тестируйте на физических материалах – сопоставляйте оттенки серого сланца с реальными образцами, такими как образцы краски.
– Оценивайте в разных условиях освещения – цвета могут меняться в разных условиях освещения.
Благодаря строгому подходу вы можете добиться идеальных оттенков серого сланца с точностью до пикселя, которые будут сохраняться в разных проектах и средах. Уделите время правильному указанию, калибровке и проверке цветов.
При использовании сланцево-серых оттенков на веб-сайтах и в приложениях обязательно учитывайте стандарты доступности для пользователей с нарушениями зрения или дальтонизмом. Вот несколько советов:
– Убедитесь, что коэффициенты контрастности между цветами текста и фона соответствуют минимальным стандартам WCAG 2.1. Более светлые оттенки сланцево-серого будут иметь достаточный контраст на белом фоне. Более темные оттенки могут потребовать тестирования.
– Не передавайте значение исключительно через цвет. Также используйте значки, текстовые метки, узоры и т. д. для различения элементов. Это помогает пользователям с дальтонизмом.
– Разрешите пользователям переключаться в режимы высокой контрастности, которые инвертируют или изменяют цвета. Проверьте, что сланцево-серые оттенки четко передаются.
– Используйте теплые серые оттенки экономно для больших текстовых блоков. Более холодные сланцево-серые тона приятны для глаз при длительном чтении.
– Включите цветовые фильтры ОС/браузера, такие как режим высокой контрастности Windows. Оцените, что сланцево-серые тона видны и пригодны для использования.
– Предоставьте возможности для отключения анимированных переходов, наложений или фонов, влияющих на элементы сланцево-серого цвета. Это может создавать проблемы с доступностью.
При продуманном подходе сланцево-серые тона можно использовать элегантно, а также соответствовать требованиям доступности. Оцените контрастность, разрешите корректировку цвета и включите режимы высокой контрастности.
Сланцево-серый — универсальный цвет для веб-интерфейсов при продуманной реализации. Используйте шестнадцатеричные, RGB или CSS значения названий цветов, чтобы точно определить оттенки сланцево-серого цвета. Обеспечьте достаточный контраст по отношению к соседним цветам и протестируйте на нескольких экранах. Разрешите настройку пользователем и режимы высокой контрастности для доступности. При стратегическом подходе сланцево-серые тона могут выглядеть чистыми, профессиональными и приятными для глаз. Выбирайте с умом из множества оттенков сланцево-серого цвета, чтобы улучшить свой следующий веб-дизайн.