Neongradienter: glöd utan trötta ögon

En neongradient är en övergång mellan mycket mättade färger, som skarp rosa, violett, elektriskt blått, cyan eller syrgrönt, oftast glödande mot en mörk botten, som ett tänt rör på en mörk gata. Det är den mest energiska sortens gradient som finns. Det är också den som lättast tröttar ögat, eftersom mättade färger sida vid sida kan skimra och vibrera. Lösningen är inte mindre färg utan mer mörker runt den.

Vad som får en gradient att se ut som neon

Riktiga neonskyltar är tunna linjer av intensiv färg omgivna av en mjuk gloria och en mörk natt. För att se ut som neon på en skärm behöver en gradient samma tre saker: färg på eller nära full mättnad, en ljus kärna som klingar av till ett sken och en mörk botten som gör skenet synligt. Ta bort mörkret så har du ett skrikigt färgblock i stället för ljus.

Därför tröttar neon ögonen

När två starkt mättade färger med liknande ljushet möts i en hård kant, till exempel ren röd text på ren blå botten, verkar kanten skimra. Det kallas ofta kromatisk vibration, och det gör text tröttsam eller till och med svår att fokusera på. Rött och blått bredvid varandra kan dessutom se ut att ligga på olika djup. Neondesigner snubblar på båda eftersom varje färg har full styrka.

Färgpaletter för neon

Neonpaletter fungerar bäst som en eller två glödande färger plus en mörk botten, inte fem neonfärger på en gång. Rosa och violett, eller cyan och blått, är grannar och glöder ihop utan att vibrera. Rosa och cyan är det klassiska synthwave-paret; blandat via violett förblir det klart i stället för att gå över i grått.

Så bygger du en neongradient

1. 1

   Börja mörkt

   Fyll bilden med ett nästan svart som lutar åt ditt neon, till exempel violettsvart under rosa.

2. 2

   Placera en ljus kärna

   Lägg neonet i full styrka på en liten yta, en linje, en ring eller ett hörn, inte mitt i bilden.

3. 3

   Låt den klinga av

   Tona kärnan via en djup version av samma nyans ut i mörkret, så att den läses som en gloria och inte som en fläck.

4. 4

   Lägg till ett andra neon bara som granne

   Violett bredvid rosa, eller blått bredvid cyan, glöder ihop. Motsatser behöver mörker emellan sig.

5. 5

   Avsluta med korn

   Mörka glorior får lätt band. Ett fint brusskikt håller dem mjuka; se gradientband.

Text på neon

Sätt orden i vitt eller en mycket blek ton av ditt neon, aldrig i ett andra neon. Ett mjukt sken i neonfärgen runt vita bokstäver läses som en skylt; mättade bokstäver på mättad botten läses som brus. Håll brödtext borta från det starkaste skenet och i det mörkaste området, och kontrollera kontrasten som mot vilken mörk bakgrund som helst; se mörka gradientbakgrunder.

.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;
}

Där neongradienter passar

Tryck kräver en särskild anmärkning. Neonfärger på skärm är starkare än vad vanliga CMYK-färger kan återge, så de blir matta i tryck. Fluorescerande specialfärger kan komma nära; fråga ditt tryckeri och läs gradienter i tryck först. För en mjukare tolkning av glödande färg, se norrskensgradienter, och för den retro versionen, vaporwave-färger.

Neon vaknar till liv i rörelse. En långsam puls mot mörk botten ger en stark bakgrund för en Story eller Reel, och i Gradiently exporteras designer gjorda med en säkrad Mark som sömlösa loopar på 5 till 30 sekunder, i det tempo du väljer.