Generador de paletas degradadas
Crea una escala de color suave a partir de un color base o entre varios colores. Copia cualquier muestra, obtén el CSS del degradado y exporta a CSS, Tailwind, SCSS o JSON.
Cargando Generador de paletas degradadas…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de paletas degradadas
- 1
Abre Generador de paletas degradadas en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Los sistemas de diseño necesitan más de un tono de cada color: tintes claros para fondos, tonos medios para botones y sombras oscuras para texto y estados hover. Este generador de paletas degradadas crea una escala de color suave a partir de un color base, o una serie de pasos mezclados entre los colores que elijas, y la exporta directamente a tu código.
Cómo crear una escala de color
- Elige un color base.
- Elige el modo: scale para tonos de claro a oscuro de un color, o steps para mezclar varios colores que añadas.
- Añade o quita colores y define el número de pasos.
- Pon nombre a la paleta, haz clic en cualquier muestra para copiar su código HEX y copia el CSS del degradado.
- Exporta la paleta como variables CSS, color de Tailwind, variables SCSS o JSON.
Usar una escala en un sistema de diseño
Una convención habitual, usada por Tailwind, nombra los tonos de 50 (el más claro) a 900 o 950 (el más oscuro):
- 50 a 100: fondos de página y de tarjetas.
- 200 a 300: bordes y rellenos sutiles.
- 500 a 600: botones principales y enlaces.
- 700 a 900: estados hover y texto sobre fondos claros.
Consejos
- Comprueba el contraste de cualquier tono que uses detrás de texto con el comprobador de contraste.
- Mantén pasos uniformes para que los estados hover y activo se sientan coherentes.
- Mezcla tonos cercanos para degradados naturales; los tonos lejanos pueden pasar por gris.
- Nombra los colores por su función en el código (primary, accent) para que un cambio de marca solo toque un sitio.
Para combinaciones armoniosas de colores distintos, usa el generador de paletas de colores. Para diseñar un único fondo degradado, prueba el generador de degradados CSS.
Preguntas frecuentes
¿Qué es una escala de color?
Una serie de tonos de un color, de claro a oscuro, que se usa de forma coherente en fondos, bordes, botones y texto.
¿Puedo exportar una escala de color para Tailwind?
Sí. Elige la exportación Tailwind para obtener una entrada de color que puedes pegar en tu configuración de Tailwind.
¿Qué diferencia hay entre los modos scale y steps?
Scale crea tonos más claros y más oscuros de un color base. Steps mezcla varios colores que eliges, en tantos pasos como indiques.
¿Cómo copio un solo color?
Haz clic en cualquier muestra para copiar su código HEX.
¿Qué formatos puedo exportar?
Variables CSS, configuración de Tailwind, variables SCSS y JSON, además del CSS del degradado.
¿Es gratis?
Sí, sin registro.