Saltar al contenido
ToolMug

Usa ↑ ↓ para moverte, Enter para abrir y Esc para cerrar.

Generador de paletas de colores

Pulsa Generar (o la barra espaciadora) para obtener una paleta nueva. Bloquea los colores que quieras conservar, elige una armonía como análogos o complementarios y comprueba de un vistazo qué colores se leen bien como texto sobre cada fondo. Copia el resultado como variables CSS, colores de tema de Tailwind o códigos HEX.

Funciona en tu navegador: nada de lo que introduces se sube

  • 🎨

    #22333B

    Texto Blanco 13,1:1 AAA

  • 🎨

    #3D6B72

    Texto Blanco 5,9:1 AA

  • 🎨

    #7FB3A8

    Texto Negro 8,9:1 AAA

  • 🎨

    #E6D3A3

    Texto Negro 14,2:1 AAA

  • 🎨

    #F4EFE6

    Texto Negro 18,3:1 AAA

Exportar

:root {
  --color-1: #22333b;
  --color-2: #3d6b72;
  --color-3: #7fb3a8;
  --color-4: #e6d3a3;
  --color-5: #f4efe6;
}

Vista previa

Un título con tu paleta

El texto de cuerpo usa el color más oscuro sobre el más claro, para que puedas juzgar si una página creada con esta paleta se lee con facilidad.

BotónUn enlace

Texto sobre fondo 11,4:1 · enlace sobre fondo 5,2:1

Qué colores combinan como texto y fondo

Cada celda muestra texto del color de la fila sobre el color de la columna. AA (4,5:1) es el mínimo de WCAG para texto de cuerpo, AAA es 7:1 y «AA grande» (3:1) solo basta para títulos grandes o en negrita.

Texto ↓ / fondo →#22333b#3d6b72#7fb3a8#e6d3a3#f4efe6
#22333b2,2✗5,6AA8,9AAA11,4AAA
#3d6b722,2✗2,5✗4AA grande5,2AA
#7fb3a85,6AA2,5✗1,6✗2,1✗
#e6d3a38,9AAA4AA grande1,6✗1,3✗
#f4efe611,4AAA5,2AA2,1✗1,3✗
¿Te funciona esta herramienta?

Cómo se usa

  1. Pulsa Generar o la barra espaciadora hasta que veas colores que te gusten.
  2. Haz clic en 🔒 en un color para conservarlo, o escribe un código HEX o usa 🎨 para poner el tuyo; la siguiente paleta se construye alrededor de los colores bloqueados.
  3. Revisa la tabla de contraste, copia la paleta en el formato que necesites o descárgala como PNG.

Opciones explicadas

Armonía de color
Análogos usa tonos vecinos, monocromático un solo tono con distinta luminosidad, complementarios tonos opuestos, triádicos tres tonos a la misma distancia y complementarios divididos un tono más los dos que rodean a su opuesto. “Cualquiera” elige una al azar cada vez.
Colores bloqueados
Se quedan exactamente como están. El primer color bloqueado que no sea gris también fija el tono base para los demás.
Tabla de contraste
Cada celda es texto de un color de la paleta sobre otro. AA (4,5:1) es el mínimo de WCAG 2 para texto de cuerpo, AAA es 7:1 y 3:1 solo basta para texto grande o en negrita.
Enlace para compartir
Los colores se guardan en la dirección de la página (#22333b-3d6b72-…), así que puedes guardar la paleta en favoritos o enviársela a alguien.

Elegir una armonía

Armonía Aspecto Buena para
Monocromático Un tono de oscuro a claro Interfaces tranquilas, tonos de marca, gráficos con una sola serie
Análogos Tonos vecinos, p. ej., de verde azulado a azul Paletas naturales y suaves para fotos e ilustraciones
Complementarios Dos tonos opuestos Un color de acento que destaque sobre el resto
Triádicos Tres tonos separados 120° Diseños alegres y coloridos
Complementarios divididos Un tono y los dos que rodean a su opuesto Contraste con menos choque que los complementarios

Cómo hacer una paleta que funcione en una web

  1. Usa el color más claro como fondo de la página y el más oscuro para el texto: la vista previa muestra justo esta combinación.
  2. Elige el color más intenso para botones y enlaces. Comprueba su contraste con el fondo; los enlaces necesitan 4,5:1 para cumplir AA.
  3. Reserva los colores intermedios para bordes, paneles, etiquetas e ilustraciones, donde el contraste importa menos.

Preguntas frecuentes

¿Cómo se eligen los colores?

En el espacio de color OKLCH, que se parece a cómo ve el ojo la luminosidad de los colores. Los tonos siguen la armonía elegida, la luminosidad va de oscuro a claro a lo largo de la paleta y la saturación se mantiene dentro de lo que puede mostrar una pantalla sRGB normal.

¿Cómo creo una paleta a partir del color de mi marca?

Escribe tu color en cualquier casilla, bloquéalo, elige Monocromático o Análogos y pulsa Generar. Los demás colores se construyen alrededor de su tono.

¿Qué color uso para el texto?

Cada muestra indica si se lee mejor con texto negro o blanco y su relación de contraste. Para texto en colores de la paleta, usa la tabla: solo los pares marcados AA o AAA son seguros para texto de cuerpo.

¿Cómo uso la exportación a Tailwind?

Es un bloque @theme de Tailwind CSS v4. Pégalo en tu archivo CSS principal y tendrás clases como bg-palette-1 y text-palette-3.

Privacidad

Esta herramienta funciona por completo en tu navegador. Tus archivos y textos se procesan en tu dispositivo y nunca se suben a nuestros servidores.

Herramientas relacionadas