Rød og sort gradient: dramatiske koder uden banding

En rød og sort gradient toner en klar rød som #dc2626 eller en dybere karmin som #b91c1c over i næsten sort, helst gennem en blodrød som #450a0a, så overgangen forbliver fyldig. Få kombinationer er så dramatiske: rød fanger opmærksomheden, og sort giver den intet at konkurrere med. Her er røde og sorte koder til fem slags drama, hvordan du undgår banding, og de tekstfarver, der virker.

Sådan toner du rød over i sort uden brunt

Den almindelige fejl er at blande ren rød direkte over i ren sort med to stop. Midten af den blanding er en grumset brunrød, der ser beskidt ud frem for mørk. Gå i stedet gennem mørkere røde toner, og brug en sort med et strejf af rødt, så skyggen hører til samme familie som lyset.

Koder til rød og sort gradient til fem slags drama

Film og thriller

Mest sort, hvor rødt kommer ind som ét lys fra siden, som et nødudgangsskilt i et mørkt rum. Stille og anspændt.

Sport og kampaften

Varm rød, der stiger op nedefra, som om arenaens gulv er oplyst. Højlydt, fysisk og presserende.

Gaming

Skarpe diagonaler og hårde stop, tættere på grafik end på glød. De opleves som hurtige og aggressive.

Mode og luksus

Dyb karmin og lakeret sort, næsten uden klar rød. Tænk på en lakeret æske eller et rødt silkefor: poleret, dyrt og kontrolleret.

Halloween og gys

Rød, der samler sig i bunden af billedet eller siver ind fra hjørnerne. Brugt sparsomt er det virkelig foruroligende; overdriv det, og det ligner en udklædningsbutik.

Hvorfor røde og sorte gradienter får banding, og hvordan du undgår det

Mørke, glatte gradienter har meget få forskellige nuancer at arbejde med, så de brydes op i synlige trin, især når en app komprimerer dem igen. Mættet rød gør det værre i video, fordi de fleste videoformater gemmer farve i lavere opløsning end lysstyrke, og røde kanter smitter. Gradient-banding forklarer mekanikken.

1. 1

   Tilføj fint korn

   Et let støjlag bryder trinene op. Gradienter med korn har en opskrift, der er klar til brug.

2. 2

   Eksportér i fuld størrelse

   Upload i platformens egen størrelse, som 1080×1350 til et Instagram-opslag, så billedet ikke skaleres og komprimeres to gange.

3. 3

   Foretræk PNG til stillbilleder

   PNG undgår de blokagtige artefakter, JPEG skaber i mørke, glatte områder.

4. 4

   Bevar lidt tekstur i video

   En helt glat rød overgang er det sværeste for en videoencoder. Lidt bevægelse eller korn overlever langt bedre.

Hvor meget rød du skal bruge med sort

Rød bærer stærke associationer: fare, varme, lidenskab, hast og mange steder held og fest. Ved siden af sort bliver de betydninger højere, så proportionen afgør, om et design føles dramatisk eller alarmerende. Rød farves betydning går mere i dybden med associationerne.

Tekstfarver på rød og sort

I den sorte ende kan næsten alt lyst læses. I den røde ende afhænger det af, hvor dyb den røde er. Klar skarlagen er lysere, end folk tror, så hvid tekst dér skal være stor og fed. Forholdene bruger WCAG-formlen, hvor 4,5:1 er målet for lille tekst.

CSS til rød og sort gradient

.drama {
  background-color: #0a0505;
  background-image:
    radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%),
    linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%);
  color: #fef2f2;
}

.split {
  background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%);
}

For flere dybe røde toner, se røde gradienter og bordeaux gradienter. Er rød og sort centralt for dit brand, så sikr dig en Mark i Gradiently, så ingen andre kan eksportere den. Den gengives i alle størrelser fra en Story til et streambanner og flytter automatisk sit roligste mørke område bag dine ord.