Generador de tonos de color

Una escala de color lista, no solo un color

Los sistemas de diseño modernos rara vez usan un solo color plano; usan una escala, una familia de versiones más claras y más oscuras del mismo tono numeradas del 50, el tinte más pálido, al 900 o 950, el matiz más profundo, siendo el 500 normalmente el color que todo el mundo llamaría por el nombre del color. Tailwind CSS popularizó esta numeración, y ahora también es habitual en herramientas de diseño, porque da un conjunto de opciones coherente y predecible para fondos, bordes, estados al pasar el cursor y texto sobre un color de marca principal.

Cómo se construye la escala

Tu color base se convierte en el paso 500. Los pasos por debajo, del 50 al 400, se mezclan progresivamente hacia el blanco para crear tintes; los pasos por encima, del 600 al 950, se mezclan progresivamente hacia el negro para crear matices. El tono se mantiene reconocible en toda la escala en lugar de saltar entre colores sin relación, así que el 100 sigue relacionándose claramente con el 900 aunque uno sea casi blanco y el otro casi negro.

Para qué sirve cada rango

• 50 a 200: fondos sutiles, estados al pasar el cursor en interfaz clara, y fondos de insignias.
• 300 a 500: bordes, iconos y elementos de interfaz secundarios, con el 500 usado a menudo como marca por defecto.
• 600 a 800: fondos de botones y texto que necesita destacar sobre una página clara.
• 900 a 950: texto del cuerpo teñido con el tono de marca, o fondos en un tema oscuro.

Cómo usarla

Copia el bloque de variables CSS generado directamente en una hoja de estilos, o usa los números como referencia mientras escribes valores en una herramienta de diseño o una configuración de Tailwind. Como es una escala matemática, no todos los pasos tienen garantizado cumplir los requisitos de contraste para texto; comprueba parejas concretas con el comprobador de contraste antes de usarlas para el cuerpo del texto.

Límites

La escala mezcla en línea recta hacia el blanco y el negro puros, algo simple y predecible pero no idéntico a cómo ajusta cada sistema de diseño comercial sus propias escalas, algunos de los cuales también desplazan un poco la saturación en los extremos. Todo se calcula en tu navegador.