Generador de paleta de colores
Parte del color de tu marca y obtén una paleta armónica de cinco tonos. Bloquea los que te gusten, revisa si se leen bien sobre blanco y negro, y copia los códigos o expórtalos como variables CSS.
Actualizado el 25 de octubre de 2026 · Por aDigital Herramientas
Tu paleta
Respuesta rápida
¿Cómo elijo una paleta de colores para mi marca?
Parte de un color principal que represente tu marca y genera a su alrededor una armonía: análoga para un look tranquilo, complementaria para contraste fuerte o triádica para algo más vibrante. Usa pocos colores, uno de acento, y comprueba que el texto tenga un contraste mínimo de 4.5:1 para leerse bien.
Sigue con: Generador de códigos QR y Generador de descripciones SEO para colecciones.
Cómo armar una paleta de marca que sí funcione
Una paleta no es solo que los colores "se vean bonitos juntos". En tu sitio web cada color tiene un trabajo: el principal identifica tu marca, uno de contraste se reserva para botones y llamados a la acción, y los neutros sostienen el texto. Esta herramienta calcula las combinaciones con la rueda de color (modelo HSL) y te dice en cada tono si funciona para texto.
Las seis armonías, en una línea
- Análoga: el tono base y sus vecinos a ±30°. Tranquila y natural, ideal para spas, cafeterías o marcas ecológicas.
- Complementaria: el base y su opuesto a 180°. El contraste máximo: perfecta para que un botón destaque.
- Triádica: tres tonos repartidos a 120°. Alegre y equilibrada; usa uno como dominante.
- Split-complementaria: el base y los dos vecinos de su opuesto (±150°). Contraste fuerte, pero menos agresivo que la complementaria.
- Monocromática: un solo tono en distintas luminosidades. Elegante y segura.
- Tétrada: cuatro tonos a 90°. La más rica; requiere disciplina para no saturar.
Cómo se calcula el contraste
Usamos la fórmula de las pautas WCAG 2.x: primero se obtiene la luminancia relativa (L) de cada color y luego se comparan.
L = 0.2126·R + 0.7152·G + 0.0722·B (valores linealizados)
Ejemplo con el color por defecto
El naranja #FF5A1F tiene una luminancia de 0.287. Sobre blanco da 1.05 ÷ 0.337 = 3.12:1: sirve para títulos grandes (AA grande), pero no para párrafos. Sobre negro da 0.337 ÷ 0.05 = 6.73:1, que cumple AA para cualquier texto. Por eso, en un botón naranja, el texto negro se lee mejor que el blanco. Son los mismos números que verás en la primera tarjeta.
Consejos rápidos
- Reserva el color más llamativo para una sola acción por pantalla: "Comprar", "Cotizar", "Escríbenos".
- No pongas texto largo en colores saturados; usa casi negro sobre casi blanco y deja el color para títulos y detalles.
- Revisa tus colores también en modo oscuro: un azul que se lee bien en blanco puede perderse sobre negro.
- ¿Tu paleta irá también en un código QR para tu local? Pruébala en el generador de códigos QR, que avisa si el contraste lo hace ilegible.
Preguntas frecuentes
¿Qué significa AA y AAA en el contraste?
Son los niveles de las pautas de accesibilidad WCAG. AA pide 4.5:1 para texto normal y 3:1 para texto grande (unos 24 px, o 19 px en negritas). AAA es más estricto: 7:1 para texto normal y 4.5:1 para texto grande.
¿Cuántos colores debe tener la paleta de mi marca?
Con un color principal, uno o dos de apoyo y un par de neutros (un casi negro y un casi blanco) resuelves casi cualquier sitio web. Más de cinco colores protagonistas suele verse desordenado.
¿Qué armonía elijo?
Análoga y monocromática dan resultados tranquilos y fáciles de combinar. Complementaria y split-complementaria generan contraste para botones. Triádica y tétrada son más vivas; úsalas con un color dominante y los demás como acentos.
¿Cómo uso las variables CSS que exporta la herramienta?
Pega el bloque :root en tu hoja de estilos y usa los colores con var(--color-1), var(--color-2), etc. Así cambias la paleta completa de tu sitio editando un solo lugar.
Contenido revisado en octubre de 2026. Cálculo de contraste según WCAG 2.2; todo se procesa en tu navegador.