Orange gradient: 25 varma koder från persika till bränd

En orange gradient blandar två eller fler oranga toner, ofta med ett angränsande gult, rött eller rosa, och få blandningar känns varmare. Ljusa persiko- och aprikosversioner känns mjuka och välkomnande, klar mandarin känns högljudd och lekfull, och bränd orange eller rost känns jordnära och vuxen. Nedan finns 25 koder grupperade efter de stämningarna, följt av vad du kan para dem med och hur du sätter text på dem utan att tappa orden.

Mjuka orange gradienter: persika och aprikos

Bleka oranga toner är den vänligaste vägen in i färgen. De ligger nära hud, bröd och eftermiddagsljus, vilket är varför bagerier, hudvård och barnvarumärken lutar sig mot dem. Håll det ljusaste stoppet nästan crème, så att blandningen har någonstans lugnt att vila. För en hel artikel om den blekaste änden, se persikogradienter.

Klara orange gradienter: mandarin och citrus

Mättad orange är ren energi. Den passar rea, matleverans, sport, festivaler och allt som måste synas i miniatyrstorlek. Risken är att klar orange plattas till ett enda högljutt block, så ge den ett ljusare stopp mot gult eller ett djupare mot rött. Det lilla skiftet är det som får den att se ut som ljus snarare än färg.

Solnedgångs- och bärnstensorange gradienter

Att köra orange vertikalt från guld överst till rött eller plommon nederst ger en solnedgång, förmodligen den mest välbekanta gradienten som finns. Bärnstensblandningar är den tystare kusinen: honung, marmelad och whiskytoner som känns rika utan att ropa. Vill du ha hela himmelsbehandlingen går solnedgångsgradienter längre.

Gradienter i bränd orange och rost

Driv orange mot brunt så blir den terrakotta, rost och koppar: färger från lerkrukor, höstlöv och gammalt läder. De känns hantverksmässiga och genomtänkta, så de passar interiörer, kaffe, keramik, friluftsvarumärken och allt med en handgjord berättelse. De bär också vit text mycket bättre än klar orange.

Orange ljus mot mörk bakgrund

Det mest premium sättet att använda orange är sparsamt. Utgå från ett nästan svart, ett djupbrunt eller ett marinblått och låt ett orange glöda från ett hörn som en glöd eller en gatlykta. Det här är behandlingen för sena kvällar, restauranger, musik och allt som ska kännas varmt efter mörkrets inbrott. Mörka blandningar får lätt bandning, så läs mörka gradientbakgrunder innan du exporterar.

Färger som passar med en orange gradient

Orange har två sorters bra partner. Grannar som gult, rosa och rött blandas rakt in i den. Motsatser som djupblått och blågrönt får den att vibrera, men de ska sitta bredvid det orange som en accent, inte inuti samma blandning, eftersom mittpunkten mellan dem blir grå. Leriga gradienter förklarar varför, och komplementfärger visar hur du använder dragningen säkert.

Text på orange gradienter

Här misslyckas de flesta orange designer. Vitt på klar mandarin ser djärvt ut men har ett kontrastförhållande på ungefär 2,8 till 1, långt under de 4,5 till 1 som WCAG kräver för brödtext. Nästan svart på samma orange får över 6 till 1. Regeln är enkel: mörk text på ljusa och klara oranga toner, vit text först från bränd orange och nedåt. Hela metoden finns i färgkontrast och tillgänglighet.

Gradiently sköter den här delen åt dig. En Mark vet var orden finns: den flyttar sin lugnaste region bakom dem och Auto-bläck väljer ljus eller mörk text rad för rad ur Markens egen palett, så en orange design förblir läsbar i varje storlek utan rutor eller skuggor.

Orange gradient i CSS

Varje kod ovan är ett enda CSS-värde du kan klistra in i background. För en sektion som behöver både värme och djup, lägg ett radiellt ljus över en linjär bas och sätt alltid en enfärgad reservfärg. Läs CSS linjära gradienter för hela syntaxen.

.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}

Vill du ha en orange look som ingen annan postar, bläddra i Marknaden efter varma Marks: sök ord som ”bränd orange” eller ”aprikos”, designa gratis med vilken oclaimad som helst och säkra den om den blir ditt varumärke.