Таблица цветов Flat Design
Палитра из 140+ flat-цветов с копированием HEX, RGB, HSL и экспортом палитры
Таблица плоских цветов — онлайн-справочник
Онлайн-таблица плоских цветов — это коллекция модных и сбалансированных цветов для 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 вашего устройства, обеспечивая полную конфиденциальность и мгновенную скорость работы без задержек сети.
Если у вас есть предложения по добавлению новых цветов или улучшению функционала, воспользуйтесь формой обратной связи. Мы ценим обратную связь и стремимся сделать инструмент максимально полезным для дизайнеров и разработчиков.
Комментарии (1)
🎨Похожие инструменты
Таблица безопасных цветов
Интерактивная палитра 216 web-safe цветов с конвертацией HEX, RGB, HSL, CMYK
Просмотр HEX цвета
Визуализация HEX-кода, конвертация в RGB/HSL/CMYK, палитры и проверка контраста WCAG
Просмотр RGB цвета
Подбор цвета, конвертация RGB, HEX, HSL, CMYK, проверка контраста WCAG
Генератор цветов HTML
Подбор цвета, конвертация HEX/RGB/HSL/CMYK, гармонии, градиенты и проверка контраста WCAG
Конвертер цветов
Перевод цветов между HEX, RGB, HSL, HSV и CMYK с гармониями и проверкой контрастности
Совместимость цветов
Подбор цветовых гармоний, проверка контрастности WCAG и симуляция дальтонизма
Проверка контраста цветов
Проверьте контраст фона и текста по стандарту WCAG 2.1
Генератор случайных цветов
Генерация цветов, палитр и проверка контрастности WCAG