Gradiente corallo: codici vivaci tra il rosa e l’arancione

Un gradiente corallo fonde arancioni caldi e rosati, i colori in cui il rosa diventa arancione. Spingilo verso il rosa e sembra grazioso e fresco; spingilo verso il mandarino e sembra solare ed energico. Il corallo è allegro e molto visibile, il che lo rende un favorito per estate, cibo, bellezza e fitness. Le sue due trappole sono una striscia grigia quando incontra il verde acqua e il testo che sparisce. Entrambe sono facili da evitare una volta che le conosci.

Corallo, salmone, pesca e anguria

Gli arancioni caldi rosati condividono molti nomi. Vale la pena distinguerli, perché la parola giusta aiuta a scegliere i punti giusti e a descrivere ciò che vuoi a un designer o al Designer in Gradiently.

Gradienti corallo vivaci

Questi sono il corallo al suo più vivace. Tengono l’attenzione anche in miniatura, ed è per questo che funzionano così bene per post di saldi, lanci, corsi di fitness e tutto ciò che vuoi far notare in un feed affollato.

Qualche modo di usarli: «Corallo classico» dietro una sola riga come «Apriamo a mezzogiorno» in una storia 1080×1920; «Punch tropicale» come copertina di un menu di drink estivi; «Tramonto corallo» che scende lungo un pin Pinterest a 1000×1500 per una guida di viaggio. Il corallo è forte, quindi lascia che riempia l’inquadratura e tieni semplice tutto il resto: un titolo, un dettaglio, molto spazio.

Gradienti corallo dal rosa all’arancione

Corallo tendente al rosa

Spingi il corallo verso il rosa e il rosa pallido e diventa più morbido e romantico, ideale per bellezza, fioristi, matrimoni e marchi lifestyle. Per il lato più rosato della famiglia, vedi i gradienti rosa.

Corallo tendente all’arancione

Spingilo dall’altra parte, verso l’albicocca e il mandarino, e il corallo diventa più solare e più forte: menu estivi, bar di frullati, vacanze. I gradienti arancione rosa coprono l’intero spazio tra i due.

Corallo e verde acqua senza il centro grigio

Corallo e verde acqua sono uno dei grandi abbinamenti: caldo contro freddo, barriera corallina contro mare. Ma stanno quasi all’opposto sulla ruota dei colori, quindi una fusione diretta passa per un grigio spento al centro. La soluzione è tenerli separati. Usa il verde acqua come fondo con una luce corallo, il corallo come fondo con un accento verde acqua, oppure passa dall’uno all’altro attraverso tinte molto pallide. Gradienti sporchi spiega perché il centro diventa grigio.

Su un menu o un poster, prova un verde acqua molto scuro come #042f2e con titoli e pulsanti corallo. Il corallo lì arriva a circa 5,8 a 1, molto meglio del bianco sul corallo, e risulta deciso ed estivo. Il lato verde acqua è trattato nei gradienti verde acqua.

Corallo su fondo scuro

Il corallo brilla splendidamente su prugna profondo, blu notte o quasi nero. Una sola luce corallo su un fondo scuro sembra un’insegna al neon o un tramonto sul mare, e si adatta a bar, musica, vita notturna ed eventi serali. Tieni la luce corallo lontana da dove stanno le parole, e scrivile in conchiglia pallido o bianco sull’area scura.

Testo su un gradiente corallo

Il corallo sembra abbastanza deciso per il testo bianco, ed è proprio per questo che tanti design corallo falliscono. Il bianco su #ff7f50 misura circa 2,5 a 1, ben sotto il 4,5 a 1 richiesto per il testo corrente. Un marrone bordeaux profondo come #3b0d0c misura circa 6,7 a 1 sullo stesso corallo e mantiene il calore. Se vuoi il testo bianco, approfondisci il corallo fino a un rosso come #e11d48, dove il bianco arriva a circa 4,7 a 1. Il metodo è in contrasto dei colori e accessibilità.

Un Mark di Gradiently fa questa regolazione da solo: sposta la sua regione più calma e con il miglior contrasto dietro le tue parole e Auto sceglie inchiostro chiaro o scuro per ogni riga dalla palette del Mark stesso. Niente riquadri né ombre portate.

CSS di un gradiente corallo per un pulsante

Il corallo fa un invito all’azione amichevole. Tieni il gradiente abbastanza chiaro perché un’etichetta scura resti leggibile, e fai scorrere la sua posizione al passaggio del mouse invece di scambiare i colori. Pulsanti con gradiente CSS ha altri schemi.

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