Генератор цветовых схем

Поддерживает создание различных цветовых схем, извлечение цветов из изображений, генерацию CSS-градиентов и эффектов тени, а также обработку по одному или пакетно.

Сообщить об ошибке

Режим выполнения в браузере: Ваши данные обрабатываются в браузере и не загружаются на сервер.

Скорость и стабильность: Скорость обработки зависит от вашего устройства и браузера. Для больших пакетов настольная версия может быть стабильнее.

Загрузка инструмента, подождите...

Если онлайн-инструмент не загружается или не запускается, попробуйте настольный инструмент. https://tools.yikeaigc.com/

Использование инструмента

Вернуться к старой версии

Монохромный режим

Пакетный выбор цвета

1Выберите базовый цвет

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Выберите цветовую схему

Кол-во цветов:

Насыщенность: 0%

Яркость: 0%

3Цветовая схема

4CSS-градиент

Тип градиента:

Угол: 90°

5Эффект тени

Радиус размытия: 20px

Радиус расширения: 0px

Прозрачность: 40%

Предпросмотр

6Извлечь цвета из изображения

Нажмите для загрузки или перетащите изображение сюда

Поддерживаются JPG, PNG, GIF, WebP

1Загрузить несколько изображений

Нажмите для загрузки или перетащите сюда изображения

Поддерживается пакетный выбор; основной цвет извлекается автоматически

Цветов на изображение:

Цветовая схема:

Скопировано в буфер

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Инструкции

Инструкция по использованию

Выберите базовый цвет: используйте палитру для выбора базового цвета или введите HEX-значение напрямую (например, #4f46e5). Также можно нажать кнопку "Случайный цвет" для вдохновения. Инструмент в реальном времени отображает значения RGB и HSL.
Выберите цветовую схему:
- Монохромная схема: один и тот же оттенок с вариациями за счет изменения насыщенности и светлоты
- Аналоговая схема: соседние цвета на цветовом круге, естественные и мягкие
- Комплементарная схема: два противоположных цвета на цветовом круге, сильный контраст
- Раздельно-комплементарная схема: базовый цвет и цвета по обе стороны от его комплементарного цвета
- Триадная схема: три цвета, равноудаленные на цветовом круге
- Квадратная схема: четыре равноудаленных цвета
- Тетрадная схема: две пары комплементарных цветов с четкой структурой
Настройте параметры:
- Количество цветов: выберите генерацию 3, 5, 7 или 9 цветов
- Настройка насыщенности: перетаскивайте ползунок, чтобы увеличить или уменьшить общую насыщенность
- Настройка светлоты: перетаскивайте ползунок, чтобы увеличить или уменьшить общую светлоту
Создайте CSS-градиент: выберите линейный или радиальный тип градиента, настройте угол, и вы получите готовый к использованию CSS-код градиента.
Создайте эффект тени: настройте радиус размытия, радиус расширения и прозрачность, чтобы сгенерировать CSS-код тени на основе текущего базового цвета.
Извлеките цвета из изображения: после загрузки изображения инструмент автоматически извлечет основные оттенки. Можно нажать на любую область изображения для точного выбора цвета и применить извлеченный цвет как базовый.
Режим пакетного извлечения цветов: перейдите на вкладку "Пакетное извлечение цветов", загрузите несколько изображений, задайте количество извлекаемых цветов для каждого изображения и режим расширения цветовой схемы, нажмите начать пакетное извлечение. После завершения можно скачать ZIP со всеми результатами.
Копирование и экспорт: нажмите на любую цветовую карточку, чтобы скопировать значение цвета; нажмите кнопку "Экспортировать цветовую схему", чтобы скачать JSON-файл с полной информацией о палитре.

Часто задаваемые вопросы

Ответ: монохромная схема подходит для лаконичного и элегантного дизайна; аналоговые цвета подходят для природных тем и градиентных фонов; комплементарные цвета подходят для выразительного дизайна с сильным контрастом; триадная схема подходит для ярких детских продуктов и художественных работ; квадратная и тетрадная схемы подходят для сложных интерфейсов и визуализации данных. Выбирайте подходящую схему в соответствии с целью дизайна.

Ответ: Загрузите изображение в области «Извлечь цвета из изображения», и инструмент автоматически проанализирует его и извлечет 8 основных оттенков. Вы можете нажать на извлеченный цвет, чтобы выбрать его, затем нажать кнопку «Использовать выбранный цвет как базовый», чтобы на основе этого цвета сгенерировать полную цветовую схему.

Ответ: Нажмите кнопку «Копировать» в области кода градиента, вставьте код в свой CSS-файл и примените его к элементу, которому нужен градиентный фон. Поддерживаются два типа: линейный и радиальный градиент; для линейного градиента можно настроить угол направления.

Ответ: ZIP-файл, загружаемый после завершения пакетной обработки, содержит три файла: palette-summary.json (JSON-сводка всех данных цветовых схем), palettes.css (готовые к использованию определения CSS-переменных), preview.html (страница визуального предпросмотра). Это удобно для использования извлеченных цветовых схем в разных сценариях.

Ответ: Насыщенность управляет интенсивностью цвета: повышение насыщенности делает цвета более яркими, а снижение — более мягкими и приглушенными; яркость управляет степенью светлоты цвета: повышение яркости делает цвет светлее, а снижение — темнее. Настраивая эти два параметра, можно слегка скорректировать общий эффект цветовой схемы.

Ответ: поддерживаются распространенные форматы изображений, такие как JPG, JPEG, PNG, GIF, WebP и др. Рекомендуется использовать изображения с насыщенными цветами и высокой контрастностью, чтобы получить более точные результаты извлечения основных цветов. Обработка изображений полностью выполняется локально и не загружается на сервер.

Ответ: просто нажмите на любую цветовую карточку или цветовой блок, и соответствующее HEX-значение цвета автоматически скопируется в буфер обмена. Внизу страницы появится уведомление «Скопировано в буфер обмена». В результатах пакетной обработки также можно нажать на цветовую полосу, чтобы скопировать соответствующее значение цвета.