Que hace el generador de paletas de colores
Esta herramienta toma un color base y construye una escala completa de once tintes y sombras a su alrededor, numerados del 50 (el mas claro) al 950 (el mas oscuro). Es el mismo tipo de rampa de color que ves en los sistemas de diseno modernos, generada en segundos en lugar de mezclada a mano. Ayuda a los desarrolladores front-end que necesitan una paleta lista para Tailwind, a los disenadores que crean tokens para una marca y a cualquiera que tenga un solo color favorito y quiera un rango coherente de claro a oscuro que lo acompane.
Como usarlo
- Elige un color de inicio con el selector de color, o escribe un codigo hex directamente en el campo.
- La herramienta construye al instante once tonos desde el claro (50) hasta el oscuro (950) a partir de tu color base.
- Haz clic en cualquier muestra individual para copiar ese codigo hex en tu portapapeles.
- Usa la accion de copiar todo para tomar todos los valores de la escala de una vez.
- Pega los codigos en tu configuracion de Tailwind, sistema de diseno u hoja de estilos.
Un ejemplo rapido
Introduce un azul de marca como #2563eb y obtendras una rampa completa del 50 al 950, desde un tinte palido para fondos hasta una sombra profunda para texto y bordes. Reserva los pasos mas claros (50 al 200) para rellenos y estados hover, tu color base alrededor de 500 o 600 para botones, y los pasos mas oscuros para el contraste. Todo se ejecuta en tu navegador, se mantiene privado sin subir nada y es completamente gratis sin registro.
Preguntas frecuentes
- Que significa la escala del 50 al 950?
- Esos numeros son los pasos estandar de escala de color que usan los sistemas de diseno como Tailwind. 50 es el tinte mas claro y 950 es la sombra mas oscura, con tu color base situado en algun punto medio de los once pasos.
- Puedo usar estos colores en Tailwind?
- Si. Los once valores se asignan directamente a las claves del 50 al 950 de Tailwind, asi que puedes pegarlos directamente en tu configuracion de tema o en cualquier archivo de tokens de diseno.
- Como copio los colores?
- Haz clic en cualquier muestra individual para copiar su codigo hex, o usa la accion de copiar todo para tomar la escala completa de una vez. Desde ahi puedes pegarlos en cualquier lugar que acepte valores hex.