La versión corta
- 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.
En esta página
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.
linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)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 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.
Esquema monocromático
Degradado monocromo
Esquema monocromático
Degradado monocromo
Esquema monocromático
Degradado monocromo
Esquema monocromático
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.
Para el extremo oscuro de esta familia por separado, mira degradados negros y degradados grises. Para saber cómo se relacionan los pasos, tintes, tonos y sombras 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 cubre el formato.
.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%
);
}- 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 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 y degradados con grano 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 cuadrada de lanzamiento a 1080×1080, casi toda sombra, con luz que sube por un borde.
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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil