Добро пожаловать обратно в мою серию о цвете CSS! В этом подробном руководстве мы рассмотрим цвет грязно-белый — что это такое, как его использовать в CSS, а также несколько примеров грязно-белого в дизайне.
Грязно-белый относится к диапазону светло-серых или бежево-белых цветов. Он находится между чисто-белым и светло-серым в цветовом спектре. Грязно-белый содержит тонкие теплые полутона, которые придают ему слегка желтоватый, кремовый вид.
Термин «грязный» предполагает, что эти цвета не являются чистыми, яркими белыми. Они имеют приглушенное, пыльное или тусклое качество. Можно представить, что грязно-белый — это цвет старой рубашки, которая выцвела и обесцветилась от множества стирок.
Некоторые распространенные синонимы грязно-белого включают:
Грязно-белый цвет находится между белым (#FFFFFF) и очень светлыми серыми оттенками, такими как #F5F5F5 на шестнадцатеричной шкале цветов. Обычно они имеют шестнадцатеричные значения в диапазоне от #F0F0F0 до #FAFAFA.
Существует несколько различных способов использования грязно-белых цветов в CSS для веб-дизайна:
Вот пример блока кода CSS для установки грязно-белого фона:
.dirty-white-bg { background-color: #F8F8F8; } Чтобы использовать вместо этого грязно-белый цвет текста:
p { color: rgb(250, 250, 248); } Существует множество тонких вариаций грязно-белого. Вот палитра некоторых популярных грязно-белых и их шестнадцатеричные коды:
| Название цвета | Шестнадцатеричный код |
|---|---|
| Искусственный | #F5F5F5 |
| Белый дымчатый | #F5F5F5 |
| Бежевый | #F5F5DC |
| Лен | #FAF0E6 |
| Античный белый | #FAEBD7 |
| Шампань | #F7E7CE |
| Бланшированный миндаль | #FFEBCD |
Это дает вам представление о диапазоне тонких кремовых и светло-бежевых оттенков, которые можно отнести к «грязно-белым». Они могут варьироваться от серых до персиковых тонов.
Вот несколько распространенных случаев использования, когда грязно-белый хорошо работает в дизайне:
В целом, грязно-белые цвета хорошо работают, когда вам нужен мягкий нейтральный цвет, который ярче серого, но не такой резкий, как чистый белый. Они создают естественные, элегантные фоны и акценты.
Давайте рассмотрим несколько примеров эффективного использования грязно-белого цвета на веб-сайтах:
The New York Times использует на своих страницах с контентом фон цвета яичной скорлупы с оттенком белого (#F4F5F6). Это придает тексту превосходный контраст, сохраняя при этом чистый, лаконичный вид:
Сайт портфолио дизайнеров Dribbble использует белый дым (#F5F5F5) в качестве основного фона интерфейса. Это очень светлый серый, который сохраняет яркое, воздушное ощущение, при этом смягчая резкость чистого белого:
Автомобильный веб-сайт Hyundai использует бледный цвет шпатлевки (#ECE9E1) в качестве основного фона. Это придает их странице изысканный, роскошный вид и ощущение:
Как вы можете видеть, грязно-белый цвет придает высококлассный, но ненавязчивый визуальный стиль веб-сайтам во всех секторах. Цвета разборчивы, профессиональны и позволяют контенту занять центральное место.
Помимо веб-дизайна, грязно-белый цвет появляется во многих дисциплинах дизайна:
Приглушенная, но изысканная природа грязно-белых цветов делает их широко применимыми в различных отраслях и областях применения.
Грязно-белый — не единственный нейтральный оттенок цвета слоновой кости. Вот некоторые другие варианты:
Правильный выбор зависит от конкретной потребности. Кремовый и яичная скорлупа имеют такую же мягкость, как грязно-белый. Натуральный белый отлично подходит для очень нежного фона. Серый создает альтернативный нейтральный цвет.
Итак, вкратце, грязно-белый относится к диапазону мягких не совсем белых цветов с тонкими теплыми полутонами. Он может обеспечить фон, акценты и контрасты с воздушным, винтажным или минималистичным ощущением. Грязно-белые широко используются в дизайне пользовательского интерфейса, брендинге, фотографии, дизайне интерьера и т. д.
В следующий раз, когда вам понадобится нейтральный цвет, более мягкий, чем ярко-белый, попробуйте грязно-белый! Настройка точного тона и насыщенности позволит вам добиться нужного приглушенного, ретро или современного вида для вашего проекта.
Надеюсь, вам понравился этот урок по цветам CSS! Дайте мне знать, если у вас возникнут какие-либо другие вопросы о работе с грязно-белыми оттенками в ваших проектах и коде.