Selettore colore

Color Picker è la funzione del tuo editor che ti consente di gestire la combinazione di colori di testo, sfondo, sovrapposizioni e altro ancora. Puoi scegliere un colore dalla tavolozza dei colori, inserire un valore HEX o RGB o persino creare un gradiente personalizzato. La funzione dei colori recenti ti aiuterà a mantenere coerente la tua combinazione di colori e a mantenere un aspetto professionale sul tuo sito.

Stile colore

Prima di scegliere la combinazione di colori, è necessario scegliere dove si desidera utilizzare un singolo colore o un gradiente.

Se stai utilizzando l'opzione colore singolo, puoi scegliere un colore dalla scheda Colori recenti o passare a Scegli un altro colore.

Lo sfondo sfumato sarà un'opzione disponibile per gli sfondi di righe, colonne e widget e per le sovrapposizioni di immagini. Per applicare una sfumatura, con il selettore di colori aperto, fai clic sul menu a discesa sopra la tavolozza dei colori (potrebbe indicare Colore), seleziona Sfumatura, quindi assicurati di:

  • Scegli due sfumature di uno stesso colore

    • Puoi sempre invertire i colori, regolando il posizionamento dei cursori

  • Scegli la direzione della sfumatura

    • Con l'opzione Centrale otterrai una sfumatura radiale

    • L'opzione Laterale darà una sfumatura lineare

Nota

I gradienti non possono essere salvati in Colori tema.

Colori del tema

I colori del tema consentono di definire una tavolozza di colori e di collegare i singoli colori a uno o tutti i widget con le impostazioni del colore. Il colore di qualsiasi elemento collegato ai colori del tema verrà aggiornato automaticamente quando il colore collegato viene modificato nelle impostazioni dei colori del tema. Ciò ti consente di apportare rapidamente modifiche al colore, il che aiuta a ridurre i tempi di progettazione e garantisce che lo stile del tuo sito sia coerente tra le pagine.

Per informazioni su come configurare i colori del tema, vedere Colori del tema.

Colori salvati

Salva i colori che usi spesso nel sito aggiungendoli all'elenco Colori salvati nel selettore colori.

Per aggiungere un colore ai colori salvati, fare clic sulla scheda Colori salvati nel selettore colore e fare clic sull'icona +. Per rimuovere un colore dall'elenco Colori salvati, fare clic con il pulsante destro del mouse sul colore e selezionare Rimuovi.

Puoi aggiungere fino a 48 colori e sfumature all'elenco Colori salvati.

Colori recenti

Quando scegli un colore, il menu dei colori recenti mostra un campione dei colori utilizzati di recente sul sito. In questo modo, potrai scegliere rapidamente i colori già presenti nel sito.

Scegli un altro colore

Seleziona una tonalità, utilizzando la tavolozza sulla destra o il pannello colori. In alternativa, puoi inserire il valore HEX o RGB del colore che desideri utilizzare nella casella di testo riportata sotto la colonna delle sfumature.

Per abbinare perfettamente un colore da qualsiasi punto del tuo sito (immagini, testi e così via), fai clic sul contagocce (eyedropper.png) tool e seleziona il colore del tuo sito che desideri utilizzare. Non c'è bisogno di perdere tempo a cercare di capire il nome o il valore esatto di un colore.

Opacità

Il cursore di opacità determina la trasparenza di un elemento. Tieni presente che, quando riduci l'opacità di un elemento, gli elementi posizionati dietro a quest'ultimo (colore o immagine di sfondo) inizieranno a fondersi con tale elemento.

Verificatore del contrasto per i colori del testo

Il verificatore del contrasto per i colori del testo aiuta a migliorare l'accessibilità dei siti indicando se il contrasto tra il testo e lo sfondo soddisfa lo standard AA o AAA*. Il controllo del contrasto appare nel selettore colori ogni volta che il selettore colori viene utilizzato per il testo.

Di seguito sono riportati i criteri che determinano se è rispettato lo standard AA o AAA:

Tipo di testo

Standard*

Dimensioni del carattere

Rapporto minimo di contrasto

Testo regolare

AAA

Inferiore a 18 pt

7:1

Testo grande

AAA

18 o 14 pt grassetto

4,5 a 1

Testo regolare

AA

Inferiore a 18 pt

4,5 a 1

Testo grande

AA

18 pt grassetto o 24 pt e più grande

3:1

*Negli standard di accessibilità, "AA" e "AAA" indicano diversi livelli di requisiti di contrasto cromatico. Il livello AA indica che i colori hanno un contrasto sufficiente per essere leggibili, ma potrebbero comunque causare problemi ad alcuni utenti. Il livello AAA significa che il contrasto è elevato e l'immagine e il testo dovrebbero essere leggibili per la stragrande maggioranza degli utenti.

Di seguito è riportato un esempio del verificatore del contrasto cromatico che indica che il contrasto tra il testo e lo sfondo soddisfa lo standard AAA.

image__11_.png

Il controllo del contrasto sarà disabilitato nelle seguenti circostanze:

  • Se il testo selezionato ha più colori. Ad esempio, se diverse parole nel testo sono blu e altre sono rosa.

  • Se il testo è su uno sfondo a gradiente.

  • Se il testo è su uno sfondo immagine.

Considerazioni sul selettore colore

  • La sfumatura non è disponibile per gli elementi di testo, quindi non verrà visualizzata in un selettore colore per gli elementi di testo nell'editor di progettazione dei widget della scheda Tema.

  • Quando si lavora con gli sfondi, il passaggio da Colore a Immagine e viceversa imposta le impostazioni dell'opzione precedente su null. Ad esempio, se stavi utilizzando un colore e hai modificato l'impostazione in Immagine, tutte le impostazioni di colore o sfumatura verranno rimosse.

  • I gradienti prevalgono sugli sfondi dei singoli pulsanti. Per cambiarli di nuovo, riselezionare lo sfondo dei singoli pulsanti.