Серый — нейтральный цвет, который может создать спокойный, умиротворяющий и элегантный эффект в дизайне. В отличие от более ярких цветов, серый не требует внимания, что позволяет сочетать его практически с любым другим оттенком. При разумном использовании серый может добавить изысканности, баланса и визуального интереса к цветовым схемам.
В веб-дизайне и графическом дизайне серый особенно универсален. Регулируя его светлоту, вы можете использовать оттенки серого, чтобы тонко направлять взгляд зрителя, выделять ключевой контент и устанавливать визуальную иерархию. Более светлые оттенки серого отступают на задний план, в то время как более темные оттенки серого визуально выдвигаются вперед.
Для веб-разработчиков и дизайнеров, работающих с CSS или шестнадцатеричными кодами, существует множество различных значений оттенков серого для работы. В этой статье мы рассмотрим параметры цветовой палитры для оттенков серого — от самых светлых до самых темных. Мы рассмотрим:
В Интернете существует два основных способа представления цветов:
– Десятичные значения RGB (например, rgb(128,128,128))
– Шестнадцатеричные коды (например, #808080)
Значения RGB могут находиться в диапазоне от 0 до 255 для каждого красного, зеленого и синего компонента. Это допускает 2563 или 16 777 216 возможных цветовых комбинаций.
Шестнадцатеричные коды представляют значения RGB в сжатом формате с использованием строки из 6 символов со значениями от 00 до FF. Например, десятичное число 128 преобразуется в шестнадцатеричное число 80. Эта шестнадцатеричная система позволяет кодировать цвета в более коротком формате.
Серые цвета создаются с помощью равных значений для R, G и B. Таким образом, светло-серый в RGB будет иметь вид rgb(220, 220, 220), а шестнадцатеричный код — просто #DCDCDC.
При работе в Интернете шестнадцатеричные коды чаще всего используются для определения цветов с помощью CSS или SVG. Поэтому мы сосредоточимся на шестнадцатеричных кодах для нашей серой палитры.
Вот палитра распространенных оттенков серого, от самого светлого (белого) до самого темного (черного):
| Шестнадцатеричный код | Цвет |
| #FFFFFF | |
| #F2F2F2 | |
| #E6E6E6 | |
| #D9D9D9 | |
| #CCCCCC | |
| #BFBFBF | |
| #B3B3B3 | |
| #A6A6A6 | |
| #999999 | |
| #8C8C8C | |
| #808080 | |
| #737373 | |
| #666666 | |
| #595959 | |
| #4C4C4C | |
| #404040 | |
| #333333 | |
| #262626 | |
| #1A1A1A | |
| #0D0D0D | |
| #000000 |
Как вы можете видеть, есть широкий спектр серых оттенков на выбор. Более светлые серые оттенки, такие как #E6E6E6, можно использовать для фоновых цветов, а средние серые оттенки, такие как #808080, являются приятными нейтральными цветами для текста. Очень темные серые цвета рядом с черным обеспечивают хороший контраст и создают яркие акценты.
В дополнение к их шестнадцатеричным кодам, серым цветам иногда дают общие названия, описывающие их светлоту:
– Белый: #FFFFFF
– Снежный: #FFFAFA
– Цветочный белый: #FFFAF0
– Лавандовый румянец: #FFF0F5
– Мятный крем: #F5FFFA
– Синий: #F0FFFF
– Светло-серый: #D3D3D3
– Звуковой серебристый: #757575
– Серый: #808080
– Серый Дэви: #555555
– Тускло-серый: #696969
– Сланцево-серый: #708090
– Уголь: #36454F
– Черный: #000000
– Эбеновое дерево: #555D50
– Оливково-черный: #3B3C36
– Насыщенный черный: #004040
Хотя они и не такие точные, как шестнадцатеричные коды, эти описательные названия могут быть полезны для обсуждения различных серых тонов в общих чертах. Они также позволяют нетехническим командам, таким как дизайнеры, указывать нужные им оттенки серого без необходимости использования кода.
Итак, почему вы можете выбрать оттенки серого для своего веб- или графического дизайна? Вот некоторые из преимуществ, которые может предоставить серый цвет:
Гибкость
Серые цвета невероятно гибкие. Их можно использовать для больших фоновых областей, нейтральных базовых цветов для шаблонов, вспомогательного текста, элегантных границ и простых значков. Более темные оттенки подходят даже для жирных заголовков и акцентов.
Читаемость
Средние оттенки серого обеспечивают превосходный контраст на белом фоне для читаемого текста. Более светлые оттенки серого могут снизить нагрузку на глаза при просмотре контента на экранах.
Визуальная иерархия
Изменяя оттенки серого, вы можете установить четкую визуальную иерархию на страницах. Более темные оттенки серого отступают, поэтому они хорошо подходят для нижних колонтитулов и границ, в то время как более светлые оттенки серого выступают вперед для основных областей контента.
Минимализм
Серые цвета создают чистый, минималистичный вид, когда используются сами по себе в монохромных дизайнах. Это предотвращает столкновение цветов.
Профессионализм
По сравнению с яркими акцентами, серые цвета имеют зрелый, высококлассный вид. Они обычно используются на профессиональных бизнес-сайтах и брендах.
Утонченность
Серые цвета не привлекают чрезмерного внимания. Они хорошо подходят для фонов и вспомогательных элементов интерфейса, поэтому более яркие цвета в контенте, графике и фотографиях выходят на первый план.
Простота
С палитрой оттенков серого вам не нужно принимать сложные решения по цветовой схеме. Оттенки серого обеспечивают гибкость дизайна без осложнений.
Для более плавных переходов между различными серыми тонами вы можете использовать линейные градиенты. Линейные градиенты SVG позволяют плавно переходить от одного шестнадцатеричного цвета к другому.
Например, этот код SVG создает градиент слева направо, плавно переходящий от светло-серого (#D3D3D3) к темно-серому (#333333):
“`
“`
Теги `
Линейные градиенты SVG обеспечивают полную гибкость для плавного перехода между любыми двумя или более серыми цветами.
Чтобы увидеть, насколько эффективными могут быть оттенки серого, вот несколько примеров используемых палитр оттенков серого:
Минималистский блог
В этом минималистском блоге используется монохромная светло-серая палитра с белым для максимальной читабельности. Легкий градиент в заголовке обеспечивает некоторую глубину.
Профессиональное портфолио
Этот сайт-портфолио использует более темную палитру оттенков серого для гладкого, профессионального вида. Сплошные черные заголовки резко контрастируют со светло-серым.
Страница продукта электронной коммерции
Эта страница продукта включает в себя несколько оттенков серого для создания визуальной иерархии. Более светлые серые цвета отступают на задний план, в то время как темные акценты обрамляют фотографии продукта.
Оттенки серого предлагают невероятную универсальность в веб-дизайне и графическом дизайне. При продуманном использовании они могут обеспечить утонченность, элегантность и визуальный порядок.
Доступная нейтральная палитра оттенков серого, от самых светлых оттенков серого до почти черного, дает вам бесконечные возможности для установления иерархии, направления фокуса и управления контрастом.
Комбинируя оттенки серого с белым пространством, другими цветами, текстурами и креативными макетами, вы можете создавать красивые, привлекательные дизайны, которые позволяют контенту оказаться в центре внимания.
Поэтому не бойтесь выходить за рамки основных цветов и сделать серый значимым элементом вашей следующей цветовой схемы.