Подборщик цветов
Выбирайте цвета, извлекайте из изображений, генерируйте палитры и проверяйте контрастность. Поддержка HEX, RGB, HSL, HSV и CMYK.
Извлечение цветов из изображения
Перетащите изображение или нажмите для загрузки
Доминирующие цвета
Добавьте цвета в палитру
Образец текста обычного размера (14px)
Образец крупного текста
Коэффициент контрастности
21:1
AA Обычный
Пройдено
AA Крупный
Пройдено
AAA Обычный
Пройдено
AAA Крупный
Пройдено
90°
Когда использовать этот подборщик цветов
Наш бесплатный подборщик цветов помогает дизайнерам и разработчикам работать с цветами:
-
Веб-дизайн
Выбирайте идеальные цвета для сайтов и проверяйте контрастность для соответствия требованиям доступности.
-
Фирменный стиль
Создавайте гармоничные цветовые палитры для логотипов, маркетинговых материалов и брендбуков.
-
Подбор цветов изображения
Извлекайте цвета из фотографий для согласования элементов дизайна с существующими изображениями.
-
CSS-разработка
Генерируйте CSS-градиенты и экспортируйте палитры как пользовательские свойства CSS.
-
Тестирование доступности
Проверяйте соответствие комбинаций цветов текста и фона стандартам WCAG AA и AAA.
Как использовать подборщик цветов
Начало работы
- Нажмите и перетащите в квадрате цвета для выбора насыщенности и яркости
- Используйте ползунок оттенка для изменения базового цвета
- При необходимости настройте прозрачность ползунком альфа
- Скопируйте любой формат цвета, нажав кнопку копирования рядом с ним
Функции
- Интерактивный подборщик цветов с предпросмотром в реальном времени
- Извлечение цветов из любого изображения с пипеткой
- Автоматическое создание гармоничных цветовых комбинаций
- Создание пользовательских палитр и экспорт в CSS или JSON
- Проверка контрастности цветов WCAG для доступности
- Создание CSS-градиентов с визуальным редактором
Горячие клавиши
- Ctrl+C: Копировать текущий HEX-цвет
- Ctrl+V: Вставить и применить цвет из буфера обмена
- 1-4: Переключение между вкладками функций
Советы
- Загрузите изображение для автоматического извлечения доминирующих цветов
- Используйте проверку контрастности для обеспечения читаемости текста
- Экспортируйте палитру в CSS-переменные для удобного использования в проектах