Tintes, tonos y sombras: cómo crear una escala de color

Tintes, tonos y sombras son las tres formas de cambiar un color sin cambiar su matiz. Un tinte es el color mezclado con blanco, así que se vuelve más claro y suave. Una sombra es el color mezclado con negro, así que se vuelve más profundo. Un tono es el color mezclado con gris, así que se vuelve más discreto y apagado. Piensa en tintes, tonos y sombras como blanco, gris y negro añadidos a un mismo matiz. Ordena una serie de tintes y sombras y tendrás una escala de color: la herramienta que convierte un único color de marca en algo con lo que de verdad puedes diseñar.

Tinte, tono y sombra, uno al lado del otro

La forma más fácil de ver la diferencia es partir de un color y llevarlo en tres direcciones. Aquí la base es un violeta, #7c3aed, mezclado en pasos del 20 por ciento.

Qué aportan los tintes, tonos y sombras a un diseño

Cada dirección cambia el ambiente tanto como el color. Los tintes se leen como amables, jóvenes y abiertos, por eso las paletas de colores pastel son sobre todo tintes. Las sombras se leen como ricas, serias y prémium, el terreno de las paletas de colores oscuros. Los tonos se leen como maduros y naturales, la base de casi cualquier paleta de colores apagados.

Cómo crear una escala de color a partir de un hex

La mayoría de los sistemas de diseño numeran su escala de 50 o 100 (el más claro) a 900 (el más oscuro), con el color de marca cerca del 500. La coherencia importa más que los números: todos los colores de tu sistema deben tener los mismos pasos, de modo que 200 siempre signifique un fondo claro y 700 siempre signifique texto. Cinco pasos bien elegidos valen más que once que nadie distingue, y puedes añadir los intermedios cuando los diseños reales muestren dónde faltan.

1. 1

   Sitúa tu color de marca

   Decide a qué paso pertenece. Un color medio como #7c3aed va en el 500; un azul marino de marca muy oscuro podría ir en el 800.

2. 2

   Crea el extremo claro

   Mezcla hacia el blanco del 400 al 50. El paso más claro debe tener apenas color, lo bastante claro para el fondo de una página.

3. 3

   Crea el extremo oscuro

   Mezcla hacia el negro del 600 al 900. El paso más oscuro debe ser lo bastante oscuro para texto de cuerpo sobre el más claro.

4. 4

   Iguala los pasos

   Mira la fila desde lejos. Si dos vecinos parecen casi idénticos y otro hueco parece un salto, ajústalos a ojo.

5. 5

   Desplaza un poco el matiz en los extremos

   El negro puro puede ensuciar las sombras. Muchos diseñadores empujan los pasos oscuros unos grados hacia el azul o el violeta y los claros hacia lo cálido.

6. 6

   Comprueba las parejas que van a coincidir

   Prueba el contraste de los pasos de texto sobre los pasos de fondo, con contraste de color y accesibilidad como guía.

Crear tintes y sombras en CSS

Ya no hace falta calcular cada paso a mano. La función CSS color-mix() mezcla dos colores en el espacio de color que elijas, así que toda una escala puede depender de una sola variable. Mezclar en OKLCH deja los pasos más uniformes a la vista que el sRGB simple, algo que se explica en OKLCH, explicado. La compatibilidad con navegadores es amplia; consulta color-mix() en MDN para los detalles.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Tintes y sombras en los degradados

Los degradados más limpios suelen ser un solo matiz que va del tinte a la sombra. Como nada cruza la rueda de color, no aparece una franja gris en el centro, y el resultado se lee como luz cayendo sobre un único material. Los esquemas de color monocromáticos aplican la misma idea a paletas enteras.

Un Mark de Gradiently funciona de forma parecida: una receta de colores emparentados con luz que la recorre. Cuando diseñas sobre uno, los colores cercanos a tus palabras se oscurecen o se aclaran para que el texto siga legible sin una caja detrás.