Таблица цветов Flat Design
Палитра из 125 flat-цветов с копированием HEX, RGB, HSL и экспортом палитры
Открывали 162 раза
Инструмент справился с вашей задачей?
Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.
Ваш ответ здесь будет первым.
Этот инструмент ещё ждёт первого комментария
Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня
Таблица плоских цветов — онлайн-справочник
Онлайн-таблица плоских цветов — это коллекция модных и сбалансированных цветов для flat-дизайна, используемого в современных сайтах, приложениях, интерфейсах. Каждый цвет представлен с HEX, RGB, HSL значениями для удобного копирования в проекты.
Инструмент полезен веб-дизайнерам, UI/UX-специалистам, графическим дизайнерам и всем, кто создаёт современный минималистичный дизайн. Вместо ручного подбора цветов вы получаете готовую палитру, уже проверенную на гармоничность.
Что такое flat-дизайн
Flat-дизайн — стиль оформления, при котором используются простые формы, яркие цвета, минимум теней и градиентов. Он стал популярным после выхода iOS 7 и обновления интерфейса Windows. Flat-дизайн делает интерфейсы чище, быстрее загружающимися и легко адаптируемыми к разным устройствам.
Основные принципы: минимализм, типографика, простые иконки, яркие но сбалансированные цвета. В отличие от skeuomorphism (имитация физических объектов), flat не пытается выглядеть реалистично, а фокусируется на функциональности и удобстве.
Как использовать палитру
Выбирайте 3-5 основных цветов для проекта: основной (primary), дополнительный (secondary), акцентный (accent), нейтральный (neutral), для фона и текста. Этого обычно достаточно для любого интерфейса. Слишком много цветов делает дизайн хаотичным.
Помните о контрасте — текст должен быть читаемым на фоне. Используйте инструменты проверки контрастности (WCAG), чтобы интерфейс был доступен людям с нарушениями зрения. Красивый дизайн — это не только эстетика, но и удобство для всех.
Пример: выбор палитры для лендинга
Дизайнер создаёт лендинг для IT-стартапа
Открывает таблицу плоских цветов
Выбирает: #3498DB (синий) как primary, #2ECC71 (зелёный) как secondary
Добавляет #2C3E50 (тёмный) для заголовков, #ECF0F1 для фона
Получает гармоничную палитру, экономит время на подборе
Знаете ли вы?
Flat-дизайн стал популярным после выхода iOS 7 в 2013 году
Microsoft использует flat-стиль с выхода Windows 8
Хорошая палитра обычно содержит 3-5 основных цветов
Контрастность текста и фона должна быть минимум 4.5:1 по WCAG
Flat-дизайн быстрее загружается благодаря отсутствию тяжёлых эффектов
Google Material Design — эволюция flat-дизайна с тенями и движением
Важно знать
При выборе цветов для проекта проверяйте их контрастность и доступность. Красивый дизайн, в котором нельзя прочитать текст — это не дизайн, а провал с точки зрения UX.
Как пользоваться таблицей flat-цветов: пошаговая инструкция
Выберите категорию или найдите цвет
Используйте кнопки категорий для фильтрации по цветовым группам (красные, синие, зелёные и др.) или введите название цвета или HEX-код в строку поиска. Переключайте режим отображения между плиткой и списком для удобства.
Скопируйте код цвета
Нажмите на иконку копирования на плитке цвета для быстрого копирования в выбранном формате (HEX, RGB, HSL или RGBA). Или кликните на сам цвет, чтобы открыть подробную информацию с контрастностью и превью.
Создайте свою палитру
Добавляйте понравившиеся цвета в персональную палитру (до 10 штук). Экспортируйте палитру в формате CSS-переменных, SCSS, Tailwind Config или JSON для использования в проекте. Используйте генератор случайных палитр для вдохновения.
Проверьте контрастность и сохраните избранное
В карточке цвета проверьте контрастность по стандарту WCAG для обеспечения доступности. Добавляйте часто используемые цвета в избранное — они сохраняются между сессиями для быстрого доступа.
Примеры использования таблицы flat-цветов
🎨 Разработка дизайн-системы
Дизайнеры используют таблицу для формирования цветовой системы проекта. Подберите основной цвет бренда, акцентные оттенки и нейтральные тона, проверьте контрастность каждого сочетания и экспортируйте готовую палитру в CSS-переменные или Tailwind-конфигурацию для немедленного использования в разработке.
💻 Вёрстка сайта или приложения
Frontend-разработчики копируют HEX или RGB-коды плоских цветов прямо в CSS, SCSS или JSX-файлы. Формат Tailwind-конфигурации позволяет мгновенно интегрировать палитру в проект на Tailwind CSS без ручного форматирования, экономя время на рутинных операциях.
📱 Дизайн мобильного приложения
При проектировании мобильных интерфейсов важно учитывать контрастность для читаемости на маленьких экранах. Инструмент показывает WCAG-рейтинг каждого цвета, помогая выбрать оттенки, которые обеспечат доступность приложения для всех пользователей, включая людей с нарушениями зрения.
📊 Визуализация данных и инфографика
Для создания графиков, диаграмм и инфографики необходимы хорошо различимые цвета. Выберите из разных категорий 5-7 контрастных оттенков, соберите палитру и экспортируйте в JSON для использования в Chart.js, D3.js, Recharts или любой другой библиотеке визуализации.
🖌️ Иллюстрации и графика
Иллюстраторы и графические дизайнеры используют flat-палитру как основу для создания плоских иллюстраций, иконок и декоративных элементов. Копируйте HEX-код и вставляйте в Illustrator, Figma, Procreate или любой другой графический редактор для быстрой работы с цветом.
Частые вопросы о таблице цветов flat design
Что такое flat-цвета и чем они отличаются от обычных?
В каких форматах доступны коды цветов?
Как экспортировать палитру для проекта?
Что означает проверка контрастности WCAG?
Сохраняются ли избранные цвета между сессиями?
Можно ли использовать цвета из таблицы бесплатно?
Работает ли таблица цветов на телефоне?
Полезная информация
Ограничьте палитру проекта 3-5 основными цветами для визуальной целостности интерфейса
Используйте тёмные оттенки (Midnight Blue, Wet Asphalt) для текста вместо чистого чёрного
Проверяйте контрастность текста на фоне — минимальный рейтинг AA (4.5:1) обязателен для основного контента
Комбинируйте яркие акцентные цвета (Emerald, Peter River, Alizarin) с нейтральными (Clouds, Silver)
Для CTA-кнопок выбирайте контрастные, тёплые цвета: оранжевые и красные привлекают больше внимания
Сохраняйте часто используемые цвета в избранное для быстрого доступа при работе над проектом
Экспортируйте палитру в CSS-переменные для единообразного использования цветов во всём проекте
Все данные обрабатываются локально в вашем браузере. Избранные цвета и палитры сохраняются в localStorage этого браузера и открываются мгновенно, без обращения к сети.
Если у вас есть предложения по добавлению новых цветов или улучшению функционала, напишите в комментариях внизу страницы или нам напрямую: почта и Telegram есть на странице «Контакты».
Инструменты для работы с цветом
Таблица flat-цветов — отправная точка. Соберите палитру, проверьте контраст, сконвертируйте форматы и добавьте градиенты с помощью этих инструментов.
Комментарии
Этот инструмент ещё ждёт первого комментария
Без почты и пароля · публикуем после проверки, обычно за 1–2 дня
Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.