# Degradados monocromos: un matiz, muchas sombras

[Canonical HTML page](https://gradiently.design/es/guide/monochrome-gradient)

Un color que solo cambia en luminosidad: es el degradado más callado que existe y el que muestra todos los defectos. Aquí tienes códigos que funcionan, el CSS que mantiene fiel el matiz y la solución al banding.

## The short version

- Un degradado monocromo mezcla un único matiz de oscuro a claro, o va del negro al blanco a través de grises.
- Un degradado monocromo es una sola mezcla, mientras que un esquema de color monocromático es una paleta completa construida con un matiz.
- Definir las paradas en oklch con un matiz fijo evita que un degradado de un solo color derive hacia el gris o hacia otro matiz.
- Los degradados monocromos oscuros son los que más banding muestran, porque una pantalla de 8 bits tiene muy pocos pasos distintos entre tonos casi negros.
- Una capa de grano ligera sobre un degradado monocromo oculta el banding y lo hace parecer una superficie.

Un **degradado monocromo** mezcla un matiz a través de sus propias sombras, de profundo a claro, sin introducir un segundo color. El negro a blanco pasando por gris es la versión más pura; un azul marino que sube hacia azul pálido o una berenjena que se aclara hacia lila también son degradados monocromos. Parecen calmados y caros porque nada compite, y por la misma razón muestran todos los defectos: banding, puntos medios turbios y un matiz que se desvía a mitad de camino. Los códigos y el CSS de abajo evitan los tres.

Del carbón a la plata: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

Un degradado de blanco y negro con las paradas apretadas hacia el extremo oscuro, de modo que la mayor parte del encuadre sigue profunda y la luz llega tarde.

## Degradado monocromo frente a esquema de color monocromático

Los dos términos están relacionados y a menudo se confunden. Un [esquema de color monocromático](https://gradiently.design/es/guide/monochromatic-color-scheme) es una paleta: varios tintes, tonos y sombras de un matiz usados en todo un diseño. Un degradado monocromo es una sola mezcla dentro de esa idea. Puedes usar un degradado monocromo en un diseño cuya paleta no sea monocromática en absoluto, como un fondo azul profundo bajo texto naranja.

| Aspecto | Degradado monocromo | Esquema monocromático |
| --- | --- | --- |
| Qué es | Una mezcla continua | Un conjunto de colores separados |
| Dónde vive | Un fondo, una forma, un botón | Toda una marca o maquetación |
| Número de matices | Uno | Uno |
| Uso típico | Fondos de portada, tarjetas, carteles | Interfaces, ilustración, identidad |

Mismo principio, distinta escala. El degradado es una superficie; el esquema es un sistema.

## Códigos de degradado monocromo para copiar

Cada uno de estos mantiene un único matiz y cambia solo su luminosidad y un poco su saturación. Las paradas más oscuras son algo más saturadas que las más claras, que es como se comporta el color real en la sombra y por eso estos parecen naturales.

- De negro a blanco: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Foco de grafito: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- De marino a cielo: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- De pino a menta: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- De sangre de buey a rubor: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- De berenjena a lila: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- De sombra a miel: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Del papel a la piedra: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Ocho degradados de un solo color. Cada uno se mantiene en su matiz de extremo a extremo.

Para el extremo oscuro de esta familia por separado, mira [degradados negros](https://gradiently.design/es/guide/black-gradient) y [degradados grises](https://gradiently.design/es/guide/grey-gradient). Para saber cómo se relacionan los pasos, [tintes, tonos y sombras](https://gradiently.design/es/guide/tints-tones-shades) es la lectura de fondo.

## Cómo hacer un degradado monocromo en CSS

La forma más simple de mantener un matiz es escribir las paradas en oklch y cambiar solo el primer número, la luminosidad. El ángulo del matiz queda fijo, así que el color no puede desviarse, y oklch reparte la luminosidad de forma pareja, así que la mezcla sube a ritmo constante. [OKLCH explicado](https://gradiently.design/es/guide/oklch-explained) cubre el formato.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Cambia el número del matiz (264) para llevar todo el degradado a otro color. El croma baja en el extremo claro, como ocurre con la luz real.

1. **Elige el matiz** Elige un color y busca su ángulo de matiz. Un azul ronda 260, un verde 145, un rojo 25.
2. **Fija las paradas más oscura y más clara** Mantén el extremo oscuro por encima del negro puro y el claro por debajo del blanco puro, salvo que quieras un borde duro. Una luminosidad de 0,15 a 0,9 es un rango cómodo.
3. **Coloca la parada central con intención** Muévela hacia el extremo que quieras que domine. Una parada central al 30 por ciento da un encuadre sobre todo claro; al 70 por ciento, sobre todo oscuro. [Paradas de color del degradado](https://gradiently.design/es/guide/gradient-stops) muestra más.
4. **Añade grano** Una capa de ruido tenue sobre el degradado oculta el banding y aporta sensación de material.

## Por qué los degradados monocromos oscuros muestran banding

La mayoría de las pantallas muestran 256 niveles por canal. Un degradado de negro `#000000` a gris oscuro `#282828` tiene solo 40 pasos distintos con los que trabajar. Estíralo por una portada de 1920 píxeles de ancho y cada paso es una franja de 48 píxeles, que el ojo distingue con facilidad en la oscuridad. Los degradados multicolor lo ocultan porque los canales cambian en momentos distintos; un degradado monocromo cambia los tres a la vez, así que las bandas se alinean.

### Bandas

- De casi negro a gris oscuro en pantalla completa
- Fuerte compresión JPEG al exportar
- Superficie digital perfectamente limpia
- Mezcla larga y de bajo contraste con pocas paradas

### Suave

- Un rango de luminosidad más amplio, o una distancia más corta
- PNG, o un ajuste de alta calidad
- Una capa de grano ligera encima
- Una luz radial que cambia más rápido cerca de su centro

[Banding en degradados](https://gradiently.design/es/guide/gradient-banding) y [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) tratan la solución con detalle, con código para una capa de ruido SVG.

## Dónde funcionan los degradados monocromos

Como llevan un solo color, los degradados monocromos dejan que lideren el texto y la fotografía. Van bien con lanzamientos de producto de lujo, estudios de arquitectura, estrenos musicales y cualquier marca cuya identidad sea un único color. Compón las palabras en el extremo más claro o más oscuro del mismo matiz, o en blanco o negro, y el diseño se lee como una decisión segura.

Si necesitas un acento, tómalo de fuera del matiz y úsalo una vez: una sola fecha naranja sobre un degradado marino, o un precio rojo sobre grafito. El degradado sigue siendo monocromo y el acento se lleva toda la atención porque nada más compite por ella.

Una portada de álbum cuadrada en tonos negro profundo y carbón con una sola palabra en letra pálida

Una portada cuadrada de lanzamiento a 1080×1080, casi toda sombra, con luz que sube por un borde.

Una portada web ancha para un estudio de arquitectura sobre un degradado oscuro de un solo color

Una portada de sitio web a 1920×1080: el mismo enfoque callado y de un solo color en un encuadre mucho más ancho.

Un fondo monocromo en Gradiently también puede moverse: un Mark renderiza su luz en directo, así que un degradado de un color puede derivar despacio detrás de las palabras y, con Pro, se exporta como bucle continuo en cada tamaño que diseñes.

## FAQ

### ¿Qué es un degradado monocromo?

Un degradado que mezcla un único matiz a través de sus propias sombras, de oscuro a claro, o va del negro al blanco a través de grises.

### ¿Es lo mismo un degradado monocromo que un esquema de color monocromático?

No. Un esquema monocromático es una paleta de un matiz usada en todo un diseño; un degradado monocromo es una mezcla continua de un único matiz.

### ¿Cómo hago un degradado de un solo color en CSS?

Escribe las paradas en oklch y cambia solo la luminosidad, por ejemplo de `oklch(0.18 0.08 264)` a `oklch(0.86 0.06 264)`. El matiz queda fijo, así que el color no puede desviarse.

### ¿Por qué mi degradado negro tiene rayas?

Los tonos oscuros tienen muy pocos pasos distintos en una pantalla de 8 bits, así que la mezcla muestra bandas. Añade una capa de grano ligera, amplía el rango de luminosidad o exporta como PNG.

### ¿Cuál es el código de un degradado blanco y negro?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` es la versión simple. Para un aspecto más rico, aprieta las paradas hacia el extremo oscuro y detente antes del blanco puro.