La versión corta
- Un degradado neón usa colores muy saturados, como rosa intenso, azul eléctrico, cian y verde ácido, que normalmente brillan sobre un fondo oscuro.
- El neón solo parece luz cuando lo rodea la oscuridad; sobre un fondo claro, los mismos colores se ven chillones y planos.
- Dos colores saturados de luminosidad parecida colocados borde con borde parecen vibrar, y esa es la causa principal de la fatiga visual del neón.
- Limitar el neón a una pequeña parte de la superficie y poner el texto en blanco o casi blanco, no en neón, hace que resulte cómodo de mirar.
- Los degradados neón encajan en música, videojuegos, ocio nocturno y lanzamientos tecnológicos, donde la energía es lo que se busca.
En esta página
Un degradado neón es una mezcla de colores muy saturados, como rosa intenso, violeta, azul eléctrico, cian o verde ácido, que normalmente brillan sobre un fondo oscuro, como un tubo encendido en una calle de noche. Es el tipo de degradado más enérgico que existe. También es el que más cansa la vista, porque los colores saturados uno junto a otro pueden centellear y vibrar. La solución no es menos color, sino más oscuridad a su alrededor.
Qué hace que un degradado parezca neón
Los rótulos de neón reales son líneas finas de color intenso rodeadas de un halo suave y de una noche oscura. Para parecer neón en pantalla, un degradado necesita esas mismas tres cosas: color a plena saturación o casi, un núcleo brillante que se desvanece en un resplandor y un fondo oscuro que haga visible ese resplandor. Quita la oscuridad y te queda un bloque de color chillón en lugar de luz.
Por qué el neón cansa la vista
Cuando dos colores muy saturados de luminosidad parecida se encuentran en un borde nítido, como un texto rojo puro sobre azul puro, el borde parece centellear. Es lo que suele llamarse vibración cromática, y hace que el texto canse o incluso cueste enfocarlo. El rojo y el azul juntos también pueden parecer situados a distintas profundidades. Los diseños neón tropiezan con ambas cosas porque todos los colores están a plena intensidad.
Cansa
- Neón llenando todo el marco de borde a borde
- Texto neón sobre un fondo neón
- Dos opuestos saturados, como rojo y azul, tocándose en un borde nítido
- Parpadeos rápidos o efectos de brillo estroboscópico
Brilla
- Neón en una pequeña parte de una superficie oscura
- Texto blanco o casi blanco con un suave resplandor de color
- Colores saturados separados por oscuridad o por una mezcla suave
- Pulsos lentos y suaves, o ninguno
Paletas de colores neón
Las paletas neón funcionan mejor con uno o dos colores brillantes más un fondo oscuro, no con cinco neones a la vez. Rosa y violeta, o cian y azul, son vecinos y brillan juntos sin vibrar. Rosa y cian es la pareja clásica del synthwave; mezclados a través del violeta, siguen brillantes en lugar de volverse grises.
Cómo crear un degradado neón
- 1
Empieza en oscuro
Llena el marco con un casi negro teñido hacia tu neón, como un negro violáceo bajo el rosa.
- 2
Coloca un solo núcleo brillante
Pon el neón a plena intensidad en una zona pequeña, una línea, un anillo o una esquina, no en el centro del marco.
- 3
Deja que se desvanezca
Funde el núcleo a través de una versión profunda del mismo tono hasta la oscuridad, para que se lea como un halo y no como una mancha.
- 4
Añade un segundo neón solo si es vecino
Violeta junto a rosa, o azul junto a cian, brillan juntos. Los opuestos necesitan oscuridad entre ellos.
- 5
Termina con grano
Los halos oscuros se escalonan con facilidad. Una capa de ruido fino los mantiene suaves; consulta el banding en degradados.
Texto sobre neón
Pon las palabras en blanco o en un tinte muy pálido de tu neón, nunca en un segundo neón. Un resplandor suave del color neón alrededor de letras blancas se lee como un rótulo; letras saturadas sobre un fondo saturado se leen como ruido. Aleja el texto de lectura del resplandor más intenso, colócalo en la zona más oscura y comprueba el contraste como en cualquier fondo oscuro; consulta los fondos degradados oscuros.
.neon-title {
color: #fff0fa; /* pale pink, not neon */
text-shadow:
0 0 4px #ff2d95,
0 0 16px #ff2d95,
0 0 40px rgb(255 45 149 / 0.6);
}
.neon-panel {
background: #07020a;
box-shadow:
0 0 0 1px rgb(0 224 255 / 0.6),
0 0 24px rgb(0 224 255 / 0.35);
border-radius: 16px;
}Cuando el resplandor más intenso pasa por detrás del título, el neón y las palabras se pelean.
Oscuridad detrás del título y resplandor a su alrededor: el cartel se lee al instante.
Dónde encajan los degradados neón
| Funciona bien | Úsalo con cuidado |
|---|---|
| Música, noches de club y festivales | Lecturas largas o documentación |
| Videojuegos, streaming y esports | Marcas de salud, finanzas y derecho |
| Lanzamientos tecnológicos y vídeos de producto | Impresión, donde los colores neón no se pueden igualar |
| Coctelerías y mercados nocturnos | Productos infantiles y bienestar sereno |
La impresión merece una nota aparte. Los neones de pantalla son más brillantes de lo que pueden reproducir las tintas CMYK normales, así que salen apagados. Las tintas directas fluorescentes pueden acercarse; pregunta a tu imprenta y lee antes los degradados en impresión. Para una versión más suave del color luminoso, consulta los degradados aurora, y para la versión retro, los colores vaporwave.
El neón cobra vida en movimiento. Un pulso lento sobre un fondo oscuro es un fondo potente para una historia o un Reel, y en Gradiently los diseños hechos con un Mark reservado se exportan como bucles perfectos de 5 a 30 segundos al ritmo que elijas.
Preguntas frecuentes
¿Qué es un degradado neón?
Un degradado neón mezcla colores muy saturados, como rosa intenso, azul eléctrico, cian o verde ácido, que normalmente brillan sobre un fondo oscuro.
¿Por qué me cansan la vista los colores neón?
Los colores saturados de luminosidad parecida en un borde nítido parecen vibrar. Separarlos con oscuridad o con una mezcla suave y usar texto blanco lo resuelve casi todo.
¿Qué fondo va con los colores neón?
Un casi negro con un ligero tinte, como un violeta o un azul marino muy oscuros. El neón solo parece luz cuando lo rodea la oscuridad.
¿De qué color pongo el texto sobre un degradado neón?
Blanco o un tinte muy pálido del neón, colocado en la zona más oscura, si quieres con un resplandor suave del color neón.
¿Se pueden imprimir los degradados neón?
No exactamente. Los neones de pantalla son más brillantes que las tintas CMYK estándar, así que salen más apagados. Las tintas directas fluorescentes se acercan más.
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
