Realtime Colors — как палитра и шрифты смотрятся на реальном сайте
Проверка цветовой палитры и шрифтов на готовом макете сайта с экспортом в CSS.
Открыть Realtime Colors
realtimecolors.com
Realtime Colors — бесплатный онлайн-инструмент, который показывает вашу палитру не набором квадратиков, а на макете настоящего сайта. Вы задаёте пять цветов — текст, фон, основной, дополнительный и акцентный, — и сразу видите, как они работают в заголовках, кнопках, карточках и иконках. Рядом с каждым цветом отображается его контраст.
Можно подобрать шрифты из Google Fonts, сгенерировать случайную палитру по выбранной схеме и переключиться на тёмную тему. Готовую цветовую схему экспортируют в CSS, Tailwind или SCSS, в форматах HEX, RGB, HSL и OKLCH. Есть плагин для Figma.
Когда использовать
- Чтобы проверить палитру на реальном интерфейсе до начала макета
- При выборе цветов и шрифтов для лендинга или портфолио
- Для проверки контраста текста и кнопок
- Когда нужно быстро получить переменные цветов для вёрстки
Плюсы
- Бесплатно и без регистрации
- Палитра сразу видна на макете сайта
- Проверка контраста и тёмная тема
- Экспорт в CSS, Tailwind, SCSS и плагин для Figma
Минусы
- Интерфейс только на английском
- Всего пять базовых цветов в схеме
- Макет-пример один, свой интерфейс загрузить нельзя
- Шрифты в основном из Google Fonts
