Что это такое
Это онлайн-справочник и конструктор цветовой палитры для плоского дизайна. Вместо того чтобы перебирать десятки вкладок с подборками оттенков, вы получаете единую таблицу цветов, где собраны проверенные временем flat-решения — от фирменных цветов соцсетей до нейтральных оттенков для фона. Сервис не просто показывает HEX-коды, а даёт полный набор инструментов: конвертацию в RGB, HSL и RGBA, проверку контрастности по стандартам WCAG и экспорт готовой палитры в код.
Как пользоваться
- Откройте таблицу цветов — все оттенки разбиты на категории: красные, синие, зелёные, нейтральные и так далее. Это ускоряет поиск нужного настроения.
- Наведите курсор на понравившийся цвет — появится карточка с его кодами. Кликните по нужному формату (HEX, RGB, HSL или RGBA), чтобы мгновенно скопировать значение в буфер обмена.
- Соберите рабочую палитру: добавляйте понравившиеся flat-цвета в избранное, нажимая на «сердечко» рядом с оттенком.
- Проверьте сочетания на доступность — инструмент сам рассчитает коэффициент контрастности и подскажет, соответствует ли пара стандартам WCAG.
- Когда палитра готова, нажмите кнопку экспорта. Выберите формат: CSS-переменные, SCSS-миксины или конфиг для Tailwind — код сгенерируется автоматически, останется только вставить его в проект.
- Если нужно вдохновение, запустите генератор палитр — он предложит гармоничные сочетания flat-цветов в один клик.
Кому и когда пригодится
Инструмент станет рабочим помощником для веб-дизайнеров, которые верстают макеты в стиле flat design и хотят быстро подобрать цветовую палитру без лишних движений. Фронтенд-разработчикам пригодится функция экспорта — не придётся вручную переписывать HEX-коды в CSS или Tailwind-конфиг. Верстальщикам, которые проверяют доступность интерфейсов, понравится встроенный тест контрастности — он помогает убедиться, что текст на цветном фоне читается без напряжения.
Также сервис удобен на этапе прототипирования: когда нужно быстро собрать презентабельный набор цветов для лендинга или мобильного приложения и показать заказчику. Маркетологи и бренд-дизайнеры могут использовать таблицу цветов для поиска оттенков, которые хорошо смотрятся в digital-рекламе и соцсетях.
Плюсы и ограничения
Плюсы:
- Все популярные форматы кодов (HEX, RGB, HSL, RGBA) в одном месте — копируются в один клик.
- Готовый экспорт в CSS, SCSS и Tailwind экономит время на ручном переносе.
- Встроенная проверка контрастности WCAG помогает создавать доступные интерфейсы.
- Возможность сохранять избранное и генерировать новые сочетания.
- Удобная навигация по категориям — не нужно листать бесконечную ленту.
Ограничения:
- Набор цветов фиксирован — если нужен редкий оттенок, его придётся добавлять вручную.
- Генератор палитр работает по базовым алгоритмам и не учитывает сложные цветовые теории.
- Инструмент заточен под плоский дизайн — для градиентов или материального дизайна придётся искать другие решения.
Частые вопросы
Можно ли использовать эти цвета в коммерческих проектах?
Да, все flat-цвета из каталога — это общедоступные коды, которые не защищены авторским правом. Вы можете свободно использовать их в любых проектах, включая коммерческие сайты и приложения.
Чем отличается HEX от RGBA?
HEX — это шестнадцатеричный код цвета, который всегда непрозрачен. RGBA — тот же цвет, но с дополнительным параметром альфа-канала, который задаёт прозрачность от 0 до 1. Например, RGBA(255, 0, 0, 0.5) — полупрозрачный красный.
Как проверить, что текст читается на цветном фоне?
Выберите цвет фона в таблице, затем добавьте его в палитру. После этого добавьте цвет текста и запустите проверку контрастности. Сервис покажет соотношение и даст вердикт: соответствует ли пара стандартам WCAG (AA или AAA).
Можно ли импортировать собственную палитру?
В базовой версии такой функции нет — инструмент работает с готовыми цветами из каталога. Но вы можете собрать из них свою уникальную палитру и сохранить её в избранном.
Зачем нужен экспорт в Tailwind?
Если вы используете Tailwind CSS, вам не нужно прописывать кастомные цвета вручную. Экспорт сразу генерирует готовый конфиг с вашими цветами, который можно вставить в файл tailwind.config.js — и все новые оттенки появятся в утилитах класса.