Korallgradient: livliga koder mellan rosa och orange

En korallgradient blandar varma, rosiga oranger, färgerna där rosa blir orange. Luta den mot rosé så känns den charmig och fräsch; luta den mot mandarin så känns den solig och energisk. Korall är glad och mycket synlig, vilket gör den till en favorit för sommar, mat, skönhet och träning. Dess två fällor är en grå rand när den möter turkos och text som försvinner på den. Båda är lätta att undvika när du känner till dem.

Korall, lax, persika och vattenmelon

Varma rosiga oranger delar många namn. De är värda att skilja åt, eftersom rätt ord hjälper dig att välja rätt stopp och beskriva vad du vill ha för en designer eller för Designer i Gradiently.

Klara korallgradienter

Det här är korall när den är som livligast. De håller uppmärksamheten i miniatyrstorlek, och därför fungerar de så bra för rea-inlägg, lanseringar, träningspass och allt du vill ska synas i ett fullt flöde.

Några sätt att använda dem: ”Klassisk korall” bakom en enda rad som ”Dörrarna öppnar klockan tolv” på en story i 1080×1920; ”Tropisk punch” som omslag till en sommardrinkmeny; ”Korallsolnedgång” nedför en Pinterest-pin i 1000×1500 för en semesterguide. Korall är stark, så låt den fylla bilden och håll allt annat på sidan enkelt: en rubrik, en detalj, gott om utrymme.

Korallgradienter från rosa till orange

Rosa lutande korall

Skjut korall mot rosé och blush så blir den mjukare och mer romantisk, perfekt för skönhet, blomsterhandlare, bröllop och livsstilsvarumärken. För den rosigare sidan av familjen, se rosa gradienter.

Orange lutande korall

Skjut den åt andra hållet, mot aprikos och mandarin, så blir korall soligare och högljuddare: sommarmenyer, smoothiebarer, semestrar. Orangerosa gradienter täcker hela spannet mellan de två.

Korall och turkos utan grå mitt

Korall och turkos är ett av de stora paren: varmt mot kallt, rev mot hav. Men de sitter nästan rakt emot varandra på färghjulet, så en rak blandning mellan dem går genom ett trist grått i mitten. Lösningen är att hålla dem isär. Använd turkos som botten med ett korallljus, korall som botten med en turkos accent, eller led mellan dem via mycket bleka toner. Leriga gradienter förklarar varför mitten blir grå.

På en meny eller affisch, prova en mycket mörk turkos som #042f2e med korallfärgade rubriker och knappar. Korall når ungefär 5,8 till 1 där, långt bättre än vitt på korall, och det ser kraftfullt och sommarigt ut. Turkossidan tas upp i turkosa gradienter.

Korall på mörk botten

Korall glöder vackert mot djup plommon, marinblått eller nästan svart. Ett enda korallljus på mörk botten känns som en neonskylt eller en solnedgång över havet, och passar barer, musik, nattliv och kvällsevent. Håll korallljuset borta från där orden sitter och sätt dem i blekt snäckvitt eller vitt på den mörka ytan.

Text på en korallgradient

Korall ser tillräckligt kraftig ut för vit text, och det är precis därför så många korallfärgade designer misslyckas. Vitt på #ff7f50 mäts till ungefär 2,5 till 1, långt under de 4,5 till 1 som krävs för brödtext. Ett djupt vinbrunt som #3b0d0c mäts till ungefär 6,7 till 1 på samma korall och behåller värmen. Vill du ha vit text, fördjupa korallen till ett rött som #e11d48, där vitt når ungefär 4,7 till 1. Metoden finns i färgkontrast och tillgänglighet.

En Gradiently-Mark gör den här justeringen själv: den flyttar sin lugnaste, mest kontrasterande region bakom dina ord, och Auto-bläck väljer ljus eller mörk text för varje rad ur Markens egen palett. Inga rutor eller skuggor behövs.

CSS för en korallgradient på en knapp

Korall blir en vänlig uppmaning. Håll gradienten ljus nog för att en mörk etikett förblir läsbar, och låt positionen glida vid hovring i stället för att byta färger. CSS-gradientknappar har fler mönster.

.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}