Ispeziona ed esegui il debug dei colori HD e non HD con il selettore colori

Jecelyn Yeen

Sofia Emelianova

Il selettore di colori fornisce una GUI per modificare le dichiarazioni color e *-color e ti consente di creare, convertire ed eseguire il debug di colori non HD e HD con un clic.

Per un approfondimento sui nuovi spazi colore, consulta la Guida ai colori CSS ad alta definizione.

Aprire il selettore colori e cambiare i colori

Utilizza il selettore colori per modificare i valori di colore con un clic:

1. Seleziona un elemento nel riquadro Elementi.

2. Nel riquadro Stili, individua la dichiarazione color o *-color che vuoi modificare.

   A sinistra di ogni valore color o *-color, è presente una piccola icona quadrata con un'anteprima del colore.

   

Per esaminare il valore calcolato, utilizza il riquadro Calcolato.

1. Fai clic sul quadrato di anteprima accanto a un colore per aprire il selettore colori.
2. Per cambiare il colore, utilizza uno qualsiasi degli elementi dell'interfaccia utente del selettore colori.

Elementi del selettore colori

Ecco una descrizione di ciascuno degli elementi dell'interfaccia utente del selettore colori:

1. Occhiali da sole.
2. Contagocce. Consulta Campionare un colore ovunque con il contagocce.
3. Copia negli appunti. Copia il Valore visualizzato negli appunti.
4. Valore visualizzato. Argomenti dello spazio colore scelto.
5. Rapporto di contrasto. Disponibile solo per i valori color. È la differenza tra color e background-color.
6. Tavolozza dei colori. Fai clic su un quadrato per cambiare il colore con quello del quadrato.
7. Confine della gamma. Questa riga è disponibile solo per i nuovi spazi colore e per la funzione color(). Possono produrre colori HD e non HD. La linea consente di distinguere tra HD e non HD.
8. Cerchio dei colori. Trascina questo cerchio sulle tonalità per modificare il valore di visualizzazione.
9. Cursore di tonalità.
10. Cursore dell'opacità.
11. Selettore del valore di visualizzazione. Scegli uno spazio colore dall'elenco a discesa. Vedi Convertire i colori.
12. Espandi il rapporto di contrasto. Apre la sezione corrispondente che ti consente di correggere il contrasto.

13. Selettore della tavolozza dei colori. Fai clic per alternare tra:

    • Tavolozza di progettazione Material.
    • Tavolozza Personalizzata. Per aggiungere manualmente il colore corrente a questa tavolozza, fai clic su .
    • Variabili CSS. Elenca tutte le variabili CSS personalizzate (aggiunte con --) sulla pagina.
    • Tavolozza Colori pagina. Per generare questa tavolozza, gli strumenti di sviluppo cercano tutti i colori nei fogli di stile.

Scegliere uno spazio colore

Per scegliere uno spazio colore:

1. Maiusc+clic sull'icona di anteprima accanto a un valore di colore. Si apre un elenco a discesa.

   

2. Scegli uno dei seguenti spazi colore:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   o uno dei nuovi spazi:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   o uno spazio definito dalla funzione color(<color_space> X X X).

Convertire i colori

Quando passi da uno spazio colore all'altro con il selettore dei valori di visualizzazione, DevTools converte automaticamente i valori.

Passa il mouse sopra l'icona per visualizzare il valore originale.

Il video successivo mostra le conversioni in azione.

Correggi contrasto

Per risolvere un problema di contrasto per una dichiarazione color:

1. Apri il selettore colori accanto al valore color.
2. Espandi la sezione Rapporto di contrasto .

3. Utilizza il colore suggerito che rispetta una linea guida:

   • Fai clic su accanto alla linea guida.
   • Nell'anteprima Tonalità in alto, trascina il cerchio di colore sotto la linea corrispondente.

Per impostazione predefinita, il selettore colori suggerisce valori conformi ad APCA.

In alternativa, puoi impostarlo in modo che suggerisca valori conformi alle linee guida WebAIM. In Impostazioni > Preferenze > Elementi, deseleziona la casella di controllo Algoritmo avanzato di contrasto percettivo (APCA)….

Per ottenere un elenco di tutti i problemi di contrasto in una sola volta, segui la guida Rendere il tuo sito web più leggibile.

Campionare un colore ovunque con il contagocce

Il Contagocce può campionare i colori sia dalla pagina sia da qualsiasi punto dello schermo.

Per scegliere un colore da un punto qualsiasi dello schermo:

1. Apri il selettore colori ed esegui una delle seguenti operazioni:
   • Fai clic sul pulsante .
   • Premi C per attivare il contagocce. Per disattivare, premi Esc.
2. Con lo strumento Contagocce attivo, passa il mouse sopra il colore di destinazione e fai clic per campionarlo.

In questo esempio, il selettore colori mostra un valore di colore corrente di rgb(224 255 255 / 15%). Questo colore diventa rosa quando fai clic al di fuori di Chrome.