Generador de Paleta de Colores - Herramienta online gratuita

Características

Colores complementarios

Colores análogos

Esquema triádico

Complementario dividido

Exportar como variables CSS

Cómo Usar

1. Elige un color base y un esquema de armonía — la superficie se llena con una paleta.

2. Pulsa Espacio (o Barajar) para ver variaciones. Pasa el cursor sobre una columna para copiar, editar, abrir su escala de tonos o bloquearla frente a los barajados.

3. Cambia la superficie (blanco / gris / oscuro / damero) para probar la paleta sobre distintos fondos y expórtala como CSS, Tailwind, JSON, SVG o PNG.

Sobre esta herramienta

Las buenas paletas rara vez son aleatorias: la mayoría siguen relaciones en el círculo cromático. A partir de un color base, este generador crea paletas de seis colores con las armonías clásicas: análoga (tonos vecinos para diseños tranquilos), monocromática (un tono con distintas luminosidades), complementaria (tonos opuestos para un contraste fuerte), complementaria dividida, triádica y tetrádica. Cada columna muestra su valor y un nombre aproximado del color; puedes copiarlo, editarlo, abrir una escala de tonos más claros y oscuros, o bloquearlo para que no cambie mientras mezclas el resto. Previsualiza la paleta sobre fondo blanco, gris, oscuro o transparente y expórtala como variables CSS, configuración de colores de Tailwind, JSON, SVG o una hoja de muestras PNG.

Preguntas Frecuentes

¿Qué diferencia hay entre los esquemas de armonía?

La análoga usa tonos vecinos, la monocromática mantiene un tono y varía la luminosidad, la complementaria empareja tonos opuestos, la complementaria dividida usa los dos tonos junto al complementario, la triádica separa tres tonos a 120° y la tetrádica usa cuatro tonos a 90°.

¿Qué esquema funciona mejor para un sitio web?

Las paletas análogas o monocromáticas son las más fáciles para interfaces porque transmiten calma. Los esquemas complementario y triádico dan acentos fuertes, así que un enfoque habitual es un color dominante, uno de apoyo y una pequeña cantidad del complementario para las llamadas a la acción.

¿Cómo funcionan los colores bloqueados?

Bloquear una columna conserva ese color exacto cuando pulsas Espacio o Mezclar para generar variaciones. Es útil cuando un color de marca es fijo y quieres explorar qué combina con él.

¿Son accesibles las paletas generadas?

La armonía no garantiza un contraste legible. Antes de usar dos colores de la paleta como texto y fondo, comprueba la pareja con un comprobador de contraste según WCAG AA (4,5:1 para texto normal).

¿En qué formatos puedo exportar?

Propiedades personalizadas de CSS, un fragmento theme.extend.colors de Tailwind, un array JSON de valores HEX, un archivo SVG con las muestras y un PNG de 1500 × 900 con los valores impresos en cada columna.