Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
Acerca de esta herramienta
El Extractor de Paleta de Colores genera una escala de 10 pasos para sistemas de diseño a partir de cualquier color base, coincidiendo con las convenciones de sombras 50–900 usadas por Tailwind CSS, Material Design y frameworks similares.
Cada muestra en la escala generada muestra sus valores hex, RGB y HSL. El color del texto en cada muestra se ajusta automáticamente a blanco u oscuro según la luminancia.
Cómo usar
- Elige un color base con el selector de color o escribe un valor hex.
- La escala de 10 pasos (50–900) se genera al instante, cubriendo todo el rango de luminosidad.
- Usa los valores hex, RGB o HSL para aplicar colores en tu sistema de diseño o variables CSS.
Casos de uso
Los equipos de diseño generan escalas completas de color como extensiones de configuración de Tailwind o propiedades CSS personalizadas. Los desarrolladores frontend construyen componentes UI accesibles donde la sombra 50 proporciona un fondo claro y 900 un color de texto oscuro.
Preguntas frecuentes
- ¿En qué se diferencia esta escala de los "tonos" en otras herramientas? — Esta herramienta genera una escala fija de 10 pasos (50, 100, 200, … 900) anclada en valores de luminosidad específicos, siguiendo convenciones comunes de sistemas de diseño.
- ¿Cambiar la saturación afecta la escala? — La saturación de tu color base se preserva en todos los pasos — solo cambia la luminosidad.
- ¿Puedo usar estos colores directamente en Tailwind CSS? — Sí. Copia los valores hex de cada nivel de sombra y agrégalos a tailwind.config.js bajo theme.extend.colors con los números de sombra como claves.