ПаветтаПалитра flat-цветов
Плоский дизайн держится на наборе насыщенных, слегка приглушённых цветов — без градиентов, теней и объёма. Здесь собраны палитры, которые чаще всего берут за основу: классическая Flat UI на двадцать цветов и три ступени Material — светлая 200, базовая 500 и тёмная 700.
Палитра
Выгрузка
Готовые наборы и ступени тона
Плоский дизайн держится на наборе насыщенных, слегка приглушённых цветов — без градиентов, теней и объёма. Здесь собраны палитры, которые чаще всего берут за основу: классическая Flat UI на двадцать цветов и три ступени Material — светлая двухсотая, базовая пятисотая и тёмная семисотая. Каждый оттенок отдаётся в трёх записях сразу, и его можно скопировать одним нажатием.
Ступени в Material устроены как шкала светлоты одного тона: двухсотая годится под подложку, пятисотая — под акцент и кнопку, семисотая — под наведение и нажатое состояние. Такая тройка закрывает почти все состояния интерфейсного элемента, и подбирать их вручную не приходится.
Практическая ценность готовой палитры в предсказуемости. Цвета в ней уже согласованы по насыщенности, поэтому рядом они не спорят между собой. Собранная на глаз пара из ярко-красного и блёклого синего почти всегда выглядит случайной, а два соседних цвета из одного набора — нет.
| Ступень Material | Где применяют | Пример роли |
|---|---|---|
| 200 | Подложки и заливки | Фон карточки, полоса выделения |
| 500 | Основной акцент | Кнопка, ссылка, значок |
| 700 | Тёмное состояние | Наведение, нажатие |
| 900 | Текст на светлом | Заголовок, подпись |
От швейцарского плаката до Material Design
Плоский стиль пришёл из плакатной графики середины века: швейцарская школа отказалась от иллюстративности в пользу чистого цвета, простых форм и типографики. Ровно этим языком пользовались железнодорожные и авиационные плакаты пятидесятых, и он оказался понятен без объяснений.
В интерфейсы стиль вернулся в 2010 году с оболочкой Metro в Windows Phone: Microsoft взяла за образец аэропортовую навигацию — крупный шрифт, плашки сплошного цвета, никакого объёма. В 2013 году iOS 7 отказалась от кожаных текстур и стеклянных кнопок, и плоский дизайн стал отраслевым стандартом.
Палитра Flat UI появилась в 2013 году как часть набора компонентов от студии Designmodo: двадцать цветов с человеческими именами вроде «изумруд» и «мокрый асфальт» разошлись по вебу за считанные месяцы. Через год Google выпустила Material Design с систематической шкалой из четырнадцати ступеней на каждый тон — подход строже, и он вытеснил разовые наборы. Сегодня готовые наборы вроде Tailwind и Radix продолжают ту же линию: шкала ступеней на каждый тон и заранее посчитанный контраст.
Сколько цветов брать и как не потерять контраст
Возьмите один цвет как основной и один как акцент, остальное стройте на нейтральных серых. Ошибка новичка — набрать восемь ярких оттенков из палитры и раскрасить ими всё: получается пёстро и без иерархии. Хороший интерфейс обычно живёт на одном цветном тоне и нескольких ступенях серого.
Проверяйте контраст текста на цветной подложке. Пятисотая ступень многих тонов не даёт достаточного контраста для мелкого текста: на ней читается белый крупный заголовок, но подпись уже теряется. Для мелкого текста берите семисотую или девятисотую.
Сочетания из палитры не отменяют цветовой круг: если нужен цвет-компаньон, посчитайте его. Подобрать гармоничную пару поможет инструмент сочетаний, а перевести оттенок между записями — конвертер цветов.
Держите палитру в переменных CSS с осмысленными именами: «акцент» и «акцент-наведение» вместо «синий-500». Тогда смена фирменного цвета сведётся к правке двух строк, и по всему проекту не придётся искать шестнадцатеричные коды.
| Цветов в Flat UI | 20 |
| Год выхода Flat UI | 2013 |
| Material Design | 2014 |
| Ступеней на тон в Material | 14 |
| Подложка | ступень 200 |
| Акцент | ступень 500 |
| Наведение | ступень 700 |
| Metro в Windows Phone | 2010 |
Как пользоваться
У каждого цвета показаны название, коды HEX и RGB и контраст с белым и чёрным текстом, поэтому сразу видно, что можно брать под кнопку с надписью, а что только под подложку. Цвета фильтруются по группе и ищутся по названию, коды копируются кликом, а выбранная палитра выгружается переменными CSS или SCSS.
- Flat UI или одна из трёх ступеней Material.
- Фильтром по группе или поиском по названию и коду.
- У каждой плитки подписано, какой текст на ней читается.
- Клик копирует один цвет, кнопка выгрузки — всю отобранную палитру.
Частые вопросы
Чем flat-цвета отличаются от обычных ярких
Насыщенность у них высокая, хотя и не предельная; светлота держится в средней зоне. За счёт этого цвета остаются заметными и при этом не выжигают глаз на большой площади. Чистый #ff0000 в плоском дизайне почти не встречается — вместо него берут приглушённый вроде #e74c3c.
Откуда взялась палитра Flat UI
Из набора Flat UI, выпущенного студией Designmodo в 2013 году вместе с одноимённым набором интерфейсных элементов. Названия цветов там нарочно образные — «мокрый асфальт», «гранат», «подсолнух», — и они прижились: по ним до сих пор ищут коды.
Чем ступени Material отличаются друг от друга
Номером обозначена светлота: 200 — светлый вариант для подложек и выделений, 500 — базовый для кнопок и акцентов, 700 — тёмный для нажатого состояния и текста. Один цвет в трёх ступенях выглядит согласованно, поэтому их удобно назначать на состояния одного элемента.
Можно ли смешивать цвета из разных палитр
Технически ничто не мешает, но выглядит это обычно хуже, чем кажется: у Flat UI и Material разная логика насыщенности, и рядом их цвета смотрятся как из разных наборов. Практичнее выбрать одну палитру, а недостающие оттенки построить от её цветов генератором оттенков и тонов.
Почему на некоторых цветах не читается ни белый, ни чёрный текст
Потому что цвет по светлоте попал ровно в середину: контраст и с белым, и с чёрным оказывается ниже порога 4,5:1. Такие цвета годятся под подложки и полоски, но не под текст. Если надпись нужна, берите соседнюю ступень — светлее или темнее.
Плоский дизайн ещё актуален
В чистом виде он ушёл: интерфейсы вернули тени, глубину и полупрозрачные слои, потому что без них теряются подсказки о том, что нажимается. Сами палитры остались востребованными: набор насыщенных цветов с готовыми названиями и предсказуемой светлотой удобен независимо от того, рисуете вы плоско или со слоями.
Спросите нейросети об инструменте
Похожие инструменты
Гармоничные палитры по цветовому кругу: комплементарные, триада, аналоговые. С симуляцией дальтонизма и контрастом пар.
ОткрытьКонвертер цветов и контрастHEX, RGB и HSL в одном окне, шкала оттенков одного тона и проверка контраста по WCAG с ответом, годится ли цвет для текста.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьПалитра из картинкиГлавные цвета фото или логотипа: от 3 до 10 оттенков с HEX и RGB, копирование, экспорт в CSS-переменные и проверка контраста с текстом.
ОткрытьГенератор случайных цветовСлучайный цвет или палитра из пяти с фиксацией удачных. Диапазоны тона, насыщенности и светлоты, пресеты пастели и тёмных.
ОткрытьГенератор оттенков и тоновШкала от 50 до 950 по одному цвету: осветление, затемнение и приглушение. Контраст каждой ступени и выгрузка в CSS, SCSS и Tailwind.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.