ZenovayTools

Generador de Paleta de Colores

Genera paletas de colores armoniosas a partir de un color base. Crea esquemas complementarios, análogos, triádicos, tetradicos y monocromáticos con códigos hex/RGB/HSL.

Color harmony

Generated Palette

Base

hsl(217, 91%, 60%)

#3C83F6

Complement

hsl(37, 91%, 60%)

#F6AF3C

CSS Variables

:root {
  --color-1: #3C83F6;
  --color-2: #F6AF3C;
}

Cómo usar Generador de Paleta de Colores

  1. 1Ingresa un color base utilizando el selector de color o la entrada hex.
  2. 2Elige un tipo de armonía: complementario, análogo, triádico, etc.
  3. 3Ve la paleta generada con todos los códigos de color.
  4. 4Copia colores individuales o las variables de paleta completa.
ZenovayAnalytics

Convierte tu tráfico en clientes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Qué es la armonía de colores?▾
La armonía de colores es la combinación estéticamente agradable de colores basada en sus posiciones en la rueda de colores. Los principales tipos de armonía: Complementarios (colores opuestos, alto contraste — ej. azul + naranja), Análogos (colores adyacentes, armoniosos — ej. azul, azul-verde, verde), Triádicos (3 colores equidistantes a 120° — ej. rojo, amarillo, azul), Tetrádicos/Cuadrados (4 colores a 90° entre sí), Complementarios divididos (base + dos colores adyacentes a su complemento). Los monocromáticos usan matices y tonos de un solo tono.
¿Cómo funcionan los colores complementarios?▾
Los colores complementarios están directamente opuestos en la rueda de colores (separados 180°). Ejemplos: rojo + verde, azul + naranja, amarillo + morado. Cuando se colocan uno al lado del otro, crean el máximo contraste — cada uno hace que el otro parezca más vívido. Demasiada combinación de complementarios abruma; use uno como dominante (70%) y el otro como acento (30%). Los colores análogos (separados 15-30°) son más fáciles de combinar pero menos dinámicos.
¿Qué es la regla de color 60-30-10?▾
La regla 60-30-10 es un principio de diseño para el uso equilibrado del color: 60% color dominante (generalmente neutro o el color de marca), 30% color secundario (complementa al dominante), 10% color de acento (para énfasis, llamadas a la acción, resaltados). Esto crea jerarquía visual y evita que cualquier color domine el diseño. Ejemplo: 60% blanco, 30% azul marino, 10% naranja brillante.
¿Qué son los matices, sombras y tonos?▾
Matiz (tint): un color mezclado con blanco — aumenta la luminosidad. Sombra (shade): un color mezclado con negro — disminuye la luminosidad. Tono (tone): un color mezclado con gris — reduce la saturación. En HSL: los matices aumentan L hacia 100%, las sombras disminuyen L hacia 0%, los tonos disminuyen S hacia 0%. Los sistemas de diseño (Tailwind, Material, Radix) usan una escala de 10 matices/sombras (50-950) para cada color base.
¿Cómo elijo colores para la accesibilidad?▾
WCAG 2.1 requiere una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande (18pt/14pt negrita) contra su fondo. Relación de contraste = (L1 + 0,05) / (L2 + 0,05) donde L es la luminancia relativa. Consideración para modo oscuro: un color legible sobre blanco puede no serlo sobre negro — pruebe siempre ambos. Evite depender solo del color para transmitir significado (rojo=error, verde=éxito) — use también iconos o etiquetas de texto.