Herramienta de recomendación de combinaciones de colores

Generador profesional de combinaciones de colores, compatible con modos como monocromático, colores complementarios y tríadas; permite generar esquemas de color por lotes y exportarlos.

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

Configure primero

Define primero el color principal y las reglas; luego genera un esquema exportable

Empieza rápido con colores de ejemplo o introduce un HEX exacto. Cada paso tiene botón de siguiente; al finalizar, genera, guarda y descarga.

HEX / RGB / HSL / CMYK Monocromático / Complementario / Tríada CSS / SCSS / JSON / PNG Ajustes guardables

Color principal actual Haz clic en el valor para copiar

HEX

RGB

HSL

Ajuste del color principal

Configura primero el color principal. Usa el selector, el campo HEX o los controles HSL; el esquema se actualizará en tiempo real.

Color baseAdmite HEX de 6 dígitos

Valor de color HEX Ejemplo: #0F6FAE

CMYK

Ajuste fino HSLIdeal para ajustar tono, saturación y luminosidad

Tono205°

Saturación78%

Brillo37%

Nombre del esquema

Colores de ejemploHaz clic para seguir ajustando

Reglas de color

Elige un modelo de color y ajusta la cantidad y el desplazamiento claro/oscuro. Se recomienda generar una vez con los valores predeterminados y luego ajustar según el diseño.

Modelo de colorLos colores análogos dan un estilo visual uniforme y suave

Parámetros de generaciónConfigura los parámetros y ve a la vista previa

Cantidad de colores

Ángulo cercano24°

Desplazamiento de saturación0%

Desplazamiento de brillo0%

Neutralizar8%

Orden

Tipo de degradado

Ángulo del degradado90°

Vista previa y ajustes

Revisa los códigos de color, la legibilidad del texto y la muestra de interfaz. Haz clic en cualquier valor para copiarlo.

Paleta de colores5 colores

Vista previaPara identificar rápido la jerarquía

Código de degradadoCopiable directo a CSS

Guardar y exportar

Exporta el esquema actual o genera varios en lote. Solo se muestran los 20 primeros; la descarga incluye todos.

Opciones por loteAjusta la cantidad según necesites

Cantidad de esquemas

Grado de variación

Contenido a exportarPara archivos y código

HEX RGB HSL CMYK

JSON CSS SCSS PNG

DescargaEl ZIP incluirá todos los resultados por lote

Resultados por loteAún no se ha generado en lote

Configura primero el color principal y las reglas, luego haz clic en “Generar en lote”.

Esquemas guardados0

Los esquemas guardados aparecerán aquí; puedes reaplicarlos o eliminarlos.

Instrucciones

Instrucciones de uso del software

Configurar el color principal: En “Configuración del color principal”, usa el selector de color, el campo de entrada HEX o los controles deslizantes HSL para definir el color base. También puedes hacer clic en un color de ejemplo para cargarlo rápidamente.
Elegir la regla de combinación de colores:
- Monocromático: Genera niveles claros y oscuros basados en el mismo matiz; ideal para diseños con estilo uniforme.
- Colores análogos: Selecciona matices adyacentes; adecuado para efectos visuales suaves y con profundidad.
- Colores complementarios: Usa colores opuestos en el círculo cromático; ideal para destacar botones, títulos y contenido clave.
- Complementario dividido: Añade colores suavizados dentro de una relación de contraste; adecuado para gráficos promocionales y visuales de campañas.
- Tríada, tétrada y cuadrado: Adecuado para gráficos, etiquetas de clasificación e interfaces con múltiples módulos.
- Colores neutros: Adecuado para páginas empresariales, interfaces de herramientas y diseños documentales.
Ajustar los parámetros de generación: Configura la cantidad de colores, el ángulo de proximidad, el desplazamiento de saturación, el desplazamiento de luminosidad, la proporción de neutralización, el método de ordenación y el ángulo del degradado.
Previsualizar la paleta: Entra en “Vista previa y ajuste” para ver la información HEX, RGB, HSL y de contraste de cada color. Haz clic en el botón del valor de color para copiarlo.
Guardar paletas y configuración: Haz clic en “Guardar paleta actual” para guardar la combinación de colores como favorita, y en “Guardar configuración” para guardar los parámetros actuales y poder seguir usándolos más adelante.
Generación por lotes: Entra en “Guardar y exportar” para configurar la cantidad de paletas y el rango de variación. Haz clic en “Generar por lotes” para crear varias combinaciones de colores. La interfaz muestra las primeras 20 paletas; al descargar, se incluirán todos los resultados.
Exportar archivos: Puedes descargar archivos JSON, CSS, SCSS y PNG por separado, o seleccionar el contenido de exportación y descargarlo como archivo ZIP comprimido.

Preguntas frecuentes

Respuesta: Monocromático es adecuado para extensiones de marca e interfaces sencillas; colores análogos para páginas suaves y uniformes; colores complementarios para destacar información clave; tríada para gráficos y diseños con múltiples módulos; colores neutros para herramientas empresariales y escenarios documentales.

Respuesta: Introduce el código de color en el campo HEX, por ejemplo #0F6FAE, y la herramienta actualizará automáticamente el selector de color, los controles deslizantes HSL y la vista previa de la paleta. También puedes ajustar con precisión mediante los controles deslizantes de matiz, saturación y luminosidad.

Respuesta: El archivo CSS genera códigos de color en forma de variables, que pueden usarse en estilos web; el archivo SCSS es adecuado para proyectos Sass. Ambos formatos facilitan la reutilización en sistemas de diseño, cambios de tema y estilos de componentes.

Respuesta: La generación en lote se basa en el color principal actual, las reglas de combinación y el grado de variación, aplicando ajustes razonables al tono, la saturación y el brillo para obtener varios conjuntos de paletas relacionadas en estilo pero no repetidas.

Respuesta: Las paletas guardadas se registran en el almacenamiento local del dispositivo actual. Después de borrar los datos del sitio o cambiar de dispositivo, es posible que las paletas guardadas anteriormente ya no se muestren, por lo que se recomienda exportar a tiempo los archivos de las paletas importantes.

Respuesta: No. El cálculo de colores, el guardado de paletas y la generación de archivos se realizan en el dispositivo actual; el color principal, las paletas y el contenido exportado no se suben al servidor.

Respuesta: En “Vista previa de ajustes finos”, revisa el contraste con texto blanco y con texto oscuro de cada color. Cuanto mayor sea el valor, más clara será la lectura del texto. Al usarlo como fondo para el cuerpo del texto, se recomienda elegir un color de texto con mayor contraste.