Серый — одно из основных ключевых слов цвета, доступных в CSS. Оно позволяет разработчикам применять оттенок серого к тексту, фону, границам и другим элементам на веб-странице. Хотя серый может показаться простым цветом, есть несколько ключевых моментов, которые следует понимать об использовании серого в CSS.
Ключевое слово Grey в CSS представляет собой средне-светлый оттенок серого. В частности, оно соответствует шестнадцатеричному значению цвета #808080. Это оттенок посередине между черным (#000000) и белым (#FFFFFF).
Когда вы используете ключевое слово Grey в свойстве CSS, вы сообщаете браузеру, что нужно применить оттенок серого с этим определенным шестнадцатеричным значением к выбранному элементу. Например:
“`css
p {
color: grey;
}
“`
Это сделает все
элементы серыми.
Серое ключевое слово color считается общим цветом в CSS. Спецификация CSS определяет 16 основных ключевых слов цвета, представляющих общие цвета. Наряду с серым сюда входят такие ключевые слова, как красный, зеленый, синий, желтый и другие.
Браузеры автоматически распознают эти ключевые слова цвета и применяют соответствующие значения цвета. Поэтому вам не нужно указывать шестнадцатеричные или RGB-значения при использовании ключевых слов.
Хотя серый относится конкретно к шестнадцатеричному цвету #808080 в CSS, доступно также много других оттенков серого. CSS предоставляет два дополнительных основных ключевых слова цвета для более темных и более светлых оттенков серого:
– darkgrey – #A9A9A9
– lightgrey – #D3D3D3
Например:
“`css
p {
color: darkgrey;
}
blockquote {
background-color: lightgrey;
}
“`
Здесь используется более темный серый цвет текста для абзацев и более светлый серый фон для элементов blockquote.
Существуют также системные ключевые слова цвета, которые браузеры распознают и преобразуют в дополнительные оттенки серого:
– grey – #808080
– darkgray – #A9A9A9
– dimgray – #696969
– lightgray – #D3D3D3
– gainsboro – #DCDCDC
– silver – #C0C0C0
– darkslategray – #2F4F4F
– slategray – #708090
Системные ключевые слова цвета сопоставляются с немного разными шестнадцатеричными значениями в разных браузерах, но обеспечивают доступ к большему количеству вариаций серого.
В дополнение к ключевому слову grey вы также можете создавать другие оттенки серого, используя RGB или шестнадцатеричные значения цвета:
“`css
/* Шестнадцатеричные значения */
div {
background-color: #333; /* Темно-серый */
}
p {
color: #ccc; /* Светло-серый */
}
/* Значения RGB */
section {
background-color: rgb(128,128,128); /* Средний серый */
}
“`
Смешивание равных количеств красного, зеленого и синего позволяет создавать оттенки серого. Это обеспечивает большую гибкость и настройку по сравнению с использованием базового серого ключевого слова и системных цветов.
Вы можете использовать любое серое RGB или шестнадцатеричное значение, необходимое в вашем CSS-коде. Это позволяет получать очень мелкие оттенки серого.
Некоторые другие примеры серых значений RGB:
“`css
светло-серый – rgb(211,211,211)
темно-серый – rgb(169,169,169)
тускло-серый – rgb(105,105,105)
“`
И серые шестнадцатеричные значения:
“`css
gainsboro – #DCDCDC
lightslategrey – #778899
тускло-серый – #696969
“`
Таким образом, ключевое слово grey — это всего лишь один определенный оттенок серого в CSS — вы можете использовать значения RGB или hex для создания любого мыслимого серого цвета.
Базовые ключевые слова grey и darkgrey/lightgrey имеют отличную поддержку во всех основных современных браузерах:
| Браузер | Поддержка grey |
|---|---|
| Chrome | Да |
| Edge | Да |
| Firefox | Да |
| Safari | Да |
| Opera | Да |
Системные ключевые слова цветов, такие как gainsboro, silver и slategray, также хорошо поддерживаются браузерами, но могут не быть полностью кросс-браузерными. Их точные шестнадцатеричные значения могут немного отличаться в разных браузерах.
В частности, системные цвета, как правило, имеют меньшую поддержку в старых версиях браузеров. Поэтому для полной кросс-браузерной согласованности старайтесь придерживаться основных ключевых слов цветов, когда это возможно.
При использовании оттенков серого для цвета текста помните о разборчивости текста. Очень светлые оттенки серого могут быть трудны для чтения, особенно при меньшем размере текста. Очень темные оттенки серого могут не обеспечивать достаточного контраста на темном фоне.
В идеале для текста используйте более темный серый, например #333 или #666. Это обеспечивает достаточную контрастность как на светлом, так и на темном фоне.
Вы также можете использовать онлайн-проверку контрастности, чтобы проверить разборчивость серого цвета текста по сравнению с фоновым цветом. Руководство по доступности веб-контента рекомендует использовать коэффициент контрастности не менее 4,5:1 для обычного текста.
Также стоит отметить, что некоторые оттенки серого могут выглядеть на экранах очень похожими на оттенки синего. Поэтому не думайте, что серый цвет текста обязательно покажется серым всем пользователям.
Серые цвета очень распространены в веб-дизайне для создания тем и элегантных минималистичных сайтов:
– Светло-серый фон обеспечивает тонкий контраст с белым фоном
– Средне-серые границы и разделители выглядят чистыми и ненавязчивыми
– Темные и мягкие серые цвета являются идеальными цветами текста
А различные оттенки серого можно комбинировать для создания глубины и визуальной иерархии.
Вот несколько примеров эффективного использования оттенков серого в веб-дизайне:
– Заголовок сайта с мягким светло-серым фоном, белым текстом и средне-серыми границами
– Выделенные блоки с темно-серым фоном и белым текстом
– Серые разделители во всю ширину между разделами с использованием нежно-светло-серого
– Текст нижнего колонтитула с использованием тускло-серого цвета вместо яркого black
Серые цвета помогают смягчить резкие чистые черные и белые цвета. Они добавляют нюансы и изысканность дизайну.
Но будьте осторожны, чтобы не злоупотреблять серым, так как он может выглядеть скучно, если серый цвет доминирует во всей цветовой схеме. Сочетайте серый с дополнительными цветами, такими как синий, зеленый, оранжевый или красный.
Хотя ключевое слово grey color в CSS представляет один определенный средний оттенок серого (#808080), существует множество оттенков серого, доступных для использования в коде CSS. Системные ключевые слова цветов, значения RGB и шестнадцатеричные коды позволяют вам выбирать более светлые, более темные, более мягкие или более резкие тона серого.
Серые цвета — это универсальные цвета, которые можно использовать для всех видов элементов дизайна и эффектов на веб-сайтах и в приложениях. Просто помните о читабельности и доступности при использовании очень светлых или очень темных оттенков серого для текста.
Базовые ключевые слова grey, darkgrey и lightgrey отлично поддерживаются браузерами. Поэтому вы можете смело использовать их в CSS во всех современных браузерах. Для точного управления оттенками серого определите пользовательские значения RGB или hex.
Благодаря правильному балансу серых тонов вы можете создавать привлекательные дизайны, которые кажутся изысканными, тонкими и утонченными. Скромный серый цвет действительно имеет бесконечные возможности в CSS.