¿Qué armonías se generan?

Complementaria (+180°), análoga (±30°), triádica (±120°) y split-complementaria (±150°), con la misma saturación y luminosidad.

¿Puedo exportar variables CSS?

Sí. Copia el bloque `:root` o toca un swatch para copiar su HEX.

¿Sirve para tokens de diseño en español?

Sí. Los HEX y variables CSS son universales; solo cambia el texto de la interfaz.

Utill.net

Paleta de colores

armonías y temas

Genera paletas de color complementarias, análogas, triádicas y otras armoniosas a partir de cualquier color base para diseño y desarrollo.

Esta conversión se ejecuta solo en tu navegador; no se sube nada.

Color

Hex

Base#3b82f6
Complementario#f6af3b

Solo colores opacos (HEX / RGB / HSL). Sin canal alfa — pega #rgb corto o #rrggbb completo.

Base

#3b82f6

Complementario

#f6af3b

Análogo

#3bdff6

#523bf6

Triádico

#f63b82

#82f63b

Complementario dividido

#f6523b

#dff63b

Variables CSS

:root {
  --color-base: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #3bdff6;
  --color-analogous-2: #523bf6;
  --color-triadic-1: #f63b82;
  --color-triadic-2: #82f63b;
  --color-split-1: #f6523b;
  --color-split-2: #dff63b;
}

¿Qué es esta herramienta?

A partir de un HEX semilla (#rgb o #rrggbb) genera armonías HSL: complementaria, análoga, triádica y split-complementaria. Puedes copiar swatches o un bloque de variables CSS.

No sustituye una guía de marca ni un comprobador de contraste. Valida contraste y roles semánticos antes de producción.

Casos de uso comunes

Bocetar acentos desde el HEX primario del producto
Exportar --color-* para una hoja de estilo prototipo
Comparar complementaria vs split-complementaria antes de revisión

Cómo usar

Elige la semilla con el selector o escribe HEX.
Revisa los grupos etiquetados de armonía.
Toca un swatch para HEX o copia el bloque CSS.
Valida contraste y marca fuera de esta herramienta.

Ejemplos

Entrada / ajuste	Salida	Notas
`#3b82f6`	complementario `#f6af3b`; análogos `#3bdff6`, `#523bf6`	Semilla azul de ejemplo
`#ff0000`	complementario `#00ffff`; triádicos `#00ff00`, `#0000ff`	Rojo puro → cian
`#808080`	todas `#808080`	Saturación 0 — sin efecto de matiz

Errores prácticos

Las armonías no son una guía de marca aprobada.
Los pasos HSL no son perceptualmente uniformes (a diferencia de OKLCH).
Semillas neutras colapsan todos los grupos al mismo HEX.

Referencias

Última revisión: 2026-07-27

Preguntas frecuentes

¿Qué armonías se generan?: Complementaria (+180°), análoga (±30°), triádica (±120°) y split-complementaria (±150°), con la misma saturación y luminosidad.
¿Puedo exportar variables CSS?: Sí. Copia el bloque `:root` o toca un swatch para copiar su HEX.
¿Sustituye una guía de marca?: No. Es un punto de partida visual; aún debes validar roles, contraste y variantes claro/oscuro.
¿Sirve para tokens de diseño en español?: Sí. Los HEX y variables CSS son universales; solo cambia el texto de la interfaz.