Generador de tonos de color
Genera una gama completa de tintes y sombras a partir de un solo color — elige el paso de oscurecimiento/aclarado y la cantidad de tonos, y copia cualquier valor al instante.
Elige un color base, un porcentaje de paso y una cantidad — cada tinte y sombra se calcula al instante en tu navegador.
Acerca de Generador de tonos de color
El Generador de Tonos de Color expande un solo color en una gama completa de tintes y sombras. Dale un color base y producirá tintes progresivamente más claros en un lado y sombras progresivamente más oscuras en el otro: la clásica rampa estilo 50 a 900 usada en los sistemas de diseño modernos.
Dos controles definen el resultado: el porcentaje de paso establece cuánto se aclara u oscurece cada tono (1-25% por paso), y el conteo determina cuántos tintes y sombras aparecen a cada lado del color base, hasta diez. Una franja de degradado muestra toda la rampa de un vistazo.
La generación ocurre al instante en tu navegador mientras escribes: nada se envía a un servidor. Copia cualquier valor individual, la lista completa, o toda la rampa como variables CSS, listas para incorporar a un archivo de tokens de diseño o a una escala de color estilo Tailwind.
Cómo usar Generador de tonos de color
- Elige un color base con el selector o escribe un valor; haz clic en "Color aleatorio" para inspirarte.
- Ajusta el porcentaje de paso para controlar cuánto se aclara u oscurece cada tono.
- Elige el número de tonos para decidir cuántos tintes y sombras aparecen a cada lado.
- Haz clic en una muestra para copiarla, o usa "Copiar todo" y "Copiar variables CSS" para toda la rampa.