Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de tonos

Color Shades Generator

Genera escalas de 3 a 20 tonos alrededor de tu color base —anclado al centro, sin llegar a negro ni blanco puros— y expórtalas como variables CSS.

Ruta de la tarea / de la entrada al resultado

Define el color base

Funciona en local · No se sube nada

Cómo funciona Generador de tonos, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo generar una escala de tonos de color

  1. 01

    Define el color base

    Introduce un valor hexadecimal en Color base: #RGB, #RGBA, #RRGGBB y #RRGGBBAA funcionan, y el campo abre con #6D5EF8. El color base siempre queda en el centro de la escala terminada.

  2. 02

    Elige el número de tonos

    Define Número de tonos con un entero de 3 a 20; el valor por defecto es 9. Una cantidad impar equilibra los lados más oscuros y más claros de forma pareja alrededor de la base; una cantidad par sigue centrando la base y da al lado claro una muestra extra.

  3. 03

    Genera la rampa

    Pulsa Generar tonos. La paleta va de tonos profundos a través de tu color base hasta tintes claros, y cada muestra está numerada y etiquetada con su valor hexadecimal, así que la posición 1 es siempre el paso más oscuro.

  4. 04

    Comprueba el comportamiento de la mezcla

    Los tonos por debajo de la base se mezclan hacia el negro y los tintes por encima hacia el blanco, pero la mezcla nunca recorre más del 78% del camino hacia ningún extremo. Los pasos finales se mantienen cromáticos y utilizables en lugar de colapsar en casi negro o casi blanco.

  5. 05

    Carga la escala de ejemplo

    Pulsa Cargar ejemplo para generar siete tonos alrededor de #0EA5E9: una ejecución de referencia completa que puedes inspeccionar antes de introducir tu propio color de marca. Restablecer devuelve la base #6D5EF8 y la cantidad de 9.

  6. 06

    Copia o descarga los tokens

    Pulsa Copiar salida para copiar un bloque :root de propiedades personalizadas --toolars-shade-1 …, o Descargar para guardarlo como toolars-color-shades.css, listo para pegar en una hoja de estilos. Cada tarjeta de muestra también muestra su valor hexadecimal para copias puntuales.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de tonos usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de tonos en realidad

Un color de marca llega como un único valor hexadecimal, pero una interfaz real necesita toda una escala: un estado hover más oscuro, un tinte de fondo sutil, un borde a un paso de la base. Elegir esos pasos a ojo deriva entre pantallas y entre miembros del equipo. Generador de tonos interpola la rampa de forma determinista alrededor de tu color base, manteniendo la base fijada en el centro y los extremos lejos del negro y el blanco puros. Exporta el resultado como propiedades personalizadas de CSS con nombres numerados estables, listas para un archivo de tokens de diseño: calculado localmente, nunca subido.

Preguntas frecuentes

¿Cuántos tonos puede tener una escala?
Entre 3 y 20, definido con el campo Número de tonos; el espacio de trabajo usa 9 por defecto. Una cantidad fuera de ese rango se rechaza con un mensaje que nombra el límite.
¿Cómo se calcula la escala?
De forma determinista: los tonos por debajo de la base se mezclan hacia el negro, los tintes por encima hacia el blanco, y el propio color base siempre ocupa la posición central. La mezcla está limitada al 78% hacia cualquier extremo, así que ningún paso llega al negro ni al blanco puros y cada parada sigue siendo utilizable.
¿Qué cambia con un número par de tonos?
El color base sigue ocupando la posición central, pero los dos lados no pueden reflejarse con exactitud: una cantidad par da al lado más claro una muestra más que al lado más oscuro. Elige una cantidad impar como 9 u 11 cuando quieras una rampa perfectamente simétrica.
¿La escala conserva la transparencia?
Sí. Si el color base lleva un byte alfa — por ejemplo #6D5EF8CC — el mismo alfa se mantiene en toda la rampa, y los valores hexadecimales exportados ganan el byte alfa siempre que el alfa de la base sea inferior a 1.
¿Qué formato usa la exportación?
Un bloque :root de propiedades personalizadas de CSS llamadas --toolars-shade-1 hasta --toolars-shade-N con los valores hexadecimales, descargable como archivo .css o copiable al portapapeles. Cada tarjeta de muestra también muestra su valor hexadecimal para copiarlo directamente.
¿El color se envía a alguna parte?
No. Toda la rampa se calcula dentro de esta pestaña del navegador, lo que introduces y los resultados nunca salen de ella, y no se necesita cuenta.

Sigue leyendo

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear