Röd och svart gradient: dramatiska koder utan banding

En röd och svart gradient tonar ett klart rött som #dc2626 eller en djupare karmosin som #b91c1c ner i nästan svart, helst via en blodröd som #450a0a så att övergången förblir rik. Få par är så dramatiska: rött tar uppmärksamheten och svart ger den ingenting att konkurrera med. Här är koder för röd och svart för fem sorters dramatik, hur du hindrar dem från att få banding och vilka textfärger som fungerar.

Så tonar du rött till svart utan att det blir brunt

Det vanliga misstaget är att blanda rent rött rakt in i rent svart i två steg. Mitten av den blandningen är ett grumligt brunrött som ser smutsigt ut snarare än mörkt. Stega i stället genom mörkare röda toner och använd ett svart med ett spår av rött i, så att skuggan hör till samma familj som ljuset.

Koder för röd och svart gradient för fem sorters dramatik

Film och thriller

Mest svart, med rött som kommer som ett enda ljus från sidan, som en utgångsskylt i ett mörkt rum. Stilla och spänt.

Sport och matchkväll

Hett rött som stiger underifrån, som om arenans golv vore upplyst. Högljutt, fysiskt och brådskande.

Spel

Skarpa diagonaler och hårda steg, närmare en grafik än ett sken. De läses som snabba och aggressiva.

Mode och lyx

Djup karmosin och lacksvart, med nästan inget klart rött. Tänk på en lackad ask eller ett rött sidenfoder: polerat, dyrt och kontrollerat.

Halloween och skräck

Rött som samlas längst ned i bilden eller sipprar in från hörnen. Använd sparsamt så är det genuint obehagligt; överdriv och det ser ut som en maskeradaffär.

Varför röd och svart gradient får banding, och hur du stoppar det

Mörka, släta gradienter har mycket få olika nyanser att arbeta med, så de bryts upp i synliga steg, särskilt när en app komprimerar dem på nytt. Mättat rött gör det värre i video, eftersom de flesta videoformat lagrar färg i lägre upplösning än ljushet, och röda kanter smetas ut. Banding i gradienter förklarar mekaniken.

1. 1

   Lägg till fint korn

   Ett lätt brusskikt bryter upp stegen. Korniga gradienter har ett färdigt recept.

2. 2

   Exportera i full storlek

   Ladda upp i plattformens egen storlek, som 1080×1350 för ett Instagram-inlägg, så att det inte skalas och komprimeras två gånger.

3. 3

   Föredra PNG för stillbilder

   PNG undviker de blockiga artefakter JPEG skapar i mörka, släta ytor.

4. 4

   Behåll lite textur i video

   En helt slät röd gradient är det svåraste en videoenkodare kan få. Lite rörelse eller korn överlever mycket bättre.

Hur mycket rött du ska använda med svart

Rött bär starka associationer: fara, hetta, passion, brådska, och på många håll lycka och firande. Bredvid svart blir de betydelserna högre, så proportionerna avgör om en design känns dramatisk eller alarmerande. Röd färgs betydelse tar upp associationerna djupare.

Textfärger på rött och svart

I den svarta änden läses nästan allt ljust. I den röda änden beror det på hur djupt rött det är. Klart scharlakansrött är ljusare än folk tror, så vit text där bör vara stor och fet. Kvoterna följer WCAG-formeln, där 4,5:1 är målet för liten text.

CSS för röd och svart 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%);
}

För fler djupa röda toner, se röda gradienter och bordeauxgradienter. Om rött och svart är centralt för ditt varumärke, säkra ett Gradiently-Mark så kan ingen annan exportera det. Det renderas i varje storlek från en story till en strömbanner och flyttar automatiskt sin lugnaste mörka region bakom dina ord.