Пастельные цвета: палитры, HEX-коды и сочетания
Что такое пастельные цвета, готовые пастельные палитры с HEX (весенняя, детская, нюдовая), сочетания и как не потерять контраст текста.
Готовые палитры · · 2 мин чтения
Пастельные цвета — это светлые оттенки с невысокой или средней насыщенностью: в формате HSL у них светлота примерно 75–90% и насыщенность 30–70%. Они выглядят мягко и «воздушно», поэтому популярны в детских, beauty- и свадебных проектах. Главный риск пастели — низкий контраст текста, о нём ниже.
Палитра 1. Весенняя
| Цвет | HEX |
|---|---|
| Сакура | #F7C6D0 |
| Персик | #FFD8BE |
| Ваниль | #FFF1B5 |
| Мята | #C5EBD3 |
| Небо | #C3DDF5 |
| Лаванда | #D9CCF0 |
Палитра 2. Нюд и пудра
| Цвет | HEX |
|---|---|
| Пудровый | #E8C9C1 |
| Бежево-розовый | #E3B9A6 |
| Молочный | #F6EFE8 |
| Тауп светлый | #C8B6A6 |
| Шалфей пастельный | #C7D3BF |
Палитра 3. Детская
| Цвет | HEX |
|---|---|
| Голубой | #A9D6F5 |
| Лимонный крем | #FBEA9E |
| Коралловый светлый | #F8B4A6 |
| Фисташковый | #CFE8B3 |
| Сиреневый | #D6C2EC |
Как сочетать пастель
- Пастель + один тёмный цвет. Тёмно-синий
#1D3557или графитовый#2A2529для текста — и палитра сразу становится «взрослой» и читаемой. - Пастель + один насыщенный акцент. Например, нежно-розовый фон и яркий коралловый
#F08A5Dдля кнопок. - Не больше 3–4 пастельных цветов в одной композиции, иначе всё сливается.
Контраст: главная ловушка
Белый текст на пастели почти никогда не проходит норму 4,5:1. На пастельном фоне используйте тёмный текст. Подробности — в статье контраст текста по WCAG.
Как сделать пастельную версию любой палитры
Возьмите палитру из фото в генераторе, откройте HSL-значения и поднимите светлоту каждого цвета до 82–88%, а насыщенность ограничьте 60%. Тон останется прежним — палитра станет пастельной, но сохранит характер исходного снимка. Почему это работает — в статье RGB, HEX и HSL.
Частые вопросы
Какие цвета называют пастельными?
Светлые, мягкие оттенки любых тонов: нежно-розовый, мятный, лавандовый, персиковый, голубой, ванильный.
Подходит ли пастель для сайта?
Да, как фон и для иллюстраций. Для текста и кнопок нужен тёмный или насыщенный цвет.
Пастельные цвета тёплые или холодные?
Бывают и те и другие: персик и ваниль — тёплые, мята и лаванда — холодные.