Cómo crear una paleta de colores: armonías, regla 60-30-10 y contraste

Por qué importa una paleta

Los colores son lo primero que se percibe de una web, un logo o una presentación — antes de leer una sola palabra. Una paleta coherente da una imagen profesional y reconocible; una mezcla de colores al azar parece improvisada, aunque el contenido sea excelente.

La buena noticia: no hace falta ser diseñador. Las armonías de colores se basan en reglas geométricas sencillas sobre el círculo cromático.

Las principales armonías de colores

Armonía	Principio	Efecto	Ideal para
Monocromática	Tonos de un solo color	Tranquila, elegante, muy coherente	Webs minimalistas, documentos corporativos
Análoga	2–4 tonos vecinos en el círculo	Natural, relajante	Naturaleza, bienestar, fotografía
Complementaria	Dos tonos opuestos	Contraste fuerte, enérgico	Botones de acción, deporte, promociones
Triádica	Tres tonos equidistantes (120°)	Viva y equilibrada	Marcas infantiles, proyectos creativos
Tetrádica	Dos pares de complementarios	Rica, difícil de equilibrar	Ilustraciones, interfaces complejas

Genera una paleta en unos segundos

El generador de paletas crea armonías a partir de cualquier color base: complementaria, análoga, triádica, tetrádica y monocromática.

• Haz clic en una muestra para copiar su código HEX; cada color muestra también sus valores RGB y HSL.
• Exporta a CSS: la herramienta genera un bloque :root con variables (--color-1, --color-2…) listo para pegar en tu hoja de estilos.
• Todo se calcula en tu navegador.

¿Necesitas encontrar el color base? Tómalo de una imagen (una foto de tu tienda, tu logo) con el cuentagotas de imagen, o ajústalo con el selector de color.

La regla 60-30-10

Elegir los colores es solo la mitad del trabajo; también hay que dosificarlos. La regla 60-30-10, tomada del interiorismo, funciona muy bien en pantalla:

• 60 % — un color dominante y neutro: fondos, grandes superficies (a menudo blanco, blanco roto o un color muy oscuro).
• 30 % — un color secundario: cabeceras, tarjetas, secciones.
• 10 % — un color de acento: botones, enlaces, elementos importantes.

El color de acento es el que debe atraer la mirada. Si está en todas partes, ya no atrae nada.

No olvides el contraste

Una paleta preciosa no sirve de nada si el texto no se lee. Las pautas de accesibilidad WCAG definen ratios de contraste mínimos entre texto y fondo:

Elemento	Ratio mínimo (nivel AA)
Texto normal	4,5 : 1
Texto grande (24 px o más, o 19 px en negrita)	3 : 1
Componentes de interfaz, iconos	3 : 1

Un texto amarillo pálido sobre blanco o gris medio sobre gris claro casi nunca cumple. Comprueba tus parejas texto / fondo antes de dar por buena la paleta.

Consejos para una paleta profesional

1. Limítate a 3–5 colores, más los neutros (blanco, grises, casi negro).
2. Evita el negro puro (#000000) para el texto: un gris muy oscuro o un azul marino se lee con más suavidad.
3. Prevé variantes claras y oscuras de cada color para estados hover, bordes y fondos.
4. Pruébala con contenido real: una paleta que luce en muestras puede cansar en una página completa.
5. Apunta tus códigos: guarda tus valores HEX y variables CSS en un único sitio para reutilizarlos en todas partes (web, presentaciones, redes sociales).

Conclusión

Una buena paleta parte de un color, sigue una regla de armonía, se dosifica con la regla 60-30-10 y respeta el contraste. Con un generador que exporta directamente a CSS, pasas de una idea a una paleta utilizable en pocos minutos.