Палитра flat-цветов
Плоский дизайн держится на наборе насыщенных, слегка приглушённых цветов — без градиентов, теней и объёма. Здесь собраны палитры, которые чаще всего берут за основу: классическая Flat UI на двадцать цветов и три ступени Material — светлая 200, базовая 500 и тёмная 700. У каждого цвета показаны название, коды 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. Такие цвета годятся под подложки и полоски, но не под текст. Если надпись нужна, берите соседнюю ступень — светлее или темнее.
Плоский дизайн ещё актуален
В чистом виде он ушёл: интерфейсы вернули тени, глубину и полупрозрачные слои, потому что без них теряются подсказки о том, что нажимается. Сами палитры остались востребованными: набор насыщенных цветов с готовыми названиями и предсказуемой светлотой удобен независимо от того, рисуете вы плоско или со слоями.
Данные куда-то отправляются
Нет, всё считается в браузере.
Похожие инструменты
Число или список до тысячи значений в диапазоне: режим без повторов, сортировка. Отдельно вытягивает жребий из списка имён.
ОткрытьПроверка надёжности пароляСтойкость в битах, время перебора и разбор слабых мест: словарные слова под заменой символов, клавиатурные ряды, годы и повторы.
ОткрытьГенератор паролейПароль длиной до 64 символов с выбором наборов и отсевом похожих знаков. Показывает стойкость в битах и время перебора, делает до 50 паролей пачкой.
ОткрытьКолесо фортуныСлучайный выбор из своего списка: вес секторов пометкой «×3», режим на выбывание и ссылка, по которой открывается то же колесо.
ОткрытьГенератор тестовых данныхПачка вымышленных записей для тестов: ФИО, телефон, ИНН, СНИЛС, ОГРН, счёт и карта — с настоящими контрольными разрядами. Выгрузка в CSV, JSON и SQL.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.