Generador de paletas de color

Genera una paleta de colores de cinco formas distintas

Este generador de paletas de colores reemplaza un conjunto de herramientas separadas. Pulsa Generar para una paleta aleatoria, ajusta una armonía de color desde un color base, extrae colores desde una imagen o foto, expande un solo código hex en un esquema completo, o convierte un nombre de color en una paleta reproducible. Establece entre 3 y 10 colores, bloquea los que te gusten y regenera el resto — sin cuenta y sin salir de tu navegador.

Haz clic en cualquier muestra para copiar su valor, cambia entre HEX, RGB y HSL, y arrastra las muestras para reordenarlas. Pulsa Espacio para generar una nueva paleta al instante — el mismo flujo que popularizó Coolors, disponible aquí sin pago.

Extrae colores desde una imagen, código hex o nombre

Desde una imagen: Arrastra una foto y la herramienta la muestrea en un canvas HTML5 oculto usando un algoritmo de corte mediano para extraer los colores dominantes — útil para hacer coincidir una paleta con una foto de producto, una foto de marca o un tablero de inspiración. La imagen se queda en tu dispositivo y nunca se sube a ningún servidor. Coolors cobra a los suscriptores Pro por esta función; aquí es gratis.

Desde un código hex: Pega un color de marca y mantenlo como ancla mientras el generador construye compañeros análogos, complementarios y de tinte/sombra a su alrededor. Desde un nombre: Escribe cualquier palabra y un hash determinista siembra la paleta, por lo que el mismo nombre siempre produce los mismos colores — una alternativa fiable sin conexión a los generadores de paletas basados en IA que dan resultados distintos cada vez.

Armonías de color basadas en teoría real del color

El modo Armonía aplica teoría del color rotando el tono alrededor de la rueda de colores. Los colores complementarios están a 180° de distancia para un contraste marcado; los análogos se mantienen dentro de ±30° para una sensación tranquila y unificada; el triádico usa tres tonos a 120° de distancia; el tetrádico usa cuatro a 90°; el complementario dividido suaviza el choque de contraste a 150°/210°; y el monocromático mantiene un solo tono y varía la luminosidad en la paleta.

Cada color generado también viene con una escala completa de tinte y sombra del 50 al 900 — los pasos más claros y oscuros necesarios para estados hover, colores de borde y variantes de fondo en un sistema de diseño de interfaz real.

Cómo se compara UtiloKit con Coolors, Adobe Color y Paletton

Coolors es la herramienta de paletas más popular, con un excelente flujo de bloqueo y regeneración y una gran comunidad de exploración. Coolors Pro (4 $/mes) bloquea la extracción de imágenes, la exportación avanzada y el historial de paletas detrás de un muro de pago. La exportación nativa a Tailwind no está disponible en el nivel gratuito. Adobe Color hace bien la verificación de accesibilidad WCAG y la visualización de armonías de color, pero guardar paletas requiere una cuenta gratuita de Adobe y hay que hacer más clics para llegar al paso de exportación.

Paletton es sólido para la teoría del color pero solo muestra cuatro tipos de armonía y no incluye extracción de imágenes. UtiloKit combina los puntos fuertes de las tres — el bloqueo estilo Coolors, el panel WCAG de Adobe Color, la extracción de imágenes y la exportación a Tailwind/SCSS — sin cuenta, sin muro de pago y sin anuncios en la herramienta.

Bloquea tus favoritos y sigue iterando

Las buenas paletas nacen de la iteración, no de una sola generación. Bloquea una muestra y se queda fija. Todo lo desbloqueado se vuelve a generar cuando pulsas Generar o la Barra espaciadora. Conserva el color dominante que te guste, mezcla los acentos y afina hasta encontrar un conjunto que funcione — y luego pasa directamente a la exportación.

Puedes bloquear varios colores a la vez. Bloquea el color principal de tu marca y un fondo neutro, y deja que la herramienta sugiera acentos. Bloquea esos acentos cuando encuentres los que funcionan y regenera los tonos de apoyo. Esto imita cómo los diseñadores crean paletas manualmente, solo que mucho más rápido.

Exporta a CSS, Tailwind, SCSS, JSON, PNG y enlace compartible

Cuando la paleta esté lista, expórtala en el formato que necesite tu proyecto. CSS genera un bloque :root de propiedades personalizadas. Tailwind genera un objeto theme.extend.colors listo para pegar en tailwind.config.js. SCSS genera declaraciones de $variables compatibles con Sass. JSON lista cada color en HEX, RGB y HSL para JavaScript o canalizaciones de tokens de diseño. Descarga una hoja de muestras en PNG para un documento de marca o presentación. Copia un enlace compartible que codifica la paleta en la URL para que un compañero abra exactamente lo que tú ves.

Verificación de contraste WCAG integrada

Una paleta no está terminada hasta que el texto sobre ella sea legible. El panel de contraste muestra la relación de contraste WCAG de cada color frente al texto blanco y negro, con insignias de aprobado/reprobado AA y AAA. WCAG 2.1 AA requiere 4,5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 para texto normal. La mayoría de las herramientas de paletas omiten este paso o lo colocan detrás de un nivel premium — aquí está integrado y se ejecuta en tiempo real mientras generas o modificas muestras.

Sin registro, sin subidas, nada sale de tu navegador. Cada operación de paleta — generación aleatoria, extracción de imágenes, cálculo de armonías, verificación de contraste y exportación — se ejecuta en JavaScript local. Guarda en favoritos este generador de paletas de colores gratuito para diseño web, identidad de marca, ilustración, presentaciones y paletas de temporada o boda.