Recentemente ho aggiornato la grafica animata del mio sito web con un nuovo tema e un gruppo di personaggi pionieristici, mettendo in pratica molte delle tecniche che ho condiviso in questa serie. Alcune delle mie animazioni cambiano aspetto quando qualcuno interagisce con loro o in diversi momenti della giornata.
I colori nella grafica in cima alle pagine del mio blog cambiano ogni giorno dalla mattina alla sera. Poi c'è la modalità neve, che aggiunge colori freddi e un tema invernale, per gentile concessione di uno strato di sovrapposizione e di una modalità di fusione.
Mentre lavoravo su questo, ho iniziato a chiedermi se i valori di colore relativi CSS potessero darmi maggiore controllo semplificando allo stesso tempo il processo. Nota: in questo tutorial mi concentrerò sui valori cromatici relativi e sullo spazio colore OKLCH per la grafica e le animazioni tematiche. Se vuoi immergerti in profondità nei colori relativi, Ahmad Shadeed ha creato una superba guida interattiva. Per quanto riguarda gli spazi colore, le gamme e OKLCH, il nostro Geoff Graham ne ha scritto.
L'uso ripetuto degli elementi è stato fondamentale. Gli sfondi sono stati riutilizzati quando possibile, con zoom e sovrapposizioni che aiutano a costruire nuove scene dalla stessa opera d'arte. È nato per necessità, ma ha anche incoraggiato a pensare in termini di serie piuttosto che di singole scene. Il problema con l'aggiornamento manuale delle tavolozze dei colori Andiamo direttamente alla mia sfida. Nei titoli di cartoni animati come questo - basato sull'episodio "Lullabye-Bye Bear" dello Yogi Bear Show del 1959 - e nel mio lavoro in generale, le tavolozze sono limitate a pochi colori selezionati.
Creo sfumature e tinte da quello che chiamo il mio colore "fondotinta" per espandere la tavolozza senza aggiungere altre tonalità.
In Sketch, lavoro nello spazio colore HSL, quindi questo processo prevede l'aumento o la diminuzione del valore di luminosità del colore del mio fondotinta. Onestamente, non è un compito arduo, ma scegliere un colore di fondotinta diverso richiede la creazione di una serie completamente nuova di sfumature e tinte. Farlo manualmente, ancora e ancora, diventa rapidamente laborioso.
Ho menzionato lo spazio colore HSL (H (tonalità), S (saturazione) e L (luminosità), ma questo è solo uno dei tanti modi per descrivere il colore. RGB – R (rosso), G (verde), B (blu) – è probabilmente il più familiare, almeno nella sua forma esadecimale. C'è anche LAB - L (luminosità), A (verde-rosso), B (blu-giallo) - e il modello più recente, ma ora ampiamente supportato LCH - L (luminosità), C (crominanza), H (tonalità) - modello nella sua forma OKLCH. Con LCH (in particolare OKLCH nei CSS) posso regolare il valore di luminosità del mio colore di fondotinta.
Oppure posso alterarne la crominanza. La croma LCH e la saturazione HSL descrivono entrambe l'intensità o la ricchezza di un colore, ma lo fanno in modi diversi. LCH mi offre una gamma più ampia e una fusione più prevedibile tra i colori.
Posso anche alterare la tonalità per creare una tavolozza di colori che condividano gli stessi valori di luminosità e crominanza. Sia in HSL che in LCH, lo spettro delle tonalità inizia dal rosso, si sposta attraverso il verde e il blu e ritorna al rosso.
Perché OKLCH ha cambiato il modo in cui penso al colore Il supporto dei browser per lo spazio colore OKLCH è ormai diffuso, anche se gli strumenti di progettazione, incluso Sketch, non sono stati aggiornati. Fortunatamente, ciò non dovrebbe impedirti di utilizzare OKLCH. I browser convertiranno felicemente i valori Hex, HSL, LAB e RGB in OKLCH per te. Puoi definire una proprietà personalizzata CSS con un colore di base in qualsiasi spazio, incluso Hex: /* Colore fondotinta */ --fondazione: #5accd6;
Tutti i colori derivati da esso verranno convertiti automaticamente in OKLCH: --foundation-light: oklch(from var(--foundation) [...]; } --foundation-mid: oklch(from var(--foundation) [...]; } --foundation-dark: oklch(from var(--foundation) [...]; }
Colore relativo come sistema di progettazione Pensa al colore relativo come se dicesse: “Prendi questo colore, modificalo, poi dammi il risultato”. Esistono due modi per regolare un colore: modifiche assolute e modifiche proporzionali. Sembrano simili nel codice, ma si comportano in modo molto diverso quando inizi a scambiare i colori di base. Comprendere questa differenza è ciò che può trasformare l’uso del colore relativo in un sistema. /* Colore fondotinta */ --fondazione: #5accd6;
Ad esempio, il valore di luminosità del mio colore di fondotinta è 0,7837, mentre una versione più scura ha un valore di 0,5837. Per calcolare la differenza, sottraggo il valore più basso da quello più alto e applico il risultato utilizzando una funzione calc(): --fondazione-scura: oklch(da var(--fondazione) calc(l - 0,20)ch);
Per ottenere un colore più chiaro, aggiungo invece la differenza: --fondazione-luce: oklch(da var(--fondazione) calc(l + 0,10) c h);
Cromagli aggiustamenti seguono lo stesso processo. Per ridurre l'intensità del mio colore di fondotinta da 0,1035 a 0,0035, sottraggo un valore dall'altro: oklch(da var(--fondazione) l calc(c - 0,10) h);
Per creare una tavolozza di tonalità, calcolo la differenza tra il valore della tonalità del mio colore di base (200) e la mia nuova tonalità (260): oklch(da var(--fondazione) l c calc(h + 60));
Questi calcoli sono assoluti. Quando sottraggo un importo fisso, sto effettivamente dicendo: "Sottrai sempre questo importo". Lo stesso vale quando si aggiungono valori fissi: calcolo(c - 0,10) calcolo(c + 0,10)
Ho imparato i limiti di questo approccio nel modo più duro. Quando facevo affidamento sulla sottrazione dei valori di crominanza fissi, i colori crollavano verso il grigio non appena cambiavo il fondotinta. Una tavolozza che funzionava per un colore è andata in pezzi per un altro. La moltiplicazione si comporta diversamente. Quando moltiplico la crominanza, dico al browser: “Riduci l’intensità di questo colore di una proporzione”. Il rapporto tra i colori rimane intatto, anche quando cambia il fondotinta: calcolo(c * 0,10)
Le mie regole Muovilo, Scalalo, Ruotalo
Muovi la leggerezza (aggiungi o sottrai), Scala crominanza (moltiplicazione), Ruota la tonalità (aggiungi o sottrai gradi).
Ridimensiono la crominanza perché voglio che i cambiamenti di intensità rimangano proporzionali al colore di base. Le relazioni di tonalità sono rotazionali, quindi moltiplicare la tonalità non ha senso. La leggerezza è percettiva e assoluta: moltiplicarla spesso produce risultati strani.
Da un colore a un intero tema Il colore relativo mi consente di definire un colore di base e generare da esso tutti gli altri colori di cui ho bisogno: riempimenti, tratti, interruzioni di gradiente, ombre. A quel punto il colore smette di essere una tavolozza e inizia a essere un sistema. Le illustrazioni SVG tendono a riutilizzare gli stessi pochi colori nei riempimenti, nei tratti e nelle sfumature. Il colore relativo ti consente di definire queste relazioni una volta e riutilizzarle ovunque, proprio come gli animatori riutilizzavano gli sfondi per creare nuove scene.
Cambia il colore del fondotinta una volta e ogni colore derivato si aggiorna automaticamente, senza ricalcolare nulla a mano. Al di fuori della grafica animata, potrei utilizzare questo stesso approccio per definire i colori per gli stati degli elementi interattivi come pulsanti e collegamenti. Il colore di fondotinta che ho usato nel titolo del mio cartone animato "Lullabye-Bye Bear" è un blu dall'aspetto ciano. Lo sfondo è un gradiente radiale tra il mio fondotinta e una versione più scura.
Per creare versioni alternative con mood completamente diversi mi basta cambiare il colore del fondotinta: --fondazione: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(da var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Per associare queste proprietà personalizzate al mio gradiente SVG senza duplicare i valori di colore, ho sostituito i valori di stop-color hardcoded con stili incorporati:
Successivamente, dovevo assicurarmi che il mio testo Toon fosse sempre in contrasto con il colore di fondotinta che scelgo. Una rotazione della tonalità di 180 gradi produce un colore complementare che sicuramente risalta, ma può vibrare in modo scomodo: .luce-testo { riempimento: oklch(da var(--foundation) l c calc(h + 180)); }
Uno spostamento di 90° produce un colore secondario vivido senza essere completamente complementare: .luce-testo { riempimento: oklch(da var(--foundation) lccalc(h - 90)); }
La mia ricreazione del titolo di cartone animato "El Kabong" di Quick Draw McGraw del 1959 utilizza le stesse tecniche ma con una tavolozza più varia. Ad esempio, c'è un altro gradiente radiale tra il colore del fondotinta e una tonalità più scura.
L'edificio e l'albero sullo sfondo sono semplicemente tonalità diverse dello stesso colore di base. Per quei percorsi, avevo bisogno di due colori di riempimento aggiuntivi: .bg-metà { riempimento: oklch(da var(--foundation) calc(l - 0,04) calc(c * 0,91) h); }
.bg-scuro { riempimento: oklch(da var(--foundation) calc(l - 0,12) calc(c * 0,64) h); }
Quando le fondamenta cominciano a muoversi
Finora, tutto ciò che ho mostrato è stato statico. Anche quando qualcuno usa un selettore di colori per cambiare il colore del fondotinta, il cambiamento avviene istantaneamente. Ma la grafica animata raramente resta ferma: l’indizio è nel nome. Quindi, se il colore fa parte del sistema, non c’è motivo per cui non possa anche animarsi.
Per animare il colore del fondotinta, devo prima dividerlo nei suoi canali OKLCH- luminosità, crominanza e tonalità. Ma c'è un importante passaggio aggiuntivo: devo registrare tali valori come proprietà personalizzate digitate. Ma cosa significa?
Per impostazione predefinita, un browser non sa se il valore di una proprietà personalizzata CSS rappresenta un colore, una lunghezza, un numero o qualcos'altro. Ciò spesso significa che non possono essere interpolati in modo fluido durante l'animazione e saltano da un valore a quello successivo.
La registrazione di una proprietà personalizzata indica al browser il tipo di valore che rappresenta e come dovrebbe comportarsi nel tempo. In questo caso, desidero che il browser tratti i miei canali di colore come numeri in modo che possano essere animati senza problemi.
@proprietà --f-l {
sintassi: "
@proprietà --fc {
sintassi: "
@proprietà --f-h {
sintassi: "
Una volta registrate, queste proprietà personalizzate si comportano come CSS nativi. Il browser può interpolarli fotogramma per fotogramma. Quindi ricostruisco il colore del fondotinta da questi canali: --fondazione: oklch(var(--f-l) var(--f-c) var(--f-h));
In questo modo il colore della base diventa animabile, proprio come qualsiasi altro valore numerico. Ecco una semplice animazione di “respiro” che sposta delicatamente la leggerezza nel tempo: @keyframe respira { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-titolo { animazione: respira 10 secondi di facilità di entrata e di uscita all'infinito; }
Poiché ogni altro colore nei riempimenti, nelle sfumature e nei tratti deriva da --foundation, si animano tutti insieme e non è necessario aggiornare manualmente nulla. Un colore animato, tanti effetti All'inizio di questo processo, mi sono chiesto se i valori relativi dei colori CSS potessero offrire più possibilità rendendoli allo stesso tempo più semplici da implementare. Recentemente ho aggiunto un nuovo sfondo per una miniera d'oro alla pagina dei contatti del mio sito web e la prima iterazione includeva lampade a olio che brillano e oscillano.
Volevo esplorare come l'animazione dei colori relativi CSS potesse rendere più realistico l'interno della miniera tingendolo con i colori delle lampade. Volevo che influenzassero il mondo che li circonda, come fa la luce reale. Quindi, invece di animare più colori, ho creato un piccolo sistema di illuminazione che anima un solo colore.
Il mio primo compito è stato quello di inserire uno strato di sovrapposizione tra lo sfondo e le mie lampade:
Ho usato la modalità mix-blend: color perché tinge ciò che c'è sotto preservando la luminanza sottostante. Poiché desidero che l'overlay sia visibile solo quando le animazioni sono attivate, ho attivato l'overlay: .svg-mine #overlay { visualizzazione: nessuno; }
@media (preferisce il movimento ridotto: nessuna preferenza) { .svg-mine[data-animations=on] #overlay { visualizzazione: blocco; opacità: 0,5; } }
Il rivestimento era a posto, ma non ancora collegato alle lampade. Avevo bisogno di una fonte di luce. Le mie lampade sono semplici e ognuna contiene un elemento circolare che ho sfocato con un filtro. Il filtro produce una sfocatura molto morbida sull'intero cerchio.
Invece di animare la sovrapposizione e le lampade separatamente, animiamo un singolo gettone colore "fiamma" e da esso deriva tutto il resto. Innanzitutto, registro tre proprietà personalizzate digitate per i canali OKLCH:
@proprietà --fl-l {
sintassi: "
Ho animato quei canali, spingendo deliberatamente alcuni fotogrammi verso l'arancione in modo che lo sfarfallio venga letto chiaramente come la luce del fuoco:
@keyframes fiamma { 0%, 100% { --fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 92; } 12% { --fl-l: 0,83; --fl-c: 0,14; --fl-h: 100; } 18% { --fl-l: 0,88; --fl-c: 0,11; --fl-h: 94; } 24% { --fl-l: 0,82; --fl-c: 0,16; --fl-h: 82; } 30% { --fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36% { --fl-l: 0,79; --fl-c: 0,17; --fl-h: 76; } 44% { --fl-l: 0,87; --fl-c: 0,12; --fl-h: 96; } 52% { --fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60% { --fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68% { --fl-l: 0,83; --fl-c: 0,16; --fl-h: 85; } 76% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 91; } 84% { --fl-l: 0,85; --fl-c: 0,14; --fl-h: 98; } 92% {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Quindi ho adattato l'animazione all'SVG, quindi le variabili condivise sono disponibili sia per le lampade che per il mio overlay:
@media (preferisce il movimento ridotto: nessuna preferenza) { .svg-mine[data-animations=on] { animazione: fiamma 3.6s infinita lineare; isolamento: isolare;
/* Crea un colore di fiamma dai canali animati */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Colore della lampada derivato dalla fiamma */ --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Tinta di sovrapposizione derivata dalla stessa fiamma */ --overlay-tint: oklch(from var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Infine, ho applicato i colori derivati alle lampade luminose e alla sovrapposizione su di esse: @media (preferisce il movimento ridotto: nessuna preferenza) { .svg-mine[data-animations=on] #mine-lamp-1 > cerchio, .svg-mine[data-animations=on] #mine-lamp-2 > cerchio { riempimento: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { visualizzazione: blocco; riempimento: var(--overlay-tint); opacità: 0,5; } }
Quando la fiamma vira verso l’arancione, le lampade si scaldano, e con esse la scena si scalda. Quando la fiamma si raffredda, tutto si sistema insieme. La parte migliore è che nulla viene scritto manualmente. Se cambio il colore della base o modifico gli intervalli di animazione della fiamma, l'intero sistema di illuminazione si aggiorna simultaneamente. Puoi vedere il risultato finale sul mio sito web. Riutilizzare, Riutilizzare, Rivisitare Gli animatori di Hanna-Barbera sono stati costretti a riutilizzare gli elementi per necessità, ma io riutilizzo i colori perché rendono il mio lavoro più coerente e più facile da mantenere. I valori di colore relativi CSS mi consentono di:
Definire un unico colore di fondotinta, Descrivi come gli altri colori si relazionano ad esso, Riutilizzare quelle relazioni ovunque e Animare il sistema modificando un valore.
Il colore relativo non semplifica solo la tematizzazione. Incoraggia un modo di pensare in cui il colore, come il movimento, è intenzionale e in cui la modifica di un valore può trasformare un'intera scena senza riscrivere il lavoro sottostante.
