HedgieTools

Generador de paletas

Parte de tu color principal y obtén una paleta de interfaz completa: secundario, terciario, éxito, advertencia, peligro y neutros, con sus tonos y la comprobación del contraste.

Tu color principal

Escribe un valor o elige un color: el resto de la paleta se crea a partir de él.

Secundario y terciario
Formato del valor

Escribe un valor HEX, como #2563EB, o haz clic en el cuadrado para elegir el color.

Tu paleta

Haz clic en un valor o en un tono (del 50 al 950) para copiarlo. El lápiz sustituye un color sugerido por el tuyo: se mantiene fijo aunque cambies el color principal.

  • —

    Primario

    tu color
  • —

    Secundario

    complementario
  • —

    Terciario

    casi complementario
  • —

    Info

    azul
  • —

    Éxito

    verde
  • —

    Advertencia

    naranja
  • —

    Peligro

    rojo
  • —

    Neutro

    gris matizado

Tokens de tema claro y oscuro

Los colores funcionales de tu interfaz, listos para el tema claro y el oscuro. Cada uno apunta a un tono de la paleta. Haz clic para copiar.

  • --backgroundFondo de la página
  • --surfaceTarjetas y paneles
  • --surface-mutedZonas secundarias
  • --borderBordes y separadores
  • --textTexto principal
  • --text-mutedTexto secundario
  • --primaryBotones y enlaces
  • --primary-hoverAl pasar el cursor
  • --on-primaryTexto sobre color principal
  • --focus-ringContorno de foco
  • --secondaryAcento secundario
  • --tertiaryAcento terciario
  • --infoInformación
  • --info-softFondo de información
  • --successÉxito
  • --success-softFondo de éxito
  • --warningAdvertencia
  • --warning-softFondo de advertencia
  • --dangerPeligro, error
  • --danger-softFondo de error

Colores que combinan

Las armonías clásicas en torno a tu color principal, para ilustraciones, gráficos o acentos.

  • Complementarios

    el color opuesto

  • Complementario dividido

    más suave que el opuesto

  • Análogos

    los colores vecinos

  • Tríada

    tres colores equilibrados

  • Tétrada

    cuatro colores en cuadrado

  • Monocromático

    un solo matiz, varias intensidades

Vista previa y contraste

La paleta aplicada a algunos elementos de interfaz y la legibilidad de cada combinación según las normas WCAG.

Tema de la vista previa
Título de la páginaTexto secundario, menos importante, debajo del título.
Una tarjeta con un enlace y botones.
PrimarioSecundarioTerciario
Info · Hay una actualización disponible.
Éxito · Tus cambios están guardados.
Advertencia · Tu suscripción vence pronto.
Error · No se pudo realizar el pago.
  • Texto sobre fondo
    Relación—Texto normal—Texto grande—AAA—
  • Texto secundario sobre fondo
    Relación—Texto normal—Texto grande—AAA—
  • Enlace sobre fondo
    Relación—Texto normal—Texto grande—AAA—
  • Botón principal
    Relación—Texto normal—Texto grande—AAA—
  • Botón secundario
    Relación—Texto normal—Texto grande—AAA—
  • Texto terciario sobre fondo
    Relación—Texto normal—Texto grande—AAA—
  • Alerta de información
    Relación—Texto normal—Texto grande—AAA—
  • Alerta de éxito
    Relación—Texto normal—Texto grande—AAA—
  • Alerta de advertencia
    Relación—Texto normal—Texto grande—AAA—
  • Alerta de peligro
    Relación—Texto normal—Texto grande—AAA—

Exportar

Obtén la paleta en el formato elegido arriba (HEX).

Indica un color principal para generar el código.

Variables CSS de la paleta (--color-primary-500…). Los tokens apuntan a estas variables; activa el tema oscuro con data-theme="dark" en el elemento html.

Acerca del generador de paletas

Elige el color principal de tu marca y obtén todo lo que una interfaz necesita a su alrededor: colores de acompañamiento, colores de estado, neutros, tonos, tokens de tema claro y oscuro, comprobaciones de contraste y código para pegar, sin salir de tu navegador.

Una paleta completa a partir de un solo color

La herramienta deriva de tu color principal un color secundario y uno terciario, los colores de estado (información, éxito, advertencia, peligro) adaptados a su estilo, y grises ligeramente teñidos para fondos y textos.

Tonos listos para usar

Cada color viene en once tonos, del más claro (50) al más oscuro (950), para fondos, bordes, estados al pasar el cursor y textos. Si un color sugerido no te convence, reemplázalo por el tuyo: sus tonos se adaptan.

Tokens de tema claro y oscuro

Fondo, superficie, borde, texto, paso del cursor, foco y fondos de alerta: cada color funcional apunta a un tono de la paleta, con un valor para el tema claro y otro para el tema oscuro.

Contraste verificado

Cada combinación de texto y fondo se evalúa según las normas WCAG: 4,5:1 para texto normal, 3:1 para texto grande y 7:1 para el nivel AAA.

Exportar a CSS, Tailwind y JSON

Copia cada valor en HEX, RGB, HSL u OKLCH, o descarga un archivo de variables CSS, un tema de Tailwind v4, una configuración de Tailwind v3, un JSON o una simple lista. Todo ocurre en tu navegador: no se envía ni se guarda nada.

Herramientas relacionadas