a11y.skipToMainContent
1

Generador de color Shades

Introducir cualquier color hex y generar instantáneamente 10 tonos (50-950) en el estilo Tailwind CSS — ver swatches, hacer clic para copiar y exportar configs.

Was this tool helpful?
Send Image to:
Advertisement

How to use Color Shades Generator

  1. Introduzca un color hex o use el selector de color.
  2. Vea la escala de 10 combos generada de 50 a 950.
  3. Haga clic en los relojes individuales para copiar códigos hex, o utilice los botones de exportación para un config completo.

¿Cómo se llama?

Crear escalas de colores consistentes es esencial para sistemas de diseño. Esta herramienta toma cualquier color de hex base y genera un conjunto completo de 10 tonos de 50 (mejor) a 950 (mejor), siguiendo la convención de escala de colores de Tailwind CSS. Cada tono se muestra como un reloj de color con su código hex. Haga clic en cualquier swatch para copiar el hex a su portapapeles. Exportar la paleta completa como valores de hex, propiedades personalizadas de CSS o un objeto de configuración de Tailwind CSS listo para usar
Advertisement

FAQ

¿Cómo se calculan los tonos?
Las formas se calculan mezclando el color base con blanco (para tonos más ligeros 50-400) y negro (para tonos más oscuros 600-950), con interpolación perceptualmente equilibrada.
¿Puedo usar esto para mi sistema de diseño?
Sí — la exportación de config de Tailwind está lista para pegar en su viento de cola. config.js para colores de marca personalizados.

Related tools

Author

AR
Aisha Rahmani"The Visual Storyteller"

Design Technologist & Media Specialist

Aisha bridges the gap between pixels and code. With expertise in image processing, SVG optimization, and video compression, she helps creators, designers, and marketers prepare media that looks great and loads fast. She has spoken at design conferences about accessible visual content and has helped agencies reduce page-weight budgets by up to 60 percent without sacrificing creative quality.

📖 Color Shades Generator on Wikipedia·Image Tools on Wikipedia·Color Shades Generator on Britannica

People also use

← Back to Image Tools · All tags
Advertisement