Comprensione dei colori relativi nel web design

Nel web design, anche le decisioni più semplici possono moltiplicarsi. Ciò che inizia come una singola scelta di design si espande rapidamente in dozzine di variazioni visive per interazioni, background, bordi e altro ancora. La tua build può essere ingombra con valori non corrispondenti e modifiche manuali senza un sistema coerente.

La sintassi del colore relativo in CSS offre un approccio più intelligente e più scalabile. Ti consente di definire variazioni visive basate su un'unica fonte, mantenendo il tuo design coeso e facile da gestire. Normalmente, ciò richiede la scrittura di codice personalizzato. Ma con Divi 5, puoi usare visivamente queste moderne tecniche, fin dall'inizio. Diamo un'occhiata più da vicino.

Problemi di gestione dei colori comuni

Quell'unico colore del marchio che scegli può moltiplicare rapidamente in dozzine di varianti sparse sul tuo sito. Ecco alcuni problemi che contribuiscono a questo problema:

Gestire le varianti per un colore

Inizi con una base blu e necessita rapidamente di dozzine di varianti. Il raccoglitore a colori del tuo costruttore di pagine diventa un disastro. Blu chiaro, blu più chiaro, blu scuro, blu più scuro, blu sbiadito - ognuno viene salvato come colore separato.

Il tuo marchio blu coppa venti tonalità diverse sul tuo sito. Alcune sezioni usano il blu originale, altre usano una versione più chiara che hai fatto tre settimane fa e i tuoi pulsanti usano quella tonalità più scura che hai fatto per un migliore contrasto.

Nessuno di questi colori si collega agli altri. Quando il tuo cliente desidera viola invece di blu, si affronta aggiornare ogni colore a mano. Trascorrerai ore a fare clic su moduli. Cacciate ogni tonalità. Spero che non ti perda nessuno.

Una raccolta di molte tonalità blu simili a sinistra si trasforma in viola sparsi e non correlati a destra perché aggiornarle uno per uno è noioso e richiede una consistenza costante. Ancora di più, queste varianti di colore sono generalmente con gli occhi e non hanno alcun legame.

Il problema dell'opacità

Molti costruttori di pagine includono controlli di trasparenza, che possono essere un incubo per la coerenza del colore. Puoi creare una sovrapposizione blu perfetta con il 60% di opacità, ma più tardi, hai bisogno dello stesso rosso trasparente per una sezione diversa.

Il tuo costruttore di pagine non ricorda il mix esatto, quindi stai lasciando un bulmine al cursore dell'opacità e stai cercando di abbinare ciò che hai fatto prima.

I tentativi 1, 2 e 3 variano in ombra e trasparenza perché gli occhi non danno risultati precisi anche con controlli precisi.

Alcuni costruttori di pagine ti consentono di salvare colori trasparenti. Altri no. Finisci con un mucchio di blu trasparente simile.

Sono tutti leggermente diversi. Il tuo design perde coerenza. Non puoi ricreare in modo affidabile lo stesso colore trasparente su vari moduli. Ogni volta che hai bisogno di trasparenza, inizi da zero. Indovina i valori di opacità. Spero che abbinino il tuo design esistente.

Creare le variabili manualmente

La maggior parte dei costruttori di pagine offre una qualche forma di risparmio sul colore, ma diventa rapidamente ingestibile. Salvi colori con nomi generici come "giallo 1", "giallo 2" e "luce gialla".

Sei mesi dopo, non hai idea di quale giallo faccia cosa. La tua tavolozza di colori salvata diventa un casino di colori simili con nomi insignificanti. La tua libreria di colori cresce senza alcun sistema organizzativo. Hai tre arance diverse che sembrano quasi la stessa cosa, ma servono a vari scopi.

Una griglia di molti campioni di colore con tonalità sovrapposte e nomi incoerenti e poco chiari contribuiscono a una tavolozza disordinata e confusa che è difficile da organizzare o utilizzare in modo efficace.

I membri del team aggiungono le loro varianti di colore, creando tonalità duplicate con nomi diversi. Il tuo marchio arancione esiste come "arancione", "marca arancione", "arancione primario" e "main arancione". Nessuno sa quale usare.

Alcuni sviluppatori cercano di risolverlo scrivendo variabili CSS personalizzate. Questo dà loro un migliore controllo sulle relazioni di colore.

Ma ora hai creato un ostacolo tecnico. I membri del team non di tecnologia non possono più aggiornare i colori e i tuoi clienti non possono apportare semplici cambiamenti di colore da soli. Diventi responsabile di ogni minore regolazione del colore.

Quali sono i colori relativi in CSS (e perché ne hai bisogno)

I colori relativi risolvono i tuoi problemi di colore. Scegli un colore del marchio. CSS rende tutte le versioni di cui hai bisogno. Quelli leggeri per sfondi. Quelli scuri per i confini. Cancella quelli per le sovrapposizioni. Tutto da un colore iniziale.

CSS funziona come uno strumento di colore dinamico. Lo dici: "Rendi questo giallo più leggero". CSS fa il lavoro. Il tuo pulsante rosso deve svanire quando si libra. CSS aggiunge la trasparenza. La tua intestazione blu ha bisogno di un bordo più scuro. CSS lo crea subito.

I flussi di lavoro tradizionali hanno richiesto un maggiore sforzo manuale. I designer hanno realizzato set di colori in Photoshop. I programmatori hanno usato strumenti come SASS. I costruttori di siti Web dovevano indovinare i colori abbinati. CSS ora gestisce questo automaticamente.

Come CSS crea colori dai colori

La parola "da" dice a CSS di usare un colore esistente come punto di partenza. Dai un colore a CSS e rompe quel colore a pezzi che può usare.

Il tuo colore iniziale diventa la base. CSS lo divide in parti. Importi rossi, importi verdi, importi blu. O tonalità, luminosità e saturazione se preferisci quei controlli.

Puoi iniziare con qualsiasi formato di colore. Usa un colore esagonale come #E91E63. Di 'a CSS di lavorare con esso come HSL per facilitare la luminosità. Output come RGB se il tuo codice necessita. CSS converte tutto automaticamente.

Il codice segue un modello semplice. Innanzitutto, dici da dove ottenere il colore e poi dici cosa cambiare al riguardo. Puoi mantenere tutto uguale ma aggiungere trasparenza o cambiare la tonalità ma mantenere la luminosità. Entrambi funzionano allo stesso modo.

Rompere i colori in parti

Formati di colore diversi ti danno strumenti diversi. RGB ti consente di cambiare rosso, verde e blu separatamente. HSL ti dà controlli di tonalità, saturazione e leggerezza.

Ecco come funziona. Scrivi RGB (da #FF4081 RGB). CSS prende quel codice esagonale rosa e lo divide in numeri rossi, verdi e blu. Quindi puoi usare quei numeri come vuoi. Il motivo rimane lo stesso: funzione di colore (da canale 2 canale2-color canale33).

Quindi, invece di scrivere colori da zero, ti basi su un colore esistente e cambi solo le parti che si desidera cambiare.

Ogni parte viene convertita per abbinare ciò che hai scelto. La conversione di quell'esagono rosa ti dà r = 255, g = 64, b = 129. Usali così come sono o cambiali con calc ().

Puoi anche mescolare e abbinare i canali. Vuoi che tutti i pixel rossi siano gli stessi? Utilizzare RGB (da var (–Color) GGG). Questo prende il valore verde e lo usa per rosso, verde e blu, creando un tono grigio dal tuo colore originale.

Supporto browser e altre considerazioni

I grandi siti non possono ignorare i visitatori perché devono ospitare tutti. Le versioni vecchie di Safari funzionano in modo diverso. Le versioni Chrome gestiscono alcune cose a modo loro. Firefox, è personale. Finirai per scrivere tre diverse versioni di codice per un effetto colore.

Tutto questo lavoro extra prende il tempo lontano da cose migliori. Potresti migliorare la funzionalità del sito e aggiungere funzionalità che le persone desiderano.

Molti sviluppatori usano i colori relativi in modo selettivo. Strumenti interni e progetti personali funzionano bene poiché controlli il browser. I siti di marketing e il lavoro dei clienti necessitano di una pianificazione più attenta.

La tecnologia funziona alla grande dove è supportata. La domanda è se la complessità extra si adatta alla cronologia del progetto e al team o all'abilità tecnica del cliente. Ma per la maggior parte dei casi, sarebbe eccessivo e un sovraccarico per la maggior parte dei membri del team.

Questo è esattamente il motivo per cui il team Divi è intervenuto. Abbiamo visto web designer alle prese con la compatibilità del browser mentre perdevano potenti strumenti di colore. La nostra soluzione in Divi 5 prende le parti migliori dei colori relativi e li avvolge in un sistema che funziona ovunque e non richiede codifica.

Come Divi 5 rende i colori relativi facili

Ora, conosci il potere dei colori relativi; Tuttavia, potresti aver capito che non è così facile da implementare. Divi 5 ha adottato un approccio diverso e ha costruito la flessibilità del colore direttamente nella sua interfaccia visiva. Ma scopriamo cos'è esattamente Divi.

Cos'è Divi?

Divi è il costruttore di pagine WordPress più popolare. Dai la priorità alla progettazione visiva e ti dà il controllo completo sul tuo design.

Puoi guardare le tue modifiche accadere in diretta, regolare le dimensioni dei caratteri o la spaziatura delle linee e vedere immediatamente i risultati sulla tua pagina. Hai accesso a oltre 200 moduli che vanno ovunque li desideri. Blocchi di testo, intestazioni e contenuti funzionano come squadra. Nessun modello rigido che stringe le tue idee in forme imbarazzanti.

Ecco cosa rende Divi diverso: oltre 2000 layout già pronti costruiti per aziende reali. Questi non sono modelli di avviamento di base. Ogni design si rivolge a industrie specifiche. Troverai layout che parlano il linguaggio del tuo pubblico e soddisfano le tue esigenze aziendali.

Salta la pagina vuota Blues con siti rapidi Divi

Divi siti rapidi fissa quell'integrazione di tela vuota che uccide i progetti prima che inizino. Ottieni siti Web di avviamento professionale con un design solido che il nostro team di design crea utilizzando immagini originali e opere d'arte che non troverai da nessun'altra parte.

Se vuoi qualcosa di più personalizzato, Divi Quick siti funziona con Divi AI per creare layout personalizzati in base ai dettagli della tua attività. Descrivi la tua società di consulenza o un ristorante e produce pagine pertinenti con contenuti specifici del settore.

Questi non sono wireframe di base: ricevi titoli effettivi, contenuti scritti e immagini che si adattano al tuo tipo di business. Progetta anche intestazioni e piè di pagina, pagine di prodotti e modelli di post sul blog, tra le altre cose, per te.

Puoi impostare i caratteri e i colori del tuo marchio dall'inizio o lasciare che l'intelligenza artificiale li scelga per te. L'intelligenza artificiale funziona all'interno di tali linee guida. Successivamente, tutto rimane completamente modificabile, in modo da poter regolare la tipografia fino a quando non corrisponde alle tue esigenze esatte.

Controllo completo sul design del tuo sito, ora con AI

Il Builder a tema ti mette al comando del design in tutto il tuo sito Web. Crea intestazioni personalizzate che riflettano la personalità del tuo marchio. Costruisci layout di blog che mantengono i lettori coinvolti con lunghi articoli. Le tue 404 pagine possono rimanere su marchio con caratteri e stile abbinati.

Divi AI, come accennato in precedenza, mette AI nel flusso di lavoro di progettazione. Crea titoli che suonano come se li hai scritti e descrizioni dei prodotti che catturano la voce del tuo marchio.

Il fotoritocco può essere effettuato all'interno del costruttore. Dì all'IA quali cambiamenti vuoi in un'immagine e gestisce le modifiche.

Hai bisogno di immagini fresche? Crea anche quelli.

Completa sezioni di pagina che si adattano perfettamente alla tua attività.

Più frammenti di codice quando ne hai bisogno.

Divi 5: la prossima evoluzione

Divi 5 entra nei test Alpha con una chiara missione: migliorare le prestazioni del processo di web design. Abbiamo ascoltato un vero feedback su ciò che ti rallenta e cosa ti avrebbe aiutato.

Tutto ciò che ti piace dell'attuale Divi rimane. Abbiamo appena fatto funzionare meglio. L'interfaccia sembra più pulita. Le pagine si caricano più velocemente di prima. I controlli rispondono proprio quando fai clic su di loro.

Abbiamo ricostruito la fondazione utilizzando gli standard web di oggi. Ciò significa meno bug strani e prestazioni più fluide in generale.

Passi meno tempo a combattere il costruttore e più tempo a progettare. I tuoi siti sembrano più professionali perché la coerenza avviene automaticamente. I clienti ottengono siti Web migliori perché puoi concentrarti sulle loro esigenze anziché sui problemi tecnici.

La versione Alpha è pronta per essere utilizzata su nuovi siti Web, anche se non ti consigliamo di convertire i siti Web Divi 4 esistenti in Divi 5.

Cosa c'è di nuovo in Divi 5

Divi 5 offre importanti modifiche al modo in cui si creano siti Web. La versione pubblica Alpha funziona perfettamente per nuovi progetti in questo momento. I nostri team di sviluppo spediscono nuove funzionalità ogni due settimane, con diversi importanti aggiornamenti già rilasciati dall'inizio di Alpha.

Ecco alcuni aggiornamenti chiave:

• La moderna base di codice accelera le cose caricando solo i moduli di cui hai effettivamente bisogno, rimuovendo il gonfiore del codice che ha rallentato Divi 4.
• Un sistema completo di layout Flexbox include nuovi modelli di riga, centratura verticale automatica, avvolgimento dei contenuti e distribuzione della spaziatura attraverso controlli visivi.
• Un nuovissimo costruttore di loop che ripete moduli, gruppi o sezioni con contenuti dinamici e supporta loop nidificati per strutture di dati complesse.
• I colori relativi con HSL forniscono un controllo del colore dinamico basato su valori di tonalità, saturazione e leggerezza.
• Il sistema basato su HTML-5 sostituisce completamente i codi short , il che significa meno bug e migliore compatibilità WordPress.
• L'interfaccia Visual Builder ha ottenuto un rifacimento completo, con modalità leggera e scura, pannelli dockabili, finestre a schede, scorciatoie da tastiera e una vista a strati migliorati con pangrattato.
• I punti di interruzione reattive personalizzabili sostituiscono i tre fissi di Divi 4, dandoti un maggiore controllo con il ridimensionamento della tela per vedere esattamente come i progetti guardano alle diverse dimensioni dello schermo.
• I gruppi di moduli funzionano come contenitori versatili che raggruppano gli elementi relativi in modo che tu possa modellarli come unità o spostarli senza perdere relazioni.
• Le variabili di progettazione consentono di impostare colori, caratteri, numeri, immagini, testo e URL a livello globale in tutto il tuo sito.
• I preset del gruppo di opzioni salvano proprietà di progettazione specifiche come tipografia o ombre che funzionano su diversi tipi di moduli.
• Le unità CSS avanzate ora supportano il clamp (), il calc (), il min () e il max () attraverso l'interfaccia visiva senza scrivere codice.
• Il sistema di interazioni crea popup, interruttori, effetti di scorrimento e effetti di movimento del mouse senza plug-in esterni.

Cosa sta succedendo ...

• Moduli WooCommerce ricostruiti da zero usando l'architettura Divi 5 con piena preset e compatibilità variabile.
• L'ispettore di elementi fornirà nuovi strumenti di debug e sviluppo per gli utenti avanzati.
• Allo stesso modo, il modulo di carosello di gruppo può aiutarti a creare una giostra composta da gruppi, quindi sviluppare il contenuto per ogni diapositiva utilizzando il set completo di elementi di Divi per progettare qualsiasi stile di giostra desideri.

Costruire tavolozze che si ridimensionano con Divi 5

Il tuo raccoglitore di colori diventa un disastro quando hai bisogno di dozzine di varianti di colore del tuo marchio. Divi 5 fissa questo collegando ogni tonalità a un colore di base. I passaggi seguenti mostrano come costruire un sistema di colore scalabile e mantenibile.

1. Impostazione della base del colore primario

Apri il Builder Visual e trova l'icona del gestore variabile nella barra laterale sinistra. Fai clic su di esso per vedere la fondazione colore del tuo sito. Divi 5 viene fornito con variabili di colore preimpostate già in attesa di te: colori primari, secondari, intestati e del corpo.

Non puoi eliminare queste variabili preimpostate, ma puoi cambiare i loro valori. Funziona perfettamente perché questi quattro colori gestiscono la maggior parte dei siti Web. Fai clic sulla variabile di colore primario e inserisci il colore principale del tuo marchio. Questa diventa la base per ogni altra variazione di colore sul tuo sito.

La tua variabile di colore principale dovrebbe riflettere la versione più satura del colore del tuo marchio. Pensala come la versione pura e non diluita prima di creare sfondi più chiari o aggiungere effetti di trasparenza. Questo ti dà la più gamma quando si costruisce variazioni in seguito.

Il colore secondario funziona bene per accenti, pulsanti o luci che devono distinguersi dal colore del marchio primario. Imposta il tuo colore di intestazione su qualcosa che si legge bene sugli sfondi. Il colore del corpo rimane in genere grigio scuro o nero per la leggibilità.

Queste quattro variabili preimpostate si collegano all'intero sistema di Divi. Quando crei moduli, questi colori appaiono come opzioni rapide. Cambia il tuo primario da blu a verde qui e ogni modulo utilizzando gli aggiornamenti variabili primari immediatamente sul tuo sito.

Evita di creare presto variabili personalizzate eccessive. Invece, inizia con questi quattro preset. La maggior parte dei siti Web potrebbe aver bisogno di questi colori di base, con variazioni create attraverso i controlli di colore relativi di Divi 5. Ma ovviamente, se hai bisogno, puoi aggiungere tutte le variabili che vuoi.

2. Creazione di tonalità di colore con controlli HSL

Ora aggiungi un'altra variabile di colore. Questa volta, costruirai una tonalità dal tuo colore primario invece di impostare un nuovo colore di base. Nel selettore di colori, seleziona la variabile di colore primaria dall'elenco.

Ora vedi tre cursori: tonalità, saturazione e leggerezza. Questi controllano come cambia il colore di base.

La tonalità si muove attorno alla ruota del colore da 0 a 360 gradi. Lascialo da solo quando si fa sfumature dello stesso colore. La saturazione passa dallo 0% al 100% e controlla l'aspetto vivido del tuo colore. A 0%, qualsiasi colore diventa grigio. Al 100%, ottieni la piena intensità.

La leggerezza va dallo 0% al 100%. Questo cursore crea le tue tonalità reali. A 0, ottieni la forma pura del tuo colore. Spostalo fino al 50% per le tonalità più chiare. Lascialo cadere al -20% per tonalità più scure.

Puoi mescolare e abbinare questi colori HSL per costruire nuovi colori e variazioni secondo necessità.

Creiamo due varianti del nostro colore primario. Aggiungi una variabile e nomina la tua nuova tonalità qualcosa di chiaro come "Luce primaria" o "Dark primario". Ripeti questo processo per creare più tonalità. Una configurazione tipica utilizza la tua base di base al 30% di leggerezza per sfondi e simili e scuro a leggerezza del -15%.

Puoi anche aggiungere tonalità così più chiari e più scure per il tuo colore secondario.

3. Costruire variabili di colore nidificato

Hai fatto luce primaria e scuro primario nel passaggio 2. Ora puoi costruire più colori da quelle tonalità.

Crea una nuova variabile chiamata "Sfondo di scheda". Scegli la tua luce primaria dall'elenco. Lascia l'opacità al 50%. Questo ti dà una tinta a malapena per gli sfondi delle carte. Quindi, crea "Pulsante". Scegli il buio primario. Drop Lightness Un altro 10% per renderlo ancora più scuro. Ora, i tuoi pulsanti possono essere di un colore più scuro quando le persone si librano su di loro.

Puoi anche creare colori personalizzati dalle tue tonalità. Crea "testo ombra" raccogliendo il pulsante. Impostare l'opacità al 15%. Ora l'ombra di testo si collega al mouse, che si collega a Primary Dark, che si collega al primario.

Prova "Border Accent" dalla luce primaria. Saturazione del bump al 100% per farlo scoppiare di più. Questo ti dà un bordo luminoso che corrisponde ancora al tuo marchio. Ogni catena si allontana. Tutti e cinque i colori risalgono a una scelta primaria.

Aggiungi tonalità simili per il tuo colore secondario per una buona selezione di colori tra cui selezionare.

4. Applicare i colori relativi al tuo sito

Hai costruito le tue fondamenta e hai creato tutte quelle tonalità. Ora arriva la parte pratica: implementarli sul tuo sito web.

Apri qualsiasi modulo nel Visual Builder. Fai clic su un'opzione di colore per sfondi, testo o bordi. Le tue variabili di colore salvato appaiono proprio all'interno del raccoglitore a colori. Non dovrai ricordare i nomi o i codici esadecimale.

Scegli il tuo colore primario per i pulsanti principali. Scegli la luce primaria per gli sfondi della sezione. Usa il buio primario per bordi e sottili accenti come i pulsanti CTA. Ogni selezione si collega al sistema di colore di base.

Le tue variabili di colore funzionano ovunque: intestazioni, piè di pagina, layout del blog e pagine del prodotto. I membri del tuo team e i clienti possono scegliere i colori senza indovinare. Vedono "luce primaria" invece di codici esagonali casuali nel raccoglitore. Nomi chiari significano meno errori e lavori di progettazione più veloci. Tutti sanno quale colore serve a quale scopo.

Questo sistema a base variabile impedisce l'incoerenza visiva. Non dovrai salvare dozzine di blu simili o meraviglia quale tonalità usare per gli effetti del mouse. Le tue variabili ti danno la struttura mantenendo flessibilità di progettazione.

5. Aggiornamento dei colori quando necessario

Il tuo cliente decide che vogliono mezzanotte blu anziché solo blu. Con la tradizionale gestione del colore, questo significa ore di setacciamento attraverso i moduli e aggiornare manualmente ogni tonalità o aggiornare un mucchio di colori globali contemporaneamente. Con i colori relativi di Divi 5, si cambia una variabile e tutto il resto segue.

I tuoi sfondi di luce primari diventano verde chiaro. I bordi scuri primari si spostano verso il verde scuro. I colori del mouse del pulsante si adattano a un blu più scuro. Tutte quelle relazioni nidificate che hai costruito rimangono intatte.

L'ombra di sfondo della tua carta aveva un'opacità del 15% di luce primaria. Diventa il 15% di opacità della nuova luce primaria verde senza che tu la tocchi. L'ombra di testo si collega al pulsante Hover, che si collega al Dark primario, che si collega al primario.

Il vecchio modo significava ricreare l'armonia del colore da zero ogni volta. Preserva le relazioni mentre si cambia la fondazione e il tuo design rimane equilibrato.

I tuoi colori, le tue regole

L'uso incoerente del colore mina un buon design. Hai salvato sfumature casuali con nomi insignificanti, caccia attraverso moduli per gli aggiornamenti e ricostruire le tavolozze da zero ogni volta che i clienti cambiano idea.

I colori relativi di Divi 5 terminano questo incubo del flusso di lavoro. Costruisci una volta da un colore di base e osserva automaticamente ogni aggiornamento di variazione sul tuo sito. Il sistema gestisce la compatibilità del browser, mantiene le relazioni e mantiene organizzato il tuo raccoglitore di colori, quindi non dovrai giocare con CSS.

Il tuo prossimo progetto merita una migliore gestione dei colori. Scarica Divi 5 e guarda come sembra il design organizzato.