Paleta de colores

Generador de gama de colores

Elige un color y obtén al instante toda su gama, del tono más claro al más oscuro. Toca cualquier tono para copiar su código HEX.

Gama de 50 a 950

Once tonos con la misma familia de color, ordenados como en Tailwind. Tu color queda marcado en el tono que le corresponde.

Tintes (con blanco)

Toca un tono para copiar su HEX.

Sombras (con negro)

Matices (con gris)

Exportar la gama

Qué es una gama de colores

Es la serie de tonos que salen de un mismo color: desde una versión casi blanca hasta una casi negra. Todos comparten el mismo tono base, por eso combinan entre sí sin esfuerzo.

Tintes, sombras y matices

Un tinte es el color mezclado con blanco: más claro y suave. Una sombra es el color mezclado con negro: más oscuro y profundo. Un matiz es el color mezclado con gris: más apagado y elegante.

Cómo usar una gama en tu diseño

Usa los tonos claros (50 a 200) para fondos, los medios (400 a 600) para botones y enlaces, y los oscuros (700 a 950) para textos y bordes. Con una sola gama tienes una interfaz ordenada y coherente.

Preguntas frecuentes

¿Cómo se calcula la gama?

Usamos el espacio de color OKLCH, que imita cómo percibe el ojo la luminosidad. Así los pasos entre tonos se ven parejos, sin saltos bruscos.

¿Qué significan los números 50 a 950?

Es la escala que usan Tailwind CSS y muchos sistemas de diseño: 50 es el tono más claro y 950 el más oscuro. Tu color queda en el número que mejor le corresponde.

¿Puedo usar la gama en Tailwind o en CSS?

Sí. Escribe un nombre, elige el formato y copia el código: variables CSS listas para pegar o el bloque de colores para la configuración de Tailwind.

¿Qué diferencia hay entre gama y paleta de colores?

Una gama son tonos de un mismo color. Una paleta mezcla colores distintos que combinan. Muchas paletas usan una gama para los fondos y textos, y uno o dos colores de acento.

Otras guías y herramientas