Cos'è HSL e perché i designer dovrebbero padroneggiare

Il colore è uno degli strumenti più potenti nel toolkit di un designer, ma lavorare con sistemi tradizionali come HEX e RGB a volte può sembrare limitante. Questi formati funzionano, ma non riflettono il modo in cui vediamo o pensiamo al colore. Hai bisogno di una tonalità più chiara o vuoi abbinare la saturazione tra tonalità diverse? Ti sei lasciato indovinare.

È qui che arrivano Hue, Saturation e Lightness (HSL). Rende le regolazioni del colore più visive e prevedibili, e Divi 5 ora lo supporta in modo nativo grazie al suo relativo rilascio di funzionalità HSL. Esploriamo come funziona e perché vorrai padroneggiarlo.

Perché la maggior parte dei designer lotta con le scelte di colore

Gli strumenti a colori spesso non corrispondono al modo in cui pensiamo naturalmente al colore. Vedi una tonalità di blu che ami, ma l'unico modo per catturarlo è attraverso un codice esagonale come #4A90E2. Quelle lettere e numeri non significano nulla per il tuo cervello.

I colori esagonali vengono realizzati mescolando valori rosso, verde e blu. Ogni coppia (come 4A, 90, E2) mostra quanto di ciascun colore viene utilizzato, da 0 a 255. Insieme, creano il colore finale #4A90E2.

Potresti avere difficoltà a capire quali numeri cambiare quando hai bisogno di una versione più chiara del tuo marchio blu. Dovresti aumentare equamente tutti i valori RGB? O regolare solo un canale RGB (rosso, verde o blu)? I numeri non corrispondono a ciò che i tuoi occhi si aspettano, quindi ti regoli e anteprima fino a quando non ti sembra giusto.

I sistemi di colore tradizionali creano problemi più grandi quando lavori in contesti diversi. La creazione di varianti di colore diventa pura congetture. Vuoi cinque tonalità che lavorano insieme, ma non c'è sistema per questo. Lightening #4A90E2 a #6Ba3E8 potrebbe apparire giusto, oppure potrebbe sembrare sbiadito. Non lo saprai finché non lo vedrai.

Ottenere sfumature cambiando i codici esadecimali non è semplice. I nuovi valori esadecimali ( #6Ba3E8) sono scelti con cura a sinistra per creare una tonalità più chiara di #4A90E2. A destra, solo apportare modifiche nominali (#3B99E5) non alleggerisce il colore ma lo cambia completamente.

Questo flusso di lavoro lento e manuale richiede ore per essere completato. Modifica valori, controlli l'anteprima e modifica di nuovo, combattendo gli strumenti invece di progettare. La tua attenzione viene risucchiata nei dettagli tecnici quando dovrebbe concentrarsi su come i colori fanno sentire le persone.

Molti designer finiscono per evitare la sperimentazione del colore perché il processo sembra così goffo. Rimani con scelte sicure o copie palette da altri siti. Gli strumenti che dovrebbero aiutarti a esplorare la creatività del colore lo limitano effettivamente.

Il problema con i valori RGB statici

I valori RGB non si comportano sempre come ti aspetti. Il verde appare molto più luminoso che blu nella stessa impostazione, ma il sistema li tratta allo stesso modo. RGB (128, 128, 128) è un grigio medio perfetto, ma il modo in cui sembra variare a seconda dello schermo, l'illuminazione o il profilo di colore utilizzato.

Vuoi una versione più chiara del colore del tuo marchio? Puoi provare a aumentare i valori RGB e, a volte, ottieni ciò che ti aspettavi. Altre volte, ottieni qualcosa che sembra sbiadito e strano. Non c'è modo di dirlo in anticipo.

Il colore blu del marchio con valori RGB è aumentato equamente di +50, risultando in una tonalità lavata, che non è il tono più chiaro liscio atteso. Ciò dimostra che l'aggiunta della stessa quantità a ciascun canale RGB non produce sempre tonalità di colore prevedibili o bilanciate.

I colori RGB si spostano anche tra diversi programmi. Ciò accade a causa delle differenze nei profili di colore, nei motori di rendering e in che modo i browser interpretano tali valori. Scegli una tonalità perfetta in Photoshop, copia il codice esadecimale sul tuo sito Web e potrebbe ancora sembrare leggermente diverso. Le linee guida del marchio diventano più difficili da applicare quando lo stesso codice di colore sembra leggermente diverso tra i browser e gli strumenti di progettazione.

Ogni colore cambia a modo suo quando si tenta di alleggerire o scurire. Poiché RGB non regola i colori in modo uniforme, alcune tonalità si sbiadiscono più velocemente o si spostano in modi inaspettati. Alcune tonalità desaturano più velocemente di altre all'aumentare della leggerezza. Il tuo blu diventa grigio mentre il tuo rosso rimane vibrante. Il tuo viola diventa fangoso mentre la tua arancia rimane pulita.

Il lavoro a colori si trasforma in prove ed errori anziché in un design intenzionale.

Qual è il sistema di tonalità, saturazione e leggerezza (HSL)?

Hue, saturazione e leggerezza (HSL) rompe il colore in tre parti che corrispondono al modo in cui il tuo cervello pensa davvero al colore. Hue sceglie il colore di base da una ruota di 360 opzioni. La saturazione controlla quanto sia vibrante o grigio quel colore. La leggerezza decide se è scuro, luminoso o da qualche parte tra.

Quando pensi: "Voglio un verde scuro", stai già pensando ai termini HSL. Sai che vuoi verde (tonalità), probabilmente abbastanza ricco (saturazione) e sul lato scuro (leggerezza).

Come lavorano insieme i tre componenti

Hue funziona come una ruota a colori tagliata dallo spettro della luce visibile. Le estremità si collegano al rosso a magenta, creando un ciclo liscio di ogni possibile colore. Vuoi l'arancia perfetta? Inizia da rosso (0 gradi) e spostati verso il giallo di circa 30 gradi.

La saturazione misura la purezza del colore in percentuale. Lo zero percento rimuove tutto il colore, lasciando il grigio. Il cento per cento dà la versione più vivida possibile. Pensa alla saturazione come alla differenza tra un segno al neon e un acquerello silenzioso.

Come funzionano i colori HSL, ispirati al grafico su Wikipedia sullo stesso argomento

La leggerezza varia dallo 0% (nero puro) al 50% (neutro) al 100% (bianco puro). La maggior parte dei colori utilizzabili vive tra il 20% e l'80% di leggerezza. Questo corrisponde al modo in cui pensi naturalmente a rendere colori più chiari o più scuri.

Perché i costruttori di pagine di solito evitano HSL

La maggior parte dei costruttori di pagine si attacca con codici esadecimali e RGB per motivi pratici, non perché questi sistemi funzionano meglio. Gli sviluppatori di costruttori affrontano veri ostacoli tecnici. Gli utenti conoscono già i codici esagonali di Photoshop e altri strumenti di progettazione. La conversione tra sistemi di colore richiede un'elaborazione extra.

Supportare HSL significa costruire nuove interfacce ed educare gli utenti su concetti non familiari, a meno che il raccoglitore di colori HSL non venga inchiodato perfettamente. Questo approccio conservativo ha senso dal punto di vista aziendale, anche se limita le possibilità creative.

Crea variazioni di colore perfette con i nuovi controlli HSL di Divi 5

HSL suona alla grande in teoria, ma la teoria non costruisce siti Web. Hai bisogno di strumenti che supportano questo approccio. La maggior parte dei costruttori di pagine ti costringono a tornare a codici esagonali e congetture RGB. Divi 5 cambia tutto su come lavori con il colore. Ma prima:

Cos'è Divi?

Divi è un costruttore di pagine che funziona in modo diverso dagli altri costruttori di pagine WordPress. Ottieni strumenti di progettazione visiva miscelati con seri controlli tipografici. L'editore dal vivo mostra le tue modifiche all'istante. Regola le dimensioni dei caratteri, modifica la spaziatura della linea e guarda la tua pagina aggiorna proprio lì.

Puoi rilasciare oltre 200 moduli ovunque tu voglia. Blocchi di testo, titoli e contenuti speciali giocano tutti bene insieme.

Ecco cosa rende Special Divi: oltre 2000 layout già pronti costruiti per le aziende reali. Stiamo parlando di progetti reali, non modelli di avviamento di base. Hai bisogno di qualcosa per il tuo ristorante? C'è un layout per questo. Gestire uno studio fotografico? Ti abbiamo coperto. Anche i consulenti e le startup tecnologici ottengono i propri progetti.

Ogni layout conosce il tuo settore. I colori, la spaziatura e il flusso di contenuti hanno tutti senso per il modo in cui i tuoi clienti pensano e navigano.

Prendi il controllo completo del sito

Il tema costruttore mette in mano ogni pezzo dello stile del testo del tuo sito. Costruisci intestazioni personalizzate che parlano il linguaggio del tuo marchio. Design Blog Pages che rendono i lunghi articoli facili da leggere. Le tue pagine di errore 404 possono mantenere gli stessi caratteri e lo stesso stile del resto del tuo sito.

Divi Ai porta l'intelligenza artificiale direttamente nel tuo flusso di lavoro. Genera titoli che suonano come se li hai scritti. Crea una copia del prodotto che corrisponda esattamente alla voce del tuo marchio.

Costruisce intere sezioni di pagina che comprendono la tua attività.

Scrive frammenti di codice quando ne hai bisogno.

La Divi Ai funziona anche con le tue immagini proprio all'interno del costruttore. Descrivi ciò che deve essere riparato in qualsiasi immagine e come apporta tali modifiche.

Anche generare immagini completamente nuove su richiesta.

Salta il problema della pagina vuota con siti rapidi Divi

Divi Quick Sites risolve il problema della pagina vuota che interrompe molti progetti prima di iniziare. I siti di avviamento professionisti sono già istituiti con la tipografia. Il nostro team di progettazione crea questi modelli con immagini e opere d'arte uniche non vedrai da nessun'altra parte.

Divi Quick Sites con Divi Ai può anche creare layout personalizzati in base alla descrizione della tua attività. Raccontagli della tua pratica di consulenza o del tuo ristorante e crea pagine pertinenti con una copia appropriata per il tuo settore.

Questo va oltre solo un wireframe. Ottieni titoli reali, copia del corpo e immagini che hanno senso per la tua attività. Puoi impostare i caratteri del tuo marchio e i colori in anticipo o lasciare che l'IA scelga per te.

Successivamente, tutto rimane completamente modificabile, quindi puoi perfezionare la tipografia per abbinare la tua visione.

Cosa c'è di nuovo in Divi 5?

Divi 5 è la prossima versione di Page Builder, attualmente in test Alpha e pronto per i nuovi progetti di siti Web. Ci siamo concentrati su miglioramenti pratici che accelerano il tuo lavoro quotidiano e rendono più divertenti i cantieri.

Le migliori parti delle attuali di Divi sono rimaste messe mentre abbiamo ricostruito tutto il resto. Fresh Interface Design incontra prestazioni migliorate sotto il cofano. Le pratiche di codifica moderne alimentano ora l'intero sistema.
Le pagine si caricano più velocemente di prima. I controlli rispondono più velocemente quando si fa clic su di loro. La tipografia rimane coerente in tutto il tuo sito senza un lavoro manuale extra.

Ecco alcuni punti salienti:

• Framework Complete Rebuild Dump Il vecchio sistema di code. Tutto funziona con l'architettura moderna a blocchi che i browser gestiscono molto meglio.
• Il sistema Flexbox di Divi 5 offre il controllo diretto per costruire layout moderni e reattivi, gestendo facilmente l'allineamento, la spaziatura e la confezione senza codice personalizzato.
• Il sistema a colori HSL porta controlli di colore che corrispondono al modo in cui i designer pensano. Regola tonalità, saturazione e leggerezza invece di indovinare con codici esadecimali.
• Sette punti di interruzione personalizzati sostituiscono il vecchio limite di tre dimensioni. La tua tipografia sembra perfetta su ogni dispositivo che i visitatori usano.
• Funzioni CSS integrate significa Calc (), Clamp (), Min () e Max () funzionano proprio nell'editor visivo. Costruisci testo reattivo che si ridimensiona in modo naturale senza codice.
• Le variabili di design globali archiviano caratteri, colori e spaziatura in un unico posto. Cambia il tuo carattere principale una volta. Ogni H1 attraverso il tuo sito si aggiorna automaticamente.
• Il sistema di progettazione basato su preset include preset di elementi per singoli moduli più preimpostazioni di gruppi di opzioni per stili tipografici completi. Per mantenere le cose coerenti, usale su diversi moduli.
• Una nuova interfaccia Visual Builder ottiene pannelli dockebili, finestre a schede, scorciatoie da tastiera e una vista a strati migliori con pangrattato. La navigazione diventa molto più semplice.
• Le righe nidificate mettono le file all'interno di altre file per layout complessi. Costruisci accordi di layout avanzati senza tipi di sezione speciali.
• I gruppi di moduli combinano elementi diversi in unità singole. Ciò semplifica la gestione di layout di testo complessi e puoi anche creare moduli personalizzati.
• L'area di lavoro multi-pannello sposta i pannelli ovunque funziona meglio. Mantieni aperti i controlli tipografici durante la regolazione di altre cose di design.
• Copie di gestione degli attributi , paste e ripristina gli stili di tipografia tra elementi. Scegli attributi specifici per il trasferimento invece di copiare tutto.
• Le modalità di interfaccia leggera/scura riducono la tensione degli occhi durante le lunghe sessioni di progettazione.
• Il ridimensionamento della tela mostra come la tipografia appare su diverse dimensioni dello schermo senza lasciare l'editor.

Scopri tutte le versioni di Divi 5 delle funzionalità

Come creare colori HSL con Divi 5

Come accennato, Divi 5 ricostruisce il raccoglitore di colori da zero. La nuova interfaccia rilascia i codici esagonali per i controlli HSL che funzionano come il tuo cervello pensa al colore. Tre cursori gestiscono il lavoro:

• Hue accetta 0–360 gradi e valori negativi avvolgenti (ad es. -60 diventa 300). La ruota dei colori si collega ad entrambe le estremità. Zero, 360 e 360 ​​negativi ti danno lo stesso rosso. Hai bisogno di un colore complementare? Imposta la tonalità a 180 gradi dal punto di partenza.
• La saturazione va dallo 0% al 100% e controlla l'aspetto del tuo colore. Lo zero percento spinge tutta l'intensità del colore, lasciando il grigio. Il cento per cento dà colore a bordo pieno.
• La leggerezza funziona nella stessa gamma percentuale. Zero rende il nero, il 100% crea bianco e il 50% mostra la forma pura di qualunque tonalità tu abbia scelto.

L'aggiornamento dei controlli dal vivo mentre trascini. Applicare i pulsanti o aggiornare i ritardi non interromperanno il flusso di lavoro.

1. Costruisci colori relativi dai colori globali

I colori relativi consentono di creare nuovi colori basati sui colori globali esistenti modificando i singoli componenti HSL. Inizia nel Design Varble Manager aggiungendo un nuovo colore.

Usando il selettore di colori, imposta il colore di base (questo potrebbe essere il colore del marchio) per abbinare il colore globale primario esistente.

Impostiamo i colori secondari utilizzando il tuo turno di tonalità primario per creare colori complementari. Prendi il tuo colore primario, con la leggerezza impostata al 25%.

Puoi anche giocare con la tonalità o la saturazione per creare un nuovo colore come colore secondario.

I campioni a colori ti mostrano informazioni importanti a colpo d'occhio. Puoi dire se qualcosa utilizza una variabile di design e vedere come i filtri HSL modificano il colore di base. Questo feedback visivo ti aiuta a capire cosa sta succedendo con le tue relazioni di colore.

Allo stesso modo, crea tonalità più scure per il colore del testo intestazione e il colore del testo del corpo colori globali usando il colore primario come base.

Ovviamente, puoi creare colori più decorativi qui e puoi ancora inserire manualmente i valori di esagono, RGB o nominati.

2. Gestire le relazioni variabili di progettazione multistrato

Le variabili di progettazione possono accumularsi l'una sull'altra per sistemi di colore complessi. Sulla base della tua primaria, puoi creare ulteriori colori decorativi, come il muschio bruciato. Quindi, riduci l'opacità del muschio bruciato per costruire un colore ombra.

Queste relazioni nidificate mostrano come Divi 5 gestisce gerarchie di colore complesse. Quando si regola il colore primario, il colore del muschio bruciato si aggiorna prima, innescando il colore dell'ombra per aggiornare. L'intera catena rimane connessa.

Questo approccio cambia la gestione del colore dall'ipotesi casuale in un sistema prevedibile. La tavolozza dei colori del tuo sito web rimane armonioso senza regolazioni manuali attraverso ogni elemento.

3. Applica i colori HSL sul tuo sito

Premi qualsiasi modulo di testo e apri il raccoglitore di colori. Le tue variabili salvate si presentano con gli indicatori. Fai clic su "Colore secondario" e compilerà lo sfondo di una sezione. Lo stesso colore funziona per pulsanti, sfondi e bordi.

La tipografia funziona quando si attacca una tonalità ma si cambia la leggerezza. I titoli potrebbero utilizzare il colore primario con leggerezza del -25%. Il testo del corpo diventa un po 'più leggero al -15%. I collegamenti si trovano a -45%. Tutto si riferisce ma rimane chiaro.

Gli sfondi hanno bisogno di colori del tuo marchio attenuati. Spingere la leggerezza fino al 95%. Drop saturazione al 15%. Ora hai background marchiati che non combattono i contenuti. I pulsanti funzionano con la piena saturazione. Gli stati del bordo degli Stati spingono la leggerezza verso il basso. Stesso colore, intensità diversa.

Il testo leggero ha bisogno di sfondi scuri. I numeri di leggerezza ti dicono cosa funziona. Testo con una leggerezza al 50% coppie con sfondi inferiori al -30% della leggerezza.

Le sezioni con testo scuro su sfondi di luce invertono i valori. Stesse tonalità, stessa saturazione. Scambia i valori di leggerezza e hai finito. E, naturalmente, tutti questi colori mantengono i loro collegamenti anche dopo essere stati applicati. Cambia una variabile e tutto si adatta. Facile come quello!

4. Salva i colori HSL come preset riutilizzabili

Dopo aver creato i moduli e applicato le variabili di design del colore, preimpostare questi colori in stili riutilizzabili. Divi 5 offre due tipi di preset che lavorano insieme:

I preimpostazioni del gruppo di opzioni controllano gli aspetti di progettazione specifici in tutti i moduli. Ottimi le tue intestazioni con la variabile di design del colore del testo di intestazione. Aggiungi ombre alla tua colonna usando il muschio bruciato e il 50% di opacità. Passa il mouse sopra l'icona del modulo del gruppo di opzioni in qualsiasi modulo, etichetta in modo appropriato e salva.

Lo stesso funziona per sfondi, spaziatura, animazioni e testo. Aggiungi un raggio del bordo tramite una variabile di progettazione numerica e imposta la variabile preimpostata di questo numero. Ogni gruppo di opzioni gestisce il proprio territorio di progettazione e può essere applicato incrociato, cioè il raggio del bordo di una colonna può essere applicato al tuo invito all'azione.

Per applicare, vai all'opzione appropriata e seleziona il preimpostazione.

I preset di elementi salvano gli stili del modulo completo. Stile A Modulo pulsante con il colore secondario con leggerezza dell'80%. Fai clic sul selettore preimpostata nella parte superiore destra delle impostazioni del modulo. Crea un nuovo preset chiamato "Brand Color Button". Questo consente di risparmiare tutte le impostazioni dei pulsanti, compresi i colori HSL.

Ora, quando aggiungi un nuovo pulsante, applica questo preimpostazione e eredita l'intero stile. Per tagliare il tuo lavoro per te, prendi qualsiasi preset personalizzato (gruppo di opzioni o elemento) che hai creato e fai clic sull'icona stella accanto a essa. Tale preimpostazione diventa l'impostazione predefinita per tutte le nuove istanze di quell'elemento o gruppo di opzioni.

Le tue relazioni HSL rimangono intatte all'interno dei preset. Quando si aggiorna un colore, ogni modulo e preimpostazione utilizzando anche quegli aggiornamenti di colore. Costruisci biblioteche preimpostate per sezioni leggere, sezioni scure e momenti speciali del marchio. I valori HSL viaggiano con ciascun preimpostazione, mantenendo il sistema di colore coerente tra i progetti.

Costruisci sistemi di colore per i tuoi siti Web con Divi 5

Il lavoro a colori richiedeva giorni. Ti agitavi con i codici esagonali, copiare i valori tra i programmi e pregare che qualcosa sembrava decente.

HSL fa lavorare di nuovo il colore. Vedi un'ombra che ami e sai esattamente come ricrearla. Hue sceglie il colore, la saturazione controlla quanto sia vivido e la leggerezza lo rende più luminoso o più scuro. Ora, l'aggiornamento del marchio richiede minuti anziché ore.

Questo è un vero controllo del design. Divi 5 lo fa accadere oggi.