Generador de esquemas de color

Permite generar múltiples esquemas de color, extraer colores de imágenes y crear degradados CSS y efectos de sombra, con procesamiento individual o por lotes.

Informe de error

Modo de ejecución en navegador: Tus datos se procesan en tu navegador y no se suben al servidor.

Velocidad y estabilidad: La velocidad de procesamiento depende de tu dispositivo y navegador. Para lotes grandes, la versión de escritorio puede ser más estable.

Cargando herramienta, espera...

Si la herramienta en línea no carga o no se ejecuta, prueba la herramienta de escritorio. https://tools.yikeaigc.com/

Uso de herramientas

Volver a la versión anterior

Modo monocromático

Selección por lotes

1Elegir color base

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

2Elegir esquema de color

Cantidad de colores:

Ajuste de saturación: 0%

Ajuste de luminosidad: 0%

3Paleta de colores

4Degradado CSS

Tipo de degradado:

Ángulo: 90°

5Efecto de sombra

Radio de desenfoque: 20px

Radio de extensión: 0px

Opacidad: 40%

Vista previa

6Extraer colores de imagen

Haz clic o arrastra una imagen aquí

Admite JPG, PNG, GIF y WebP

1Subir varias imágenes

Haz clic para subir o arrastra imágenes aquí

Admite selección por lotes; se extraerá el color principal de cada imagen

Colores por imagen:

Paleta:

Copiado al portapapeles

'; 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(); });

Instrucciones

Instrucciones de uso del software

Seleccionar color base: Usa el selector de color para elegir el color base, o introduce directamente un valor HEX (por ejemplo, #4f46e5). También puedes hacer clic en el botón "Color aleatorio" para inspirarte. La herramienta mostrará en tiempo real la información de los valores RGB y HSL.
Seleccionar esquema de color:
- Paleta monocromática: el mismo matiz, con variaciones al cambiar la saturación y la luminosidad
- Paleta de colores análogos: colores adyacentes en el círculo cromático, naturales y suaves
- Paleta de colores complementarios: dos colores opuestos en el círculo cromático, con fuerte contraste
- Complementarios divididos: el color base y los colores a ambos lados de su complementario
- Paleta triádica: tres colores distribuidos a la misma distancia en el círculo cromático
- Paleta cuadrada: cuatro colores distribuidos a la misma distancia
- Paleta tetrádica: dos pares de colores complementarios, con capas bien definidas
Ajustar parámetros:
- Cantidad de colores: elige generar 3, 5, 7 o 9 colores
- Ajuste de saturación: arrastra el control deslizante para aumentar o disminuir la saturación general
- Ajuste de luminosidad: arrastra el control deslizante para aumentar o disminuir la luminosidad general
Generar degradado CSS: selecciona el tipo de degradado lineal o radial y ajusta el parámetro de ángulo para generar código de degradado CSS listo para usar.
Generar efecto de sombra: ajusta el radio de desenfoque, el radio de expansión y los parámetros de transparencia para generar código CSS de sombra basado en el color base actual.
Extraer colores de una imagen: después de subir una imagen, la herramienta extrae automáticamente los tonos principales. Puedes hacer clic en cualquier posición de la imagen para seleccionar un color con precisión y aplicarlo como color base.
Modo de extracción de color por lotes: cambia a la pestaña "Extracción por lotes", sube varias imágenes, configura la cantidad de colores extraídos por cada imagen y el modo de expansión del esquema de color, haz clic para iniciar la extracción por lotes y, al finalizar, podrás descargar un ZIP con todos los resultados.
Copiar y exportar: haz clic en cualquier tarjeta de color para copiar el valor de color; haz clic en el botón "Exportar esquema de color" para descargar un archivo JSON con la información completa de la paleta.

Preguntas frecuentes

R: La paleta monocromática es adecuada para diseños sencillos y elegantes; los colores análogos son adecuados para temas naturales y fondos degradados; los colores complementarios son adecuados para diseños destacados que necesitan un fuerte contraste; la paleta triádica es adecuada para productos infantiles dinámicos y creaciones artísticas; las paletas cuadrada y tetrádica son adecuadas para interfaces complejas y visualización de datos. Elige el esquema adecuado según el objetivo del diseño.

Respuesta: Suba una imagen en el área "Extraer colores de una imagen"; la herramienta la analizará automáticamente y extraerá 8 tonos principales. Puede hacer clic en un color extraído para seleccionarlo y luego hacer clic en el botón "Usar el color seleccionado como color base" para generar una paleta de colores completa basada en ese color.

Respuesta: Haga clic en el botón "Copiar" del área del código de degradado, pegue el código en su archivo CSS y aplíquelo al elemento que necesite un fondo degradado. Se admiten dos tipos: degradado lineal y degradado radial; en el degradado lineal se puede personalizar la dirección del ángulo.

Respuesta: El ZIP descargado tras completar el procesamiento por lotes contiene tres archivos: palette-summary.json (resumen JSON de todos los datos de paletas), palettes.css (definiciones de variables CSS listas para usar) y preview.html (página de vista previa visual). Esto facilita el uso de las paletas extraídas en diferentes escenarios.

Respuesta: La saturación controla la intensidad del color: aumentarla hace que el color sea más vivo, mientras que reducirla lo hace más suave y grisáceo; la luminosidad controla qué tan claro u oscuro es el color: aumentarla lo hace más claro y reducirla lo hace más profundo. Ajustando estos dos parámetros puede afinar el efecto general de la paleta.

Respuesta: admite formatos de imagen comunes como JPG, JPEG, PNG, GIF, WebP, etc. Se recomienda usar imágenes con colores ricos y alto contraste para obtener resultados de extracción del color principal más precisos. El procesamiento de imágenes se realiza completamente de forma local y no se sube al servidor.

Respuesta: haz clic directamente en cualquier tarjeta de color o muestra de color, y el valor HEX correspondiente se copiará automáticamente al portapapeles; en la parte inferior de la página se mostrará el aviso "Copiado al portapapeles". En los resultados por lotes, también puedes hacer clic en la barra de color para copiar el valor de color correspondiente.