Softonic

Generador de Tinte de Color

Paso 1 / 2
Siguiente

Un tinte es el resultado de mezclar un color con blanco, cada paso se vuelve más claro. El generador toma tu color base y produce una escalera de tintes progresivamente más claros, útil para rangos de paleta de sistema de diseño (100 → 400), rellenos de fondo sutiles, estados de hover en primarios oscuros y fondos de insignias/alertas donde el color de acento necesita estar presente pero en silencio.

Cómo se generan los tintes

  1. 1

    Elige un color base

    Usa el selector de color para elegir un color base. Funciona mejor con bases de media claridad; las bases cercanas al blanco tienen poco margen para aclarar.

  2. 2

    Elige la cantidad de pasos

    Entre 3 y 20 pasos, 10 por defecto. 10 dan una escala completa de sistema de diseño; menos pasos bastan para una UI rápida.

  3. 3

    Mezcla con blanco en porcentajes crecientes

    Con 10 pasos, el primer tinte mezcla cerca del 9% de blanco y el último cerca del 91%. La interpolación ocurre directamente en el espacio RGB, por lo que la saturación se desvanece a medida que la claridad aumenta.

  4. 4

    Lee los valores hex

    Cada muestra muestra su valor hex. Úsalos en tus variables CSS, escala de Tailwind o mapa de Sass.

Ejemplo de escala de tinte de #3B82F6

La tabla siguiente muestra lo que produce la herramienta con los 10 pasos por defecto:

Paso Hex Mezcla Rol típico
0 #3B82F6 Base Marca primaria (azul-500)
1 #4C8DF6 9,1% blanco Hover ligero sobre fondo oscuro
2 #5E98F7 18,2% blanco equivalente a azul-400
3 #70A4F8 27,3% blanco
4 #82AFF9 36,4% blanco azul-300
5 #94BAFA 45,5% blanco
6 #A5C6FA 54,5% blanco
7 #B7D1FB 63,6% blanco
8 #C9DCFC 72,7% blanco Fondo sutil (azul-100/200)
9 #DBE8FD 81,8% blanco
10 #EDF3FE 90,9% blanco azul-50

Tinte + sombra = escala de sistema de diseño

Combina tintes (más claros) y sombras (más oscuras) alrededor de un solo base para formar una escala completa:

  • 50, 100, 200, 300, 400: tintes (del más claro al ligeramente más claro que la base)
  • 500: base
  • 600, 700, 800, 900: sombras (ligeramente más oscuras que la base a la más oscura)

Esto coincide con Tailwind, Material, Open Color, Radix UI y la mayoría de los sistemas de diseño populares. Las escalas de 10-11 pasos son la norma.

Dónde brillan los tintes en UI

  • Fondos de alertas e insignias: texto de error-500 sobre fondo de error-50 = reconocimiento inmediato sin gritos visuales.
  • Estados de hover en fondos oscuros: los botones sobre una superficie oscura se aclaran hacia un tinte más claro al pasar el cursor.
  • Escalas secuenciales de visualización de datos: mapeo de valor a color donde la alta magnitud está saturada y la baja magnitud se desvanece hacia el blanco.
  • Marcadores de categoría de avatar/gráfico: tinte del primario cuando no hay imagen/datos presentes.
  • Capas de superficie: fondo de tarjeta ligeramente teñido con el color de la marca para una presencia sutil de la marca.

Por qué los tintes más claros pierden saturación

El generador mezcla directamente en el espacio RGB. Al añadir blanco, la saturación cae más rápido de lo que sube la claridad percibida, por lo que los pasos superiores se ven pálidos o grisáceos. Esto es normal en la mezcla RGB:

  • Mezcla RGB (esta herramienta): simple y predecible. La saturación se desvanece de forma constante; los pasos muy claros se ven desaturados.
  • Interpolación OKLCH o LAB: la usan los programas de diseño para mantener la croma más estable al aclarar. Este generador no ofrece esos modelos; si necesitas tintes con matiz estable, genéralos en una herramienta de diseño compatible con OKLCH.
  • Aclarar en HSL: sube la claridad sin mezclar blanco; el resultado puede verse pastel en lugar de como pintura.

Suelo de tinte para UI utilizable

Los tintes muy claros (paso 8+) se acercan al blanco puro y se vuelven visualmente indistinguibles sobre un fondo blanco. Útil como:

  • Sutiles resaltados de selección detrás del texto.
  • Rayas de fila casi invisibles en tablas densas.

Pero no son buenos para botones o etiquetas donde el usuario necesita ver un color distinto. Combina tintes claros con un elemento más oscuro (borde, texto) para anclarlos.

Preguntas frecuentes

El generador mezcla directamente en RGB, y la interpolación RGB reduce la saturación a medida que sube la claridad, por lo que los pasos superiores derivan hacia el blanco. Interpolar en OKLCH o LAB, en cambio, conserva un indicio visible del matiz base; usa una herramienta de diseño compatible con OKLCH cuando eso importe.

Similar pero no idéntico. Mezclar con blanco reduce tanto la saturación como la claridad proporcionalmente; el ajuste de claridad HSL eleva L de forma independiente. Los tintes se sienten más naturales (como pintura); la claridad HSL puede empujar a pasteles poco realistas.

Sí, el modo oscuro generalmente necesita una “escalera de claridad” diferente porque los fondos ya son oscuros. Muchos sistemas invierten la escala (el 50 del modo oscuro es el equivalente blanco-sobre-oscuro del 900 del modo claro).

Genera una escalera de tinte de 5 pasos (50-500) y una escalera de sombra de 5 pasos (500-900) a partir de la misma base. Concatenar para una escala completa de 10-11 pasos de sistema de diseño.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Simplificador de Álgebra Booleana

Evalúa una expresión booleana para cada combinación de entradas y muestra la tabla de verdad completa. Admite hasta cinco variables y los operadores &, |, ! y ^.