Generador de Paletas de Colores
Combinaciones armónicas o la paleta extraída de tu imagen
Pulsa Espacio para una nueva paleta · haz clic en un color para ver detalles · ⧉ lo copia · 🔒 lo fija
Tonos de #7C3AED
Generador de Paletas de Colores Gratis
Reglas de armonía, paletas a partir de fotos y códigos listos para usar
Elige un color base y el generador crea una paleta de cinco colores con las armonías clásicas del círculo cromático: análogos (tonos vecinos), monocromática (un tono con distintas luminosidades), complementarios (tonos opuestos), complementario dividido, triádica y tetrádica. Pulsa Espacio o “Nueva paleta” para obtener ideas nuevas y bloquea los colores que quieras conservar. Cambia a “Desde imagen” para extraer los colores dominantes de una foto, un logotipo o una captura. Cada color muestra HEX, RGB y HSL y una puntuación de contraste WCAG para texto negro o blanco; haz clic para copiarlo. Para el color seleccionado se genera una escala de 10 tonos (50–900), y puedes copiar la paleta como variables CSS o lista HEX, o descargarla en PNG. Las imágenes se analizan en tu navegador y nunca se suben.
Características
6 armonías
Análogos, complementarios, triádica y más
Paleta desde imagen
Colores dominantes de cualquier foto
Bloquear y mezclar
Conserva tus favoritos y regenera el resto
Contraste
Ratio WCAG del texto sobre cada color
Fundamentos de la Armonía del Color
Reglas de armonía
- Análogos: tonos a ±30° — tranquilos y coherentes
- Complementarios: tonos a 180° — alto contraste
- Complementario dividido: base + los dos vecinos de su opuesto (±150°)
- Triádica: tres tonos a 120° — vibrante pero equilibrada
- Tetrádica: cuatro tonos a 90° — rica, usa uno como dominante
Consejos prácticos
- Regla 60-30-10: 60 % dominante, 30 % secundario, 10 % acento
- El texto normal necesita un contraste mínimo de 4,5:1 (WCAG AA)
- El texto grande (≥24 px o 18,5 px en negrita) necesita 3:1
- Las escalas 50–900 sirven como tokens de diseño (estilo Tailwind)
Preguntas Frecuentes
¿Cómo creo una paleta de colores?
Elige un color base (por ejemplo, el de tu marca) y una regla de armonía; el generador calcula los colores que combinan en el círculo cromático. Bloquea los que te gusten y pulsa Espacio para cambiar el resto.
¿Cómo saco la paleta de colores de una imagen?
Cambia a “Desde imagen” y arrastra, pega o elige una foto. La herramienta agrupa los píxeles parecidos (k-means) y muestra los seis colores dominantes, del más al menos frecuente.
¿Qué significa “Aa 7.2 · AAA”?
Es la relación de contraste entre el color y el mejor de los dos textos, negro o blanco. WCAG AA exige 4,5:1 para texto normal y AAA, 7:1.
¿Cómo uso la paleta en CSS?
Pulsa “Copiar variables CSS” para obtener un bloque :root con --color-1 … --color-5, pégalo en tu hoja de estilos y usa var(--color-1) donde quieras.
¿Qué son los colores complementarios?
Colores opuestos en el círculo cromático, como azul y naranja o morado y amarillo. Crean mucho contraste y funcionan bien en botones de llamada a la acción.
¿Se sube mi imagen?
No. La imagen se reduce y se analiza en tu navegador con un canvas; no se envía nada a ningún servidor.