# 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. - Página canónica (herramienta interactiva): https://adigitalcreativo.com.mx/herramientas/generador-paleta-colores/ - Idioma: es-MX (México) · Moneda: MXN - Tema: Generadores — [mapa del tema](https://adigitalcreativo.com.mx/herramientas/temas/generadores.md) - Actualizado: 2026-10-25 (misma fecha que muestra la página) - Mantenido por: aDigital (adigitalcreativo.com.mx) - Pregunta que responde: ¿Cómo elijo una paleta de colores para mi marca? Este documento es la versión en texto de la página. La calculadora o generador funciona en la página canónica (requiere JavaScript; los datos no salen del navegador). Las tarifas son de referencia y el usuario puede ajustarlas allí. --- ## ¿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](https://adigitalcreativo.com.mx/herramientas/generador-codigos-qr/) y [Generador de descripciones SEO para colecciones](https://adigitalcreativo.com.mx/herramientas/generador-descripcion-coleccion-seo/). ## 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. ```text Contraste = (L más clara + 0.05) ÷ (L más oscura + 0.05) 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](https://adigitalcreativo.com.mx/herramientas/generador-codigos-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. --- ## Herramientas relacionadas - [Generador de códigos QR](https://adigitalcreativo.com.mx/herramientas/generador-codigos-qr/index.md): QR para URL, WhatsApp, WiFi, vCard, texto o correo. Descarga PNG o SVG sin marca de agua. - [Generador de descripciones SEO para colecciones](https://adigitalcreativo.com.mx/herramientas/generador-descripcion-coleccion-seo/index.md): Texto de categoría con palabra clave, beneficios, metadatos y llamado a la acción. - [Optimizador de imágenes a WebP](https://adigitalcreativo.com.mx/herramientas/optimizador-imagenes-webp/index.md): Convierte tus imágenes a WebP en el navegador y mide cuánto peso ahorras. - [Auditor de velocidad web](https://adigitalcreativo.com.mx/herramientas/auditor-velocidad/index.md): Puntaje de rendimiento y Core Web Vitals de cualquier página, con plan de acción en español. [Mapa completo de herramientas](https://adigitalcreativo.com.mx/herramientas/sitemap.md) · [llms.txt](https://adigitalcreativo.com.mx/herramientas/llms.txt)