Generador de tonos, matiz y tonalidad

Generador de tonos y tonalidades de color

Elige un color en hexa o RGB y obtén inmediatamente 10 tonos (tu color mezclado hacia blanco) y 10 tonos oscuros (mezclado hacia negro) como muestras visuales. Haz clic en cualquier muestra para copiar su código en hexa, o exporta el conjunto completo como propiedades CSS personalizadas, variables SCSS, JSON o una lista de hexa simple.

Cómo Usar

1. Elige un color base con el selector de colores, o pega cualquier valor en hexa (de 3 o 6 dígitos) en el campo de hexa.
2. Opcional: cambia el nombre de la variable (utilizado en las claves de CSS/SCSS/JSON exportadas).
3. Elige un método de mezcla. OKLCH proporciona el gradiente más suave, HSL es el enfoque clásico de la web y RGB es la mezcla lineal más simple.
4. Elige un formato de exportación. La exportación se actualiza en tiempo real mientras cambias cualquier opción.
5. Haz clic en cualquier muestra para copiar su código en hexa, o utiliza los botones Copiar / Descargar en el panel de código de exportación.

Características

• 10 tonos + 10 tonos oscuros – dos filas de muestras con incrementos de 10%, desde un mezcla suave de 10% hasta una mezcla casi pura de 100%.
• Tres métodos de mezcla – OKLCH para pasos perceptualmente uniformes, HSL para cambios de luminosidad que conservan el tono, o mezcla directa en RGB.
• Muestras clicables – cada celda muestra su código en hexa y lo copia al portapapeles con un solo clic.
• Varios formatos de exportación – propiedades CSS personalizadas, variables SCSS, paleta en JSON o una lista de hexa simple y legible.
• Previsualización en tiempo real – cada cambio en el color, nombre, método o formato vuelve a renderizar las muestras y el código de forma inmediata.
• Descarga la exportación – guarda la paleta generada en un archivo con la extensión adecuada para tu formato.