La versión corta
- Un degradado negro es una mezcla entre tonos casi negros, o de negro hacia un color, que se usa para dar profundidad a los diseños oscuros en lugar de un vacío plano.
- Los mejores degradados negros evitan el #000000 puro y usan negros con tinte que llevan una pequeña cantidad de tono, como el negro azulado, el espresso cálido o la berenjena.
- Los degradados oscuros muestran banding con facilidad porque hay pocos niveles de brillo entre valores casi negros, así que suelen necesitar grano o un rango más amplio.
- El texto de cuerpo sobre un degradado negro se lee mejor en un blanco roto suave, y el texto secundario gris sigue necesitando una relación de contraste de al menos 4,5:1.
- Los degradados negros van bien en lanzamientos, lujo, música, vida nocturna y productos con modo oscuro, donde el campo oscuro hace brillar un color de acento.
En esta página
Un degradado negro es una mezcla que se mueve entre tonos casi negros, o de negro hacia un color, para que un diseño oscuro tenga profundidad y luz en lugar de un vacío plano. Los que parecen caros casi nunca usan #000000 puro. Parten de un negro con tinte, como #0b0b10, dejan que la luminosidad cambie solo unos pocos puntos porcentuales y añaden una única fuente de color o de luz en algún punto del campo.
Esta guía te da negros con tinte, códigos de degradados negros para copiar, la solución al banding que aqueja a las mezclas oscuras y reglas para el texto. Para los fondos más oscuros en general, mira los fondos de degradado oscuro; para lo básico de cómo funcionan las mezclas, empieza por qué es un degradado.
Por qué el negro puro se ve plano
#000000 no tiene tono y no puede ser más oscuro, así que un diseño construido sobre él no tiene sombras, solo una ausencia. Nada en la vida real es tan negro: una habitación oscura, un cielo nocturno y una tela negra llevan un rastro de color y un cambio lento de brillo. Tu ojo lee ese cambio como profundidad.
También hay una razón práctica. En las pantallas OLED, los píxeles negros puros se apagan por completo, y en algunos móviles tardan un instante en volver a encenderse, lo que puede dejar una breve estela cuando se desplaza contenido oscuro. Subir tu valor más oscuro unos pasos por encima de cero lo evita y no te cuesta nada visualmente.
Negros con tinte: los colores dentro de un buen negro
Un negro con tinte es un color muy oscuro al que le queda un poco de saturación. En términos HSL, mantén la luminosidad entre un 4% y un 9% y deja la saturación en cualquier punto entre el 15% y el 40%. El tono decide el ambiente: los negros azulados se sienten técnicos y fríos, los marrones cálidos se sienten como cuero y café, y la berenjena se siente como la noche.
Si trabajas en OKLCH, los números son más fáciles de razonar: luminosidad en torno al 15% al 20% y croma entre 0,005 y 0,025. La Tinta de arriba es oklch(15.2% 0.011 285), un negro con un susurro de azul. Nuestra guía de códigos de color explica cómo leer estos valores.
Códigos de degradados negros que puedes copiar
Cada uno de estos mantiene su valor más oscuro por encima del negro puro y cambia la luminosidad con suavidad. Úsalos como fondos completos, cabeceras o bases de diapositivas, y elige el que tenga la temperatura que combine con tu color de acento.
La dirección importa más sobre el negro que en ningún otro sitio, porque pasa muy poco más. La luz que cae desde arriba se lee natural y serena. La luz que sube desde una esquina inferior se lee como un resplandor, como el de una pantalla o una llama, y lleva el ojo a esa esquina. Para saber más, mira los ángulos de degradado.
Degradados de negro a color
Los degradados negros más llamativos dejan que un color surja de la oscuridad. Dos reglas los mantienen ricos. Primera, no des al color más de un tercio del campo, para que el negro siga siendo la nota principal. Segunda, oscurece el color hacia el negro a lo largo de su propio tono en lugar de apagarlo pasando por gris: un violeta debe pasar por un índigo profundo al bajar, no por el carbón. Un medio gris es la causa más común de los degradados sucios.
radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)Los navegadores modernos pueden hacer parte de esto por ti. Interpolar en OKLCH mantiene vivo el croma del color a través de las paradas más oscuras, y una línea de reserva simple mantiene cubiertos los navegadores más antiguos.
.hero {
/* Fallback for browsers without colour interpolation */
background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
/* Blends through oklch, so the violet stays violet as it darkens */
background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}in oklch y se ignora en los demás sitios.Cómo evitar el banding en los degradados oscuros
Las pantallas suelen mostrar 256 niveles por canal de color. Un degradado de #0a0a0a a #1a1a1a solo tiene 16 de esos niveles con los que trabajar, así que en una cabecera de 1920 píxeles de ancho cada escalón mide unos 120 píxeles y se ven franjas. Eso es el banding en degradados, y los degradados oscuros lo sufren más.
Causa banding
- Un rango de luminosidad largo y muy estrecho, como de #0a0a0a a #1a1a1a
- Grises perfectamente neutros, donde los tres canales cambian en el mismo punto
- Exportar un degradado oscuro como JPEG comprimido
- Estirar una imagen de degradado pequeña por una pantalla grande
Lo soluciona
- Una capa ligera de grano o ruido sobre el degradado
- Un ligero tono, para que los canales rojo, verde y azul cambien en puntos distintos
- Exportar a tamaño completo como PNG, o dibujar el degradado en vivo con CSS
- Un rango de luminosidad más amplio, o una distancia más corta para la mezcla
El grano es la solución más fiable, porque rompe el borde duro de cada escalón en una textura que el ojo vuelve a mezclar. Unos pocos puntos de opacidad bastan. Los degradados con grano tratan el aspecto a fondo; este es el CSS mínimo.
.hero {
position: relative;
background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}Texto y color sobre un degradado negro
Las bases negras hacen que casi cualquier texto claro pase el contraste, así que el riesgo se traslada al texto secundario. Los grises medios que se ven bien en un monitor brillante pueden quedar por debajo del mínimo de 4,5:1 para el texto de cuerpo. El blanco puro también tiene un coste: algunos lectores encuentran áspero el blanco brillante sobre casi negro en pasajes largos, así que un blanco roto cálido es más amable y se lee igual de nítido. Mira el contraste de color para las reglas completas.
| Color del texto | Contraste sobre #0b0b10 | Úsalo para |
|---|---|---|
#ffffff blanco | 19,6:1 | Titulares cortos |
#f2efe9 blanco roto cálido | 17,1:1 | Titulares y texto de cuerpo |
#a1a1aa gris claro | 7,7:1 | Texto secundario |
#8a8a93 gris medio | 5,7:1 | Pies de foto y etiquetas |
#6b6b75 gris tenue | 3,7:1 | Solo texto grande, de 24 px en adelante |
#4a4a52 carbón | 2,2:1 | Decoración, nunca palabras |
Un campo casi negro, una línea en blanco roto cálido y un único acento: la maquetación clásica de un degradado negro.
Dónde funcionan mejor los degradados negros
- Lanzamientos y revelaciones, donde un campo oscuro hace que un producto o un titular se sienta iluminado
- Lujo, fragancias y joyería, combinado con un acento metálico como
#c9a96e - Música, vida nocturna y eventos, con un color saturado que sube desde una esquina
- Productos de tecnología y para desarrolladores, donde los negros azulados se sienten precisos
- Interfaces en modo oscuro, usando dos o tres negros con tinte como capas de superficie
- Portafolios de fotografía, donde un marco negro tranquilo deja que las imágenes lleven el color
En Gradiently, el Mercado te permite buscar Marks por palabras de color como «casi negro» o «negro y oro», y cada Mark ya lleva grano y luz, así que los problemas de banding y de aspecto plano de arriba están resueltos antes de empezar.
Preguntas frecuentes
¿Cuál es el mejor código hex para un degradado negro?
Parte de un casi negro con tinte como #0b0b10 (negro azulado) o #14100d (espresso cálido) en lugar de #000000, y deja que la parada más clara quede unos pasos más arriba, como #1c1c24.
¿Por qué mi degradado negro tiene franjas?
Los valores casi negros tienen muy pocos niveles de brillo entre ellos, así que cada escalón se convierte en una banda visible. Añade una capa ligera de grano, da un ligero tono a los negros o amplía el rango de luminosidad.
¿Qué color de texto queda mejor sobre un degradado negro?
Un blanco roto cálido como #f2efe9 se lee nítido y resulta más suave que el blanco puro. Mantén el texto secundario gris con un contraste de 4,5:1 o más.
¿Cómo hago un degradado de negro a color que no quede sucio?
Oscurece el color a lo largo de su propio tono de camino al negro, por ejemplo el violeta pasando por índigo profundo, en lugar de apagarlo pasando por gris. Interpolar en OKLCH en CSS ayuda.
¿Es bueno un degradado negro para el modo oscuro?
Sí, si es sutil. Las superficies del modo oscuro funcionan mejor como dos o tres negros con tinte separados unos pocos puntos porcentuales, con cualquier degradado visible limitado a zonas grandes de fondo.
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
