Как пользоваться: Палитра цветов и контраст
- 1
Начните с цвета
Введите или выберите «Базовый цвет», затем выберите «Гармония»: аналогичную, триаду или раздельно-комплементарную. Можно также сгенерировать «Случайная палитра».
- 2
Зафиксируйте и доработайте
Зафиксируйте понравившиеся образцы, прежде чем перемешивать палитру снова, измените любой образец вручную или возьмите из фото пять主要 цветов.
- 3
Проверьте читаемость
Откройте «Контраст», проверьте текст на фоне по WCAG 2.2 (уровни AA и AAA), примените предложенное исправление и посмотрите палитру в режиме «Дальтонизм».
- 4
Экспортируйте
Скопируйте CSS-переменные, тему Tailwind v4 или конфигурацию v3, SCSS либо JSON с оттенками 50–950 или скачайте «PNG с образцами».
Лимиты и Pro
Всё бесплатно: палитры из 5 цветов, 6 гармоний, неограниченное число перемешиваний и экспортов, изображения до 50 MB для извлечения цветов, «PNG с образцами» шириной 1600 px.
О инструменте «Палитра цветов и контраст»
Генератор цветовых палитр строит схему из пяти цветов и всё, что нужно вокруг неё дизайн-системе. Гармонии поворачивают базовый тон на цветовом круге HSL: аналогичная берёт шаг 30° в обе стороны, комплементарная добавляет противоположный тон, раздельно-комплементарная берёт два тона рядом с противоположным, триада размещает три тона с шагом 120°, тетрада использует квадрат 90°, а монохромная сохраняет один тон в пяти уровнях светлоты. Случайный режим не трогает зафиксированные образцы, а вариант «По изображению» группирует пиксели фото в OKLab и находит пять самых частых заметно разных цветов.
Для каждого цвета вкладка «Оттенки» строит шкалу из 11 ступеней 50–950 в OKLCH, где ближайшая к вашему цвету ступень равна точному значению, либо 13 тонов системы Material 3 HCT вместе с пятью ключевыми палитрами, которые получила бы тема Material. Проверка контраста использует формулу яркости из WCAG 2.2, никогда не округляет коэффициент в большую сторону и предлагает ближайший подходящий цвет, меняя только светлоту и сохраняя тон. Сетка показывает коэффициент каждой пары цветов палитры относительно белого и чёрного.
Симуляции охватывают протанопию, дейтеранопию, тританопию и ахроматопсию на матрицах Machado и отмечают образцы, которые сливаются друг с другом. В экспорте цвета названы по тону, и вы можете задать свои имена. Инструмент не оценивает, подходят ли цвета бренду, а симуляции лишь приблизительно передают, как видят люди с нарушением цветового зрения; они не заменяют проверку с их участием.
Конфиденциальность
Все расчёты цвета, проверки контраста и анализ изображения выполняются в этой вкладке: фото, из которого вы берёте цвета, читается с диска в небольшой холст и не загружается на сервер. Палитру можно сохранить в адресе страницы, чтобы скопированная ссылка открыла её снова; на сервере ничего не хранится.
Возможности
Шесть гармоний и цвета с фото
От аналогичной до тетрады по одному базовому цвету, случайные палитры с фиксацией или основные цвета фото.
Контраст WCAG 2.2 с исправлениями
Уровни AA и AAA для обычного и крупного текста и элементов интерфейса, ближайший подходящий цвет — в один клик.
Экспорт для разработчиков
CSS-переменные, Tailwind v4 и v3, SCSS и JSON в HEX, RGB, HSL или OKLCH, а также PNG с образцами.