Color Palette Generator
Genera una paleta completa de 10 tonos a partir de cualquier color base, al estilo Tailwind CSS.
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.