Gradiente ciano: codici elettrici e nitidi

Un gradiente ciano fonde il colore brillante a metà strada tra verde e blu con uno dei suoi vicini: bianco per il ghiaccio, blu per un look tech elettrico, lime per la freschezza, magenta per un tono cyber, o un navy profondo dove il ciano sembra brillare. Il ciano puro da schermo è #00ffff, ed è molto più chiaro di quanto si pensi, quindi la vera abilità sta nel decidere dove vanno le parole. Seguono codici da copiare per ogni look, con i numeri di contrasto che contano.

Ciano, verde acqua e turchese non sono la stessa cosa

Questi tre vengono scambiati di continuo, e la differenza conta quando fai un brief a un designer o scegli un codice. Il CSS li nomina tutti e tre, e sono chiaramente distinti. Il ciano è il più brillante e il più equilibrato tra verde e blu. Il turchese è più morbido e un po’ più verde, come la pietra preziosa. Il verde acqua (teal) è molto più scuro e calmo.

Per i parenti più calmi, vedi gradiente verde acqua e gradiente turchese. Questo articolo resta sul lato brillante.

Codici per gradienti ciano ghiaccio e piscina

L’estremo chiaro del ciano sa di acqua fredda e aria pulita. Il ghiaccio è quasi bianco con un accenno di colore; ghiacciaio e piscina scendono più in profondità, attraverso il ciano brillante fino a un blu verde che può reggere testo bianco in basso. Si adattano a offerte estive, cura della pelle con una storia rinfrescante, bevande e tutto ciò che vuole sembrare rinfrescante.

Ciano elettrico su sfondi scuri

Il ciano diventa elettrico quando sta sul buio. Una piccola luce ciano su un fondo quasi nero o navy sembra uno schermo, un laser o una visualizzazione di dati, ed è per questo che è ovunque nel software, nei giochi e nella scienza. Tieni scuro gran parte dell’inquadratura e lascia che il ciano occupi un angolo o un bordo. Il gradiente ciano blu di questa serie è il più versatile di tutti, brillante a un’estremità e saldamente blu all’altra.

Per schemi completi costruiti su questo look, palette di colori tech ne ha diversi, e i gradienti neon lo spingono ancora più verso la vita notturna.

Ciano con lime e con magenta

Dal ciano al lime si passa per la menta e il tono è sportivo, fresco e ottimista. Il ciano con il magenta è l’abbinamento cyberpunk: due dei tre primari di stampa, entrambi a pieno volume. Fallo passare per un indaco scuro nel mezzo e sembrerà una strada al neon di notte invece di un giocattolo per bambini. L’articolo sul gradiente magenta tratta l’altro lato di questo abbinamento.

La trappola del contrasto: parole sul ciano

Il ciano è uno dei colori saturi più chiari che uno schermo possa mostrare. Il testo bianco sul #00ffff puro ha un contrasto di appena 1,3 a 1 circa, illeggibile, mentre il nero sullo stesso ciano arriva a circa 16,7 a 1. Il bianco comincia a funzionare quando il ciano si approfondisce fino a circa #0e7490, dove raggiunge più o meno 5,4 a 1. Contrasto dei colori e accessibilità spiega i rapporti e gli obiettivi.

È il tipo di giudizio che Gradiently fa per te. Inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark, e il Mark sposta la sua zona più calma e con miglior contrasto dietro le parole, così uno sfondo ciano brillante non lascia mai il testo bianco in difficoltà.

Un bordo a gradiente ciano in CSS

Sulle interfacce scure il ciano funziona magnificamente come bordo invece che come riempimento. Un bordo a gradiente mantiene leggibile la scheda aggiungendo il tono elettrico. Usa due sfondi, uno ritagliato sul padding e uno sul bordo, quindi mantiene gli angoli arrotondati.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}

Altre tecniche, compresi i bordi animati, sono in bordo a gradiente in CSS.

Dove sta bene un gradiente ciano

Il ciano è una scelta naturale per lanci di software, strumenti per sviluppatori, giochi, costumi da bagno, bevande e tutto ciò che vuole sembrare veloce o freddo. Il giorno del lancio, tieni un solo look ciano tra il post di annuncio, l’anteprima del link e il banner del changelog, così le persone lo riconoscono in ogni feed. Branding per startup SaaS mostra come costruire un’intera identità intorno a un colore brillante come questo.