Generador de Paleta de Colores

Generador de Paleta de Colores - Crear Esquemas Hermosos

Un potente generador de paleta de colores con dos modos: creación manual con reglas de armonía de color (monocromático, análogos, complementario, triádico, tetrádico) y extracción automática de imágenes usando cuantización avanzada de color. Incluye 12 paletas predefinidas, múltiples formatos de exportación (CSS, SCSS, JSON, Array) y la capacidad de descargar paletas como imágenes. Vea también nuestro Generador Degradados y nuestro Mezclador de Colores.

¿Cómo genero rápidamente una paleta para un proyecto nuevo?

Comienza con el color en el que más confías: normalmente el primario de marca, un acento de una imagen hero o el sentimiento que quieres transmitir. Pega su HEX en el selector base y pulsa un botón de armonía: Análogo da una paleta tranquila (ideal para sitios de contenido); Complementario da un contraste vibrante (perfecto para CTAs); Triádico distribuye tres acentos equilibrados (excelente para diseño editorial). Si no tienes color inicial, sube una imagen de inspiración en modo Desde Imagen y deja que el algoritmo k-means extraiga cinco colores dominantes. Ajusta cada muestra y exporta. Una primera paleta sólida lleva menos de dos minutos, y puedes ampliarla con Sombras y Matices hasta convertirla en una rampa completa de sistema de diseño.

¿Cuál es la diferencia entre armonías monocromáticas, análogas, complementarias, triádicas y tetrádicas?

Son cinco posiciones clásicas en la rueda HSL. Monocromática mantiene un único tono variando solo luminosidad y saturación: la más calmada y difícil de equivocar. Análoga toma vecinos a unos 30 grados (azul, azul-verde, verde): natural y cohesiva. Complementaria toma el tono opuesto a 180 grados (azul más naranja): máxima tensión visual, ideal para un acento sobre un fondo. Triádica toma tres tonos a 120 grados (rojo, amarillo, azul): equilibrada pero animada, común en marcas lúdicas. Tetrádica toma dos pares complementarios formando un rectángulo en la rueda: la más rica y difícil de controlar; suele dominar un color mientras los otros tres lo apoyan. Elige la regla según el volumen emocional de la página.

¿Cómo funciona realmente la extracción de colores de una imagen?

Al subir la imagen, la herramienta la reduce a un número manejable de píxeles y ejecuta clustering k-means en espacio RGB. Cada píxel se trata como un punto 3D; el algoritmo elige k centroides aleatorios (k es tu cantidad de colores), asigna cada píxel al centroide más cercano, recalcula cada centroide como la media de sus píxeles asignados y repite hasta que los centroides se estabilizan. El resultado son k colores que minimizan la distancia total a todos los píxeles: los tonos más representativos de la foto. Soporta JPEG, PNG, WebP, BMP y GIF hasta 10MB localmente; nada se envía al servidor. Para trabajo de marca, prueba con logos, fotos de producto y moodboards; el algoritmo extrae colores dominantes, no píxeles raros de brillo.

¿Cómo exporto la paleta a Figma, Adobe XD o mi proyecto de código?

Usa el formato correcto para cada destino. Para Figma y Adobe XD, copia la lista HEX y pega muestras una a una, o exporta JSON e impórtalo con un plugin de sincronización de tokens como Tokens Studio. Para CSS puro, usa Variables CSS: produce :root { --color-1: #...; } que referencias como var(--color-1), permitiéndote sobrescribir temas en una línea. Para pipelines Sass/SCSS, las Variables SCSS generan $color-1: #...; que se compilan en build. Para apps JavaScript (React, Vue, configuración de Tailwind), usa Array o JSON y aliméntalo en tu objeto de tema. Para presentaciones, descarga la imagen PNG. Renombra siempre --color-1 a nombres semánticos como --brand-primary o --surface-elevated antes de producción.

¿Cuántos colores debe tener realmente la paleta de un sistema de diseño?

Un sistema de diseño funcional necesita más de las cinco o seis muestras que genera una armonía. El patrón habitual es: un primario de marca más 9 matices/sombras suyos (escalones 50, 100, 200 ... 900); uno o dos colores secundarios con la misma rampa; una rampa neutra gris de 9-12 escalones para texto, bordes y superficies; más cinco colores semánticos (verde éxito, amarillo aviso, rojo peligro, azul info, anillo de foco) cada uno con su par claro/oscuro. Eso suma unos 50-70 tokens. Usa este generador para fijar los cinco tonos base y luego expande cada uno con Sombras y Matices. Material Design, Tailwind y Radix siguen versiones de esta estructura.

¿Es accesible mi paleta según WCAG y cómo leo la auditoría de contraste integrada?

Una paleta bonita no sirve si el texto no se lee, por eso la herramienta ahora incluye un panel de Auditoría de Contraste WCAG debajo de las opciones de exportación. Para cada muestra calcula la relación de contraste frente a blanco (#FFF) y negro (#000) con la fórmula estándar de luminancia relativa de WCAG 2.1, y te indica el mejor color de texto para esa muestra. Lee los distintivos así: AAA significa relación de 7:1 o más; AA significa al menos 4.5:1, que aprueba texto de cuerpo; AA Grande significa entre 3:1 y 4.5:1, solo seguro para texto grande (18pt, o 14pt negrita); un distintivo rojo Falla significa menos de 3:1, inservible para texto. Los tonos medios suelen fallar: un cian vibrante luce bien pero raramente pasa sobre blanco, así que la auditoría te dirigirá a texto negro. Para corregir un par que falla, oscurece el primer plano o empareja el color de marca solo con el blanco o negro que el panel recomiende.

¿Cómo ajusto una armonía que sale demasiado chillona o demasiado apagada?

Las armonías crudas de la rueda suelen producir resultados caricaturescamente saturados porque mantienen la saturación y luminosidad base en todas las muestras. La solución es convertir cada muestra a HSL y ajustarla por separado. Para calmar una paleta chillona: baja la saturación de los colores secundarios a 30-50% manteniendo saturado el color de marca; este es el principio dominante-con-apagados detrás de casi toda paleta premium. Para despertar una apagada: empuja el contraste de luminosidad — coloca una muestra cerca de 95% (superficie casi blanca) y otra cerca de 15% (texto casi negro). La regla 60-30-10 es el estándar probado: 60% neutro dominante, 30% secundario, 10% acento. Usa esta herramienta para generar las matemáticas y luego retoca HSL al gusto.

¿Por qué los colores extraídos de mi imagen lucen más apagados que la foto original?

Pasan dos cosas. Primero, k-means devuelve la media de cada cluster, y la media de un brillo saturado más un tono medio oscuro es siempre menos saturada: promediar desatura por definición. Segundo, las fotos dependen mucho del micro-contraste y las transiciones que se pierden al reducir miles de píxeles a cinco muestras planas. Solución: re-extrae con mayor cantidad de colores (10 en vez de 5) y recuperarás los acentos brillantes que se estaban promediando. Después borra manualmente los colores medios turbios y conserva solo los brillos saturados y la sombra más oscura. Alternativamente, muestrea directamente con el cuentagotas el píxel más vívido en vez de fiar en medias de cluster: útil cuando quieres un color de brillo específico, no un promedio.

Características Clave

• Dos modos de generación: Manual y De Imagen
• Extraer colores dominantes de imágenes
• 8 métodos de generación de armonía de color
• Algoritmo de agrupamiento K-means para extracción
• Agregar/eliminar colores (2-10 colores)
• 12 hermosas paletas predefinidas
• Vista previa de color en vivo
• Exportar a Variables CSS
• Exportar a Variables SCSS
• Exportar a formato JSON
• Descargar paleta como imagen PNG
• Soporte para JPEG, PNG, WebP, BMP, GIF
• Procesamiento 100% del lado del cliente