Generador de tonos de color Genera tonos más oscuros de cualquier color con un recuento de pasos ajustable.
Generador de tonos de color
Genera tonos más oscuros de cualquier color con un recuento de pasos ajustable.
Selecciona el color base
Elige cualquier color como punto de partida.
Ajusta los pasos
Elige cuántas sombras progresivamente más oscuras deseas generar.
Copia las sombras
Copia sombras individuales o el conjunto completo.
What Is Generador de tonos de color?
Un generador de matices de color crea versiones progresivamente más oscuras de cualquier color base reduciendo sistemáticamente su luminosidad en el espacio de color HSL. Los matices conservan el matiz y la saturación originales mientras se acercan al negro, creando un conjunto coherente de variantes más oscuras. Esto es fundamental para los sistemas de diseño donde necesitas múltiples intensidades de un color de marca - desde el original para botones principales hasta versiones profundas para texto, bordes y estados de desplazamiento. A diferencia de simplemente agregar negro en RGB (lo que puede cambiar el matiz percibido), el enfoque basado en HSL conserva la identidad del color a lo largo de toda la gama de matices. La cantidad de pasos ajustable te permite crear desde un conjunto simple de tres matices hasta una escala completa de quince pasos.
Why Use Generador de tonos de color?
-
La oscurecimiento basado en HSL conserva la consistencia del matiz en todas las sombras
-
Cantidad de pasos ajustable (3 a 15) para cualquier caso de uso
-
Cada sombra muestra su porcentaje de luminosidad como referencia
-
Perfecto para crear escalas de colores de sistemas de diseño
-
Copia con un solo clic para sombras individuales o conjunto completo
Common Use Cases
Tokens de diseño
Genera escalas de sombras numeradas (600, 700, 800, 900) para sistemas de diseño.
Estados de desplazamiento
Crea estados de desplazamiento de botones más oscuros que sean coherentes con el color base.
Colores de texto
Encuentra sombras oscuras de colores de marca para títulos y texto del cuerpo.
Bordes y sombras
Obtén variantes más oscuras para bordes, contornos y colores de sombra.
Technical Guide
El generador de matices convierte el color base a HSL y crea N matices reduciendo la luminosidad desde el valor base hasta casi cero. La fórmula para cada matiz es: L = luminosidadBase × (1 - i/(N-1)), donde i va desde 0 a N-1. Esto crea una distribución uniforme desde el color original hasta cerca del negro. El matiz y la saturación permanecen constantes, asegurando que todos los matices sean perceptualmente del mismo color en diferentes niveles de oscuridad. En teoría del color, un matiz es específicamente un color mezclado con negro, a diferencia de una tintura (mezclada con blanco) o un tono (mezclado con gris). El enfoque HSL es más uniforme perceptualmente que el oscurecimiento RGB, lo que requeriría ajustar proporcionalmente los tres canales.
Tips & Best Practices
-
1Utiliza 9 pasos para crear una escala de sistema de diseño estándar (100-900)
-
2La sombra más oscura funciona bien para texto en fondos claros
-
3Combina generadores de sombras y tintes para obtener una escala de colores completa
-
4Las sombras de colores cálidos (rojos, naranjas) son excelentes como fondos oscuros
-
5Prueba las sombras oscuras para asegurarte de que tengan suficiente contraste con el fondo previsto
Related Tools
Selector de colores
Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.
🎨 Color Tools
Generador de Paleta Monocroma
Genera una paleta de colores monocroma a partir de cualquier color base.
🎨 Color Tools
Generador de tonos claros de colores
Genera tonos más claros de cualquier color con un recuento de pasos ajustable.
🎨 Color Tools
Mezclador de Colores
Combina dos colores con una proporción ajustable y observa el gradiente completo.
🎨 Color Tools
Comprobador de Relación de Contraste
Verifica las relaciones de contraste WCAG entre colores de primer plano y fondo.
🎨 Color ToolsFrequently Asked Questions
Q ¿Cuál es la diferencia entre una sombra y un tinte?
Q ¿Por qué no simplemente oscurecer en RGB?
Q ¿Cuántos pasos debo utilizar?
About This Tool
Generador de tonos de color is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.