Koral gradient: livlige koder mellem pink og orange

En koral gradient blander varme, lyserødlige orange toner, farverne hvor pink bliver til orange. Læn den mod rosa, og den føles charmerende og frisk. Læn den mod mandarin, og den føles solrig og energisk. Koral er glad og meget synlig, hvilket gør den til en favorit til sommer, mad, skønhed og fitness. Dens to faldgruber er en grå stribe, når den møder blågrøn, og tekst, der forsvinder på den. Begge er lette at undgå, når du kender dem.

Koral, laks, fersken og vandmelon

Varme lyserødlige orange nuancer deler mange navne. De er værd at holde ude fra hinanden, for det rette ord hjælper dig med at vælge de rette stop og beskrive, hvad du vil have, til en designer eller til Designer i Gradiently.

Klare koral gradienter

Det er koral på sit mest livlige. De holder på opmærksomheden i miniaturestørrelse, og derfor virker de så godt til tilbudsopslag, lanceringer, fitnesshold og alt, du vil have bemærket i et travlt feed.

Et par måder at bruge dem på: »Klassisk koral« bag én enkelt linje som »Dørene åbner kl. 12« på en 1080×1920-story, »Tropisk punch« som forside på et sommerdrinkskort, »Koral-solnedgang« ned ad en Pinterest-pin på 1000×1500 til en feriguide. Koral er stærk, så lad den fylde rammen og hold alt andet på siden enkelt: én overskrift, én detalje og masser af luft.

Koral gradienter fra pink til orange

Koral med hældning mod pink

Skub koral mod rosa og blush, og den bliver blødere og mere romantisk, ideel til skønhed, blomsterhandlere, bryllupper og lifestylebrands. Til den mere lyserøde side af familien, se pink gradienter.

Koral med hældning mod orange

Skub den den anden vej, mod abrikos og mandarin, og koral bliver solrigere og højere: sommermenuer, smoothiebarer, ferier. Orange-pink gradienter dækker hele spændet mellem de to.

Koral og blågrøn uden den grå midte

Koral og blågrøn er et af de store par: varmt mod køligt, rev mod hav. Men de ligger næsten modsat hinanden på farvehjulet, så en ligefrem blanding mellem dem passerer en kedelig grå midte. Løsningen er at holde dem adskilt. Brug blågrøn som bund med et koral lys, koral som bund med en blågrøn accent, eller før dem sammen gennem meget lyse toner. Mudrede gradienter forklarer, hvorfor midten bliver grå.

På en menu eller plakat kan du prøve en meget mørk blågrøn som #042f2e med koralfarvede overskrifter og knapper. Koral når omkring 5,8 til 1 dér, langt bedre end hvid på koral, og det ser dristigt og sommerligt ud. Den blågrønne side er dækket i blågrønne gradienter.

Koral på mørk bund

Koral gløder smukt mod dyb blomme, marineblå eller næsten sort. Et enkelt koral lys på mørk bund føles som et neonskilt eller en solnedgang over havet og passer til barer, musik, natteliv og aftenevents. Hold det koralfarvede lys væk fra det sted, hvor ordene sidder, og sæt dem i en lys skalfarve eller hvid på det mørke område.

Tekst på en koral gradient

Koral ser dristig nok ud til hvid skrift, og det er netop derfor, så mange koraldesigns fejler. Hvid på #ff7f50 måler omkring 2,5 til 1, langt under de 4,5 til 1, der kræves til brødtekst. En dyb vinbrun som #3b0d0c måler omkring 6,7 til 1 på den samme koral og bevarer varmen. Vil du have hvid skrift, så uddyb koralen til en rød som #e11d48, hvor hvid når omkring 4,7 til 1. Metoden står i farvekontrast og tilgængelighed.

En Gradiently Mark laver denne justering af sig selv: den flytter sit roligste område med bedst kontrast bag dine ord, og Automatisk farve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet. Ingen bokse eller slagskygger nødvendige.

Koral gradient-CSS til en knap

Koral giver en venlig opfordring til handling. Hold gradienten lys nok til, at en mørk etiket kan læses, og lad dens position glide ved hover frem for at skifte farver. CSS-gradientknapper har flere mønstre.

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