Generador de Paletas de Color
Elige un color base y genera al instante una paleta de tonos que va de claro a oscuro, lista para copiar en tu sistema de diseño.
🔒 Procesado localmente en tu navegador
Loading…
Cómo usarlo
- Escribe un código hexadecimal en el campo "Color base", o haz clic en el selector de color para elegir uno visualmente.
- En cuanto se reconoce un color válido, aparece automáticamente debajo una paleta completa de tonos, sin necesidad de pulsar ningún botón.
- La paleta va desde un tono muy claro hasta uno muy oscuro, todos con el mismo matiz que tu color base.
- Haz clic en cualquier muestra para copiar su código hexadecimal al portapapeles; una breve confirmación de "¡Copiado!" te avisa de que funcionó.
Características
- Genera una escala suave de 9 tonos de claro a oscuro a partir de cualquier color base
- Mantiene el mismo matiz y saturación en cada tono, igual que las propias escalas de color de Tailwind
- Incluye tu color base exacto en la paleta, no solo una aproximación
- Copia con un clic el código hexadecimal de cualquier muestra
- 100 % del lado del cliente: tus colores nunca salen de tu navegador
Preguntas frecuentes
¿Esta herramienta envía mi color a algún sitio?
No. Toda la paleta se genera con simples cálculos de JavaScript directamente en tu navegador; nunca se sube ni se envía nada a un servidor.
¿Cómo se calculan los tonos?
La herramienta convierte tu color base a HSL y luego mantiene fijos el matiz y la saturación mientras hace variar la luminosidad de forma uniforme, desde muy claro hasta muy oscuro. Tu color base exacto se coloca en el medio de la escala.
¿Puedo usar estas paletas en Tailwind u otros sistemas de diseño?
Sí. La paleta sigue la misma idea que las escalas de color 50/100/.../900 de Tailwind: una rampa de claro a oscuro de un solo matiz, así que puedes copiar los códigos hexadecimales directamente en tu propio tema o variables CSS.
¿Qué formatos de color puedo escribir?
Solo códigos hexadecimales, con o sin el # inicial, en formato abreviado de 3 dígitos (como #abc) o de 6 dígitos (como #3b82f6). Usa el selector de color si prefieres elegir de forma visual.
¿Por qué veo un mensaje de error?
El texto que escribiste no coincide con un formato de color hexadecimal reconocible. Asegúrate de que se parezca a #3b82f6 (o 3b82f6, o la forma abreviada #abc).