Generador de Paletas de Colores
Crea armonías cromáticas perfectas para tus proyectos de diseño
Alto Contraste (Accesibilidad)
Colores optimizados para máxima legibilidad y vibrancia sobre el color base, ideal para textos y botones de llamada a la acción (CTA).
Complementario
Inverso
Análogos
Triádicos
Complementarios Divididos
Tetrádicos
Monocromáticos
Guía Maestra: Teoría del Color, Armonías y Accesibilidad Web
Bienvenido a la herramienta definitiva para diseñadores y desarrolladores UI/UX. Este Generador de Paletas de Colores no selecciona tonos al azar; utiliza modelos matemáticos precisos basados en la teoría del color tradicional y moderna para calcular combinaciones estéticamente perfectas a partir de un único código HEX. Ya sea que estés diseñando la identidad corporativa de una marca, una aplicación móvil o una ilustración digital, dominar las armonías cromáticas es el primer paso hacia un diseño profesional.
La Matemática de la Rueda Cromática (Modelo HSL)
Para entender cómo nuestra herramienta genera estos colores, debemos mirar detrás de la pantalla. En el diseño digital, los colores suelen calcularse utilizando el modelo cilíndrico HSL (Hue, Saturation, Lightness - Tono, Saturación, Luminosidad). El "Tono" o Hue se representa como un ángulo en un círculo, yendo desde $0^\circ$ hasta $360^\circ$.
Al fijar la Saturación y la Luminosidad de tu color base, la herramienta aplica desplazamientos angulares para encontrar las armonías perfectas. Por ejemplo, el cálculo para encontrar un color complementario estricto es un simple desplazamiento diametralmente opuesto en la rueda. Si tu color base es $H_{base}$, el complementario se calcula así:
Del mismo modo, una paleta triádica divide el círculo en tres partes iguales, sumando $120^\circ$ y $240^\circ$ al tono base. Estos cálculos algorítmicos garantizan que los colores generados guarden una relación geométrica inquebrantable, lo que el ojo humano percibe instintivamente como algo agradable y armónico.
Análisis de las Armonías Cromáticas (Los Modelos)
- Alto Contraste (Accesibilidad): No es estrictamente una armonía artística, sino técnica. Genera tonos opuestos con diferencias drásticas en la Luminosidad. Ideal para botones, notificaciones de error y textos que deben leerse sobre fondos vibrantes sin forzar la vista.
- Complementarios: Colores ubicados en lados opuestos de la rueda. Crean el máximo contraste y tensión visual. Úsalos con precaución, preferiblemente asignando un color como fondo principal y su complementario solo para pequeños acentos o iconos destacados.
- Análogos: Colores vecinos en la rueda cromática (generalmente a $30^\circ$ de distancia). Son los que más se encuentran en la naturaleza y resultan extremadamente placenteros y relajantes para la vista. Perfectos para diseños corporativos serenos o sitios web de salud.
- Triádicos: Tres colores equidistantes. Ofrecen un alto contraste visual al igual que los complementarios, pero conservan un mayor equilibrio y riqueza de color. Es el esquema favorito para aplicaciones infantiles y marcas que buscan transmitir energía y dinamismo.
- Monocromáticos: El pináculo de la elegancia. Utilizan un único Tono pero alteran drásticamente su Saturación y Luminosidad. Resultan en interfaces limpias, modernas y libres de distracciones, muy populares en el diseño de paneles de administración y modo oscuro.
Accesibilidad Web y el Estándar WCAG 2.1
Un diseño hermoso no sirve de nada si el usuario no puede leerlo. Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen que el texto normal tenga una relación de contraste mínima de 4.5:1 con su fondo (Nivel AA) o de 7:1 (Nivel AAA).
Para calcular este ratio con exactitud, no podemos usar los valores RGB directamente. Primero debemos convertir cada canal sRGB normalizado (de 0.0 a 1.0) a luz lineal ($C$) deshaciendo la corrección gamma de las pantallas. Las fórmulas exactas de la W3C son:
Para valores oscuros ($C_{sRGB} \le 0.04045$):
$$C = \frac{C_{sRGB}}{12.92}$$Para valores claros ($C_{sRGB} > 0.04045$):
$$C = \left(\frac{C_{sRGB} + 0.055}{1.055}\right)^{2.4}$$Una vez obtenidos los canales lineales ($R$, $G$, $B$), calculamos la luminancia relativa ($L$). Nota cómo la fórmula le da muchísimo más peso al verde, ya que el ojo humano es más sensible a ese espectro:
Finalmente, la fórmula del ratio de contraste ($CR$) compara la luminancia del color claro ($L_{claro}$) con la del oscuro ($L_{oscuro}$):
Nuestra paleta de "Alto Contraste" ejecuta exactamente estos cálculos algorítmicos en tiempo real para sugerirte combinaciones que superen las estrictas auditorías de accesibilidad web.
La Regla de Oro del Diseño: 60-30-10
Copiar 5 colores de este generador y distribuirlos equitativamente (20% cada uno) en tu página web es un error fatal de diseño. Para lograr un aspecto profesional, los expertos aplican la regla 60-30-10 de diseño de interiores adaptada a la web:
- 60% - Color Principal: Generalmente es el fondo neutro (un gris muy claro, blanco o un tono monocromático sumamente oscuro). Es el lienzo de tu diseño.
- 30% - Color Secundario: Tu color base de marca. Se usa para las barras de navegación, tarjetas, pie de página o titulares grandes. Proporciona interés visual.
- 10% - Color de Acento: Aquí entra el "Color Complementario" o el de "Alto Contraste". Se reserva estrictamente para botones de compra (Call to Action), iconos de alerta o enlaces hipertextuales. Es la especia que hace resaltar el diseño.
Preguntas Frecuentes (FAQ)
Simplemente haz clic sobre el recuadro de color en cualquiera de las paletas generadas. El código HEX se copiará automáticamente a tu portapapeles, listo para ser pegado en tu hoja de estilos CSS, Figma, Photoshop o Illustrator.
Un color complementario (opuesto en la rueda) no garantiza una lectura accesible. Si juntas rojo puro y verde puro (complementarios), vibrarán y causarán fatiga visual porque tienen una luminosidad similar. La paleta de Alto Contraste ajusta algorítmicamente la luminosidad además del Tono para garantizar que el texto resalte limpiamente sobre el fondo.
La paleta Triádica usa tres colores equidistantes. La Tetrádica (también llamada doble complementaria) usa cuatro colores, formados por dos pares de colores complementarios unidos en un rectángulo dentro de la rueda. Es la paleta más rica, pero la más difícil de balancear en un diseño web sin que parezca un arcoíris caótico.