Saltar al contenido principal
Utilia

Generador de paletas de colores

Elige un color base y una armonía, y obtén una paleta de 5 o 6 colores coherentes listos para tu web, presentación o decoración. Cada color muestra su HEX y su HSL, y se copia con un clic.

Color base

Todo se calcula en tu navegador: no enviamos tus datos a ningún servidor.

Las cinco armonías

  • Complementaria: el color base y su opuesto en la rueda (tono +180°), más versiones aclaradas y oscurecidas de ambos. Máximo contraste.
  • Análogos: cinco tonos vecinos del base (±15° y ±30°). Tranquila y cohesionada, ideal para fondos y degradados.
  • Triádica: tres tonos separados 120°, más una versión clara y una oscura del base. Viva pero equilibrada.
  • Tétrica: cuatro tonos separados 90° en la rueda, más un apoyo oscuro del base. Paletas ricas para proyectos con varios roles de color.
  • Monocromática: un solo tono en cinco luminosidades distintas. Elegante y segura; perfecta para interfaces limpias.

Cómo se genera

La paleta se construye en HSL: se mantiene (o ajusta levemente) la saturación y la luminosidad del color base y se rota el tono según la armonía elegida. Después cada color se convierte a su HEX exacto de 8 bits.

Fórmula

color de la paleta = HSL((H base + rotación) mod 360, S, L)

En la monocromática no se rota el tono: se mueve la luminosidad en cinco escalones.

Cómo usar una paleta sin equivocarte

  • Regla práctica 60-30-10: un color dominante para fondos (60 %), uno secundario (30 %) y uno de acento (10 %).
  • Reserva el complementario para acentos y llamadas a la acción: en grandes superficies cansa la vista.
  • Antes de publicar, comprueba el contraste entre tu color de texto y el fondo con el comprobador de contraste.

Preguntas frecuentes

¿Qué armonía elijo si tengo dudas?
Para algo seguro, análogos o monocromática. Para que un elemento destaque, complementaria. La triádica es el término medio: colorida sin ser estridente.
¿Cómo copio un color de la paleta?
Haz clic en su tarjeta: el código HEX se copia al portapapeles y verás la confirmación en pantalla. Al lado del HEX aparece siempre su HSL por si trabajas en ese formato.
¿Puedo partir de un color que solo tengo en RGB?
Sí, con el convertidor de color: pégalo en RGB, copia el HEX resultante y úsalo aquí como color base.
¿Por qué los colores se ven algo distintos en mi móvil?
Cada pantalla interpreta el color según su panel, brillo y perfil. Los valores HEX son exactos; lo que varía es la reproducción del dispositivo.

Continúa donde lo dejaste con estas utilidades que combinan bien con esta.