Tintes, sombras y tonos explicados

La primera paleta de verdad que publiqué tenía exactamente cinco colores, y cuatro de ellos eran el mismo azul. No lo planeé así; simplemente no dejaba de necesitar «una versión un poco más clara de este para el fondo de la tarjeta» y «una más oscura para el borde» y «algo apagado para el botón deshabilitado». Lo que en realidad estaba haciendo, sin tener el vocabulario para ello, era crear tintes, sombras y tonos. Una vez que aprendí que esas tres palabras describen tres operaciones precisas, el trabajo con paletas dejó de ser ensayo y error y pasó a ser algo más parecido a la aritmética.

Esta guía va sobre esa aritmética. Qué son de verdad los tintes, las sombras y los tonos, por qué el valor y la saturación son dos diales distintos y no uno, y cómo convertir un solo tono en una escala tonal limpia sobre la que de verdad puedas construir una interfaz. Todo lo de aquí se corresponde directamente con los controles HSL de el generador de paletas de colores, así que puedes seguirlo con números reales en lugar de con sensaciones.

Las definiciones en una frase, y luego el matiz

Aquí van las definiciones, reducidas a lo esencial:

• Un tinte es un tono más blanco. Se vuelve más claro y delicado. El rojo se convierte en rosa.
• Una sombra es un tono más negro. Se vuelve más oscuro y profundo. El rojo se convierte en granate.
• Un tono apagado es un tono más gris. Se vuelve apagado y más polvoriento sin volverse necesariamente mucho más claro ni más oscuro. El rojo se convierte en un teja o un rosa.

Esa es la diferencia entre tinte, sombra y tono en un solo respiro, y la mayoría de los artículos se quedan ahí. Pero la parte interesante es lo que los tres tienen en común: cada uno de ellos reduce el croma, la pureza cromática del tono. Un tono plenamente saturado es lo más intenso que llegará a ser nunca. En el momento en que mezclas cualquier neutro (blanco, negro o gris), le sacas intensidad. Esto está bien documentado en la referencia estándar sobre tinte, sombra y tono: añadir blanco, negro o gris reduce todo el croma del color, aunque muevan la luminosidad en direcciones distintas.

Así que el modelo mental no es «tinte = más claro, sombra = más oscuro, tono = apagado» como tres efectos sin relación. Es un solo efecto —diluir un tono puro con neutro— visto desde tres direcciones. Ese reencuadre es lo que hace que encaje la siguiente idea.

El valor y la saturación son dos perillas distintas

Lo más útil que puedes interiorizar es que la luminosidad y la saturación son independientes. Los principiantes tratan «hazlo más claro» y «hazlo menos intenso» como el mismo gesto, y por eso sus paletas se vuelven cretáceas y planas. No son el mismo gesto. Son dos diales separados, y los tintes, las sombras y los tonos no son más que distintas combinaciones de cómo los giras.

Por eso justamente HSL es el modelo de color que vale la pena aprender. HSL son las siglas en inglés de tono, saturación y luminosidad, y divide el color en tres números que puedes ajustar de uno en uno:

• El tono (hue) es el ángulo en la rueda cromática, 0–360°. El rojo está en torno a 0, el verde cerca de 120, el azul cerca de 240. Los tintes, sombras y tonos generalmente dejan el tono en paz: no estás cambiando qué color es, solo lo puro y lo claro que es.
• La saturación (saturation) va de 0 a 100%. En 100% el color está a plena intensidad; en 0% es un gris puro sin nada de tono. Este es tu dial de croma.
• La luminosidad (lightness) va de 0 a 100%. En 0% obtienes negro sea cual sea el tono, en 100% obtienes blanco sea cual sea el tono, y 50% es más o menos donde vive la versión pura y vívida del color.

Con ese vocabulario, las tres operaciones se vuelven precisas. Un tinte es sobre todo subir la luminosidad hacia 100%. Una sombra es sobre todo bajar la luminosidad hacia 0%. Un tono apagado es sobre todo bajar la saturación hacia 0% mientras mantienes la luminosidad más o menos donde está. La referencia de MDN sobre la notación HSL es un buen sitio para confirmar la sintaxis si quieres escribir esto como CSS.

Una nota al pie precisa, porque hace tropezar a la gente. La «L» de HSL es luminosidad (lightness), no «valor» ni «brillo». Existe un modelo hermano, HSB/HSV, donde el tercer canal es el valor, y se comporta de forma distinta: en HSB, 100% de valor a plena saturación te da el color puro y vívido, mientras que en HSL 100% de luminosidad siempre da blanco. Si alguna vez sacaste un color de Photoshop (que usa HSB) y se veía raro en CSS (que usa HSL), ese desajuste es el porqué. Para construir escalas tonales, HSL es el modelo más amable precisamente porque la luminosidad recorre limpiamente del negro al blanco.

Cómo aclarar u oscurecer un color sin estropearlo

Ahora la parte práctica, porque hay una forma correcta y una incorrecta de hacer esto.

La forma ingenua de aclarar un color es arrastrar la luminosidad hacia arriba y darlo por hecho. El problema es que, a medida que un color se acerca al blanco, mantener la saturación constante hace que se vea fino y desvaído: una versión pálida y anémica de sí mismo. La solución a la que los diseñadores con experiencia recurren casi por reflejo: a medida que subes la luminosidad, sube también un poco la saturación, y a veces desplaza el tono unos grados. Los tintes claros suelen verse más ricos con algo más de saturación que el tono medio, no con menos.

Oscurecer tiene la trampa simétrica. Baja la luminosidad hacia 0 dejando la saturación en paz y los colores oscuros se vuelven turbios y muertos: un casi-negro plano y sin vida. Las buenas sombras oscuras suelen querer que su saturación aumente a medida que se oscurecen, y con frecuencia un pequeño desplazamiento de tono hacia el azul o el rojo para que se sientan intencionadas en lugar de como si alguien hubiera apagado la luz sin más. Esta es la razón principal de que las escalas hechas a mano se vean más vivas que las generadas interpolando ingenuamente hacia el negro.

Así que la respuesta honesta a cómo aclarar u oscurecer un color es: mueve la luminosidad como acción principal, pero no congeles los otros dos canales. La lectura HSL de la herramienta hace que esto sea fácil de notar: cambia un número, observa la muestra, y aprenderás enseguida cuánta saturación necesita un tono dado en cada extremo de la escala.

Construir una escala monocromática limpia a partir de un solo tono

Aquí es donde todo se vuelve útil. Una escala de color monocromática es un solo tono expandido en una escalera completa de tintes, sombras y tonos, y es la columna vertebral de prácticamente toda interfaz real. Cuando eliges la regla monocromática en el generador de paletas de colores, esta es la estructura que está generando: un tono, muchos pasos de luminosidad.

Déjame construir una a mano para que veas la lógica. Empieza con un azul base en el tono 217, saturación bastante alta, luminosidad media: llámalo #2563EB. Ahora genera una rampa recorriendo la luminosidad de muy clara a muy oscura, manteniendo el tono cerca de 217 y suavizando la saturación al alza en ambos extremos:

• #EFF4FE — el tinte más claro. Un blanco azulado apenas perceptible. Fondo de página o de sección.
• #DBE6FD — un tinte suave para rellenos sutiles y bandas tipo cebra.
• #B9CDFB — un tinte claro para bordes y divisores.
• #7DA2F6 — un paso medio-claro, bueno para halos de hover y rellenos secundarios.
• #2563EB — la base. Tu color de marca principal, del que están hechos los botones.
• #1D4FC4 — un paso por debajo. El estado hover natural para ese botón principal.
• #163C96 — una sombra más profunda para los estados activo/pulsado y bordes marcados.
• #0F2A6B — una sombra oscura para encabezados sobre fondos claros, o superficies en modo oscuro.
• #0A1C45 — la sombra más oscura. Casi negro, e inconfundiblemente azul.

Fíjate en lo que te compra esa escalera. Cada estado interactivo que un botón necesita —reposo, hover, activo— sale del mismo tono, con tres pasos de luminosidad de separación. No estás inventando colores nuevos; estás bajando peldaños de una escala. Por eso estos se codifican como tokens numerados (blue-50 a blue-900) en los sistemas de diseño. Si quieres profundizar en cómo convertir una rampa así en variables reutilizables, crear tokens de color escalables retoma justo donde esto lo deja.

Unas cuantas reglas ganadas a pulso para la escala en sí:

• Separa tus pasos de luminosidad lo suficiente como para distinguirlos. El fallo monocromático más común son pasos que quedan demasiado juntos: #2563EB junto a #2C68EC son funcionalmente el mismo color, y tu interfaz pierde jerarquía. Los pasos contiguos deberían verse distintos de un vistazo.
• Los pasos no tienen por qué estar uniformemente espaciados. El ojo humano es más sensible a las diferencias entre colores claros, así que el extremo claro de la rampa suele querer incrementos de luminosidad más ajustados, y el extremo oscuro puede aceptar saltos mayores. Un espaciado uniforme en luminosidad a menudo se ve desigual al ojo.
• Mantén un tono consistente, pero permite derivas mínimas. Un desplazamiento de tono de uno o dos grados entre pasos está bien y a menudo se ve mejor; un giro de veinte grados significa que has abandonado el territorio monocromático.

Dónde se ganan el sueldo los tonos en una interfaz

Los tintes y las sombras hacen el trabajo pesado en una rampa de interfaz, pero los tonos —las versiones apagadas, mezcladas con gris— resuelven un problema concreto que los tintes y las sombras puros no pueden: los estados que deben retroceder.

El ejemplo obvio son los controles deshabilitados. Un botón deshabilitado no debería ser un azul más claro (eso se lee como un estado activo distinto), sino un azul atenuado, desaturado hacia el gris para que señale claramente «no disponible ahora mismo». Coge tu #2563EB y baja la saturación bien hacia el gris manteniendo una luminosidad moderada, y obtienes algo como #9AA6BF: todavía levemente azul, claramente inerte. Eso es un tono haciendo exactamente lo que los tintes y las sombras no pueden.

Los tonos son también la forma de construir superficies sofisticadas y nada estridentes. Un neutro de gris puro puede sentirse frío y desconectado de tu marca. Un neutro atenuado —gris con un pequeño porcentaje de tu tono de marca mezclado— hace que los fondos y los bordes se sientan parte de la misma familia que tu color de acento. Este es el truco detrás de muchas paletas que se sienten caras: los «grises» no son grises en absoluto, son versiones fuertemente atenuadas del tono principal. También es central en las buenas paletas de color para modo oscuro, donde las superficies de negro puro y plano se ven duras y las superficies oscuras ligeramente atenuadas se leen como intencionadas.

Los errores que todavía me pillo cometiendo

• Confundir un tinte con un tono. No son intercambiables. Un tinte del rojo es rosa (más claro, todavía bastante puro). Un tono del rojo es un rosa empolvado (apagado, de luminosidad similar). Recurre a un tinte cuando quieras más claro; recurre a un tono cuando quieras más callado. Elegir el incorrecto es por lo que un color «suavizado» a veces sigue sintiéndose ruidoso.
• Construir toda la escala a una sola saturación. Congela la saturación a lo largo de la rampa y el extremo claro queda pálido y el oscuro embarrado. Deja que la saturación respire: arriba en los extremos, a menudo más calmada en el centro.
• Olvidar que el contraste existe. Una preciosa rampa monocromática no te dice nada sobre si el texto sobre ella es legible. Pasos de luminosidad separados por tres podrían seguir fallando los ratios de contraste WCAG para el texto de cuerpo. Construye la escala buscando cohesión, y luego comprueba los pares reales de texto sobre superficie con un verificador de contraste. Cohesión y legibilidad son problemas distintos, y la herramienta comprueba el segundo por ti.
• Tratar lo monocromático como la línea de meta. Los tintes y sombras de un solo tono te dan un sistema tranquilo y unificado, pero a veces necesitas un acento de otra parte de la rueda. Una base monocromática más un único acento complementario es una de las paletas más fiables que existen, que es donde entender la armonía de color merece la pena.

Todo se reduce a esto: un tono no es más que un punto de partida. Los tintes, las sombras y los tonos son las tres formas de estirar ese único punto de partida hasta una paleta de trabajo completa —más claro con blanco, más oscuro con negro, más callado con gris—, y HSL te da los diales para hacerlo de forma deliberada en lugar de por accidente. Elige un tono que te guste, abre la regla monocromática y recorre el deslizador de luminosidad de extremo a extremo. Para cuando hayas construido a mano una buena rampa de nueve pasos, nunca volverás a mirar un «conjunto de colores» de la misma manera. Casi siempre es un solo color, vestido con nueve atuendos distintos.