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

[Canonical HTML page](https://gradiently.design/es/guide/tints-tones-shades)

Un solo color de marca nunca basta para diseñar. Los tintes, tonos y sombras lo convierten en toda una familia, y una buena escala es lo que permite a una paleta sostener texto, botones, fondos y gráficos.

## The short version

- Tintes, tonos y sombras son tres formas de variar un color: un tinte añade blanco, un tono añade gris y una sombra añade negro.
- Los tintes se sienten más ligeros y suaves, los tonos más tranquilos y apagados, y las sombras más profundas y serias.
- Una escala de color es una fila de tintes y sombras de un mismo tono, normalmente numerada de 50 o 100 para el más claro a 900 para el más oscuro.
- Mezclar en un espacio de color perceptual como OKLCH hace que los pasos de una escala parezcan igual de espaciados.
- Una buena escala da a cada paso una función, como fondos, bordes, texto y estados al pasar el cursor, y comprueba el contraste entre los pasos que van a coincidir.

**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.

| Tipo | Mezclado con | Efecto | Ejemplo a partir de #7c3aed |
| --- | --- | --- | --- |
| Tinte | Blanco | Más claro, suave y aireado | `#b089f4` con un 40 por ciento de blanco |
| Tono | Gris | Apagado, tranquilo y más natural | `#7e64ac` con un 60 por ciento de gris |
| Sombra | Negro | Más profundo, pesado y serio | `#4a238e` con un 40 por ciento de negro |

El matiz sigue siendo violeta en todos los casos. Solo cambian la luminosidad y la saturación.

- Tinte 90%: #f2ebfd
- Tinte 60%: #cbb0f8
- Tinte 20%: #9661f1
- Violeta base: #7c3aed
- Sombra 20%: #632ebe
- Sombra 60%: #32175f
- Sombra 80%: #190c2f

Tintes a la izquierda, sombras a la derecha. Esta fila ya es casi una escala utilizable.

- Violeta base: #7c3aed
- Tono 20%: #7d48d7
- Tono 40%: #7e56c1
- Tono 60%: #7e64ac
- Tono 80%: #7f7296

Los tonos mantienen más o menos la misma luminosidad y en cambio pierden color, por eso las paletas basadas en tonos transmiten calma y madurez.

## 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](https://gradiently.design/es/guide/pastel-color-palettes) son sobre todo tintes. Las sombras se leen como ricas, serias y prémium, el terreno de las [paletas de colores oscuros](https://gradiently.design/es/guide/dark-color-palettes). Los tonos se leen como maduros y naturales, la base de casi cualquier [paleta de colores apagados](https://gradiently.design/es/guide/muted-color-palettes).

- Tintes: suaves y abiertos: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tonos: tranquilos y maduros: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Sombras: profundas y serias: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

El mismo violeta llevado en tres direcciones. Los tintes alegran el ambiente, los tonos lo calman y las sombras le dan peso.

## 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. **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. **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. **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. **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. **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. **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](https://gradiently.design/es/guide/color-contrast-accessibility) como guía.

| Paso | Hex | Función habitual |
| --- | --- | --- |
| 50 | `#f2ebfd` | Fondo de página o de tarjeta |
| 100 | `#e5d8fb` | Rellenos sutiles, filas seleccionadas |
| 200 | `#cbb0f8` | Bordes, separadores, estados desactivados |
| 400 | `#9661f1` | Iconos, formas decorativas grandes |
| 500 | `#7c3aed` | Color de marca, botones principales |
| 600 | `#632ebe` | Botón al pasar el cursor, enlaces |
| 700 | `#4a238e` | Titulares sobre fondos claros |
| 800 | `#32175f` | Texto de cuerpo sobre tintes |
| 900 | `#190c2f` | Fondo del modo oscuro |

Una escala violeta con una función para cada paso. El blanco sobre el 500 da unos 5,7:1 y el paso 800 sobre el 100 unos 10,9:1, ambos por encima de la pauta de 4,5:1.

## 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](https://gradiently.design/es/guide/oklch-explained). La compatibilidad con navegadores es amplia; consulta [color-mix() en MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) para los detalles.

```css
: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);
}
```

Cambia `--brand` y todos los tintes, sombras y tonos se actualizan con él.

## 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](https://gradiently.design/es/guide/monochromatic-color-scheme) aplican la misma idea a paletas enteras.

- Violeta, de tinte a sombra: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violeta, iluminado desde arriba: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terracota, de tinte a sombra: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Tinte lila a tono violeta: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Mezclas de un solo matiz. Cada una toma colores solo de su propia escala.

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.

## FAQ

### ¿Qué diferencia hay entre un tinte, un tono y una sombra?

Un tinte es un color mezclado con blanco, un tono es un color mezclado con gris y una sombra es un color mezclado con negro.

### ¿Un color pastel es un tinte?

Sí. Los pasteles son tintes: colores aclarados con mucho blanco, lo que los hace suaves y de baja intensidad.

### ¿Cuántos pasos debe tener una escala de color?

La mayoría de los sistemas de diseño usan de nueve a once pasos, numerados de 50 o 100 a 900. Menos pasos pueden bastar en proyectos pequeños, siempre que cada uno tenga una función clara.

### ¿Cómo creo una sombra más oscura de un color en CSS?

Usa `color-mix(in oklch, yourcolour 70%, black)` y ajusta el porcentaje. Los porcentajes más bajos dan sombras más oscuras.

### ¿Por qué mis sombras se ven turbias?

Mezclar con negro puro también resta saturación. Mezcla en OKLCH y prueba a empujar los pasos más oscuros un poco hacia el azul o el violeta para que conserven la riqueza.