60 combinazioni di colori per gradienti che funzionano, con i codici

Le migliori combinazioni di colori per gradienti seguono una di due regole: usano tinte vicine sulla ruota dei colori, così la sfumatura resta pulita, oppure collegano tinte lontane con un colore centrale scelto, così non diventa mai grigia. Qui sotto ci sono 60 combinazioni che seguono quelle regole, raggruppate per atmosfera: calme, decise, calde, fredde, scure e pastello. Copia qualsiasi campione come CSS, poi leggi la nota sotto ogni gruppo per capire perché funzionano, così puoi fare le tue.

Tutto qui è semplice CSS con colori esadecimali, quindi funziona in qualsiasi browser, e gli stessi codici si possono digitare in qualsiasi strumento di design. Se un termine è nuovo, cos’è un gradiente spiega punti e angoli.

Combinazioni di gradienti calme

I gradienti calmi tengono i colori vicini sia per tinta sia per luminosità. Nulla salta, quindi l’occhio riposa. Sono buoni sfondi per la lettura, brand del benessere, portfolio e tutto ciò che deve sembrare quieto. Salvia e pietra, per esempio, si muove solo di poco sulla ruota e perde un po’ di luminosità strada facendo, e questo si legge come l’ombra su una parete più che come un effetto di colore.

Combinazioni di gradienti decise

I gradienti decisi usano colori saturi e più distanza sulla ruota. Catturano l’attenzione in un feed affollato, in un banner di saldi o in una pagina di lancio. Il trucco è scegliere coppie la cui sfumatura diretta resti luminosa. Da magenta ad ambra passa per il corallo; da cobalto a corallo passa per il viola. Nessuna si avvicina al grigio, ed è per questo che sembrano vivide da un capo all’altro.

Combinazioni di gradienti calde

I gradienti caldi vivono tra il rosso e il giallo e sembrano solari, appetitosi e umani. Vanno bene per cibo, ospitalità, lifestyle e tutto ciò che è personale. La maggior parte di questi aggiunge un’estremità più scura e più rossa perché la sfumatura abbia peso: Ora dorata va dal miele pallido all’ambra bruciata come la luce tarda scende lungo una parete. Per la psicologia della temperatura, vedi colori caldi e freddi.

Combinazioni di gradienti fredde

I gradienti freddi stanno tra il verde e il viola e sembrano puliti, calmi e precisi. Sono la casa naturale di tecnologia, salute, finanza e acqua. Il blu è l’àncora della maggior parte di loro, ed è per questo che sembrano affidabili, e perché un gradiente freddo ha bisogno di un dettaglio distintivo, come un’estremità viola o uno spostamento verso il verde acqua, per non somigliare a ogni banca. Altri blu sono raccolti nei gradienti blu.

Combinazioni di gradienti scure

I gradienti scuri sono fondi quasi neri da cui sale un solo colore acceso. Sembrano premium, notturni e cinematografici, e fanno sembrare nitido il testo bianco. Tieni l’estremità scura leggermente colorata e non nera pura, così la sfumatura ha qualcosa da attraversare. Le rampe scure fanno banding con facilità, quindi aggiungi grana prima di pubblicare; vedi gli sfondi con gradiente scuro.

Combinazioni di gradienti pastello

I pastelli sono colori pallidi, molto luminosi e con un po’ di saturazione. Sembrano freschi, morbidi e cordiali, e vanno bene per bellezza, neonati, cartoleria e campagne primaverili. Poiché sono tutti così chiari, anche tinte pastello distanti possono sfumare in un grigio biancastro, quindi le ultime due qui passano per un lilla pallido. Componi il testo sui pastelli in un inchiostro scuro e non in bianco. Ce n’è di più nei gradienti pastello.

Come usare questi codici di gradiente

Ogni codice è un valore background CSS completo. Incollalo su qualsiasi elemento, oppure riporta i colori esadecimali e le posizioni dei punti in uno strumento di design. Sul web, imposta prima un colore pieno di ripiego, preso dal punto più scuro o più importante.

.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}

Come fare la tua combinazione

1. 1

   Scegli prima l’atmosfera

   Decidi calma o decisa, calda o fredda, scura o chiara prima di qualsiasi colore. Restringe le scelte a uno dei gruppi qui sopra.

2. 2

   Scegli un colore àncora

   Di solito il colore del tuo brand o quello di ciò che vendi. Vedi come scegliere i colori del brand.

3. 3

   Aggiungi un vicino

   Spostati di 30-60 gradi sulla ruota dei colori per un secondo colore pulito. Cambia un po’ anche la luminosità, per dare profondità.

4. 4

   Collega ciò che è distante

   Se vuoi una tinta lontana, metti un colore centrale luminoso tra le due così la sfumatura non diventa grigia. Vedi i gradienti sporchi.

5. 5

   Rendila tua

   Cambia l’angolo, sposta un punto dal 50%, aggiungi un terzo colore o uno strato di grana. Sono i piccoli cambiamenti a impedire che una combinazione sembri un preset.

Un codice popolare è un buon inizio, ma altre migliaia di design partono da lì. Se vuoi un’identità a gradiente che nessun altro possieda, puoi abbinare un’immagine che ami alla sua palette e ai Mark più vicini, oppure crearne di nuovi simili.