Generador de tonos y tintes de color
Pega un color y obtén una escala completa de tinte a sombra: Tintes hacia el blanco, Sombras hacia el negro, ambos en vivo. Calculado en tu navegador, nunca se envía.
Notas para desarrolladores
Mezcla RGB lineal clásica, no una mezcla por luminosidad HSL: tinte_i = base + (blanco - base) * i/pasos, sombra_i = base + (negro - base) * i/pasos, canal por canal en sRGB. colorjs.io solo analiza el color pegado. La mezcla en sí es una interpolación simple, sin otra biblioteca de color. En i = pasos, el último tinte es exactamente blanco y la última sombra exactamente negra, sin deriva de redondeo. Ambas escalas siempre se muestran juntas: no hay selector de dirección ni una tercera escala de «tonos» (mezcla hacia el gris). swatchFormat elige un formato CSS a la vez para cada muestra; pega el valor de una muestra en el Conversor de colores para ver todos los formatos.
Opciones
- Pasos — Número de muestras generadas en cada una de las escalas de Tintes y Sombras. 5 a 15, 10 por defecto: una escala de 5 pasos sirve para una comprobación rápida, de 10 a 15 para una paleta completa de tokens de diseño.
- Formato de muestra — El formato CSS mostrado y copiado para cada muestra, en ambas escalas: HEX, RGB o HSL. HEX por defecto, el formato universal listo para pegar.
Herramientas CSS relacionadas
Hub: Herramientas de Color y CSS. Convierte una muestra a todos los formatos con el Conversor de colores y comprueba el contraste con el Comprobador de contraste. Reduce y formatea hojas de estilo con Minificar CSS y Formatear CSS.
FAQ del generador de tonos y tintes de color
Generador local de escalas de tintes y sombras
¿Cuál es la diferencia entre Tintes y Sombras?
Los Tintes mezclan tu color base hacia el blanco; las Sombras lo mezclan hacia el negro. Ambas escalas siempre se generan juntas a partir del mismo color base y número de pasos.
¿Cuántos pasos puede tener cada escala?
De 5 a 15 pasos por escala, 10 por defecto, el tamaño de escala de tokens de diseño más reconocido. Ambas escalas siempre comparten el mismo número de pasos.
¿Es lo mismo que un generador de "tonos"?
No. Los tonos se mezclan hacia el gris, algo que esta herramienta no genera. Solo produce tintes hacia el blanco y sombras hacia el negro, la definición clásica.
¿Mis colores se suben a algún sitio?
No. El análisis y la mezcla se ejecutan completamente en tu navegador. FastMinify nunca envía el color pegado a un servidor.
Herramientas color y CSS
Comprobación de contraste WCAG pegada localmente con sintaxis de color CSS moderna — vistas de par y matriz, nunca se sube.
Explorar otras categorías de herramientas
- Minificar
Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.
- Desminificar
Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.
- Conversión
Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.
- Codificación
Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.
- Serialización
Serializa y deserializa estructuras PHP junto a los flujos JSON.
- Herramientas JSON
Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.
- Herramientas SVG
Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.
- Embellecer
Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.
- Preprocesadores CSS
Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.
- DevOps e Infra
Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.
- CI/CD
GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.
- Logs y observabilidad
JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.
- Kubernetes
Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.
- Red / IP
CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.
- Seguridad y tokens
JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.
- API y esquemas
Herramientas OpenAPI para formatear, validar y analizar tus specs.
- Herramientas HTTP
cURL, mensajes HTTP, URLs, HAR y Cookie / Set-Cookie pegados en el navegador — formatear e inspeccionar, nunca se envían.
- Herramientas SEO / Web
Genera meta tags, Open Graph y Twitter Card localmente — vistas simuladas desde tus entradas, nunca fetch de tu sitio en vivo.
- Utilidades para desarrolladores
Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.
- Texto y Markdown
Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.
- IA y LLM
Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.
- Datos de prueba
Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.
- Etiquetas de código de barras
Dibuja etiquetas Code 128, EAN-13 y UPC-A en el navegador — descarga PNG y SVG, no es un lookup GS1.