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

Jecelyn Yeen

Sofia Emelianova

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

Per un'analisi approfondita dei 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 dei colori con un clic:

1. Seleziona un elemento nel riquadro Elementi.

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

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

   

Per ispezionare il valore calcolato, utilizza il riquadro Elaborato.

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

Elementi del selettore colori

Di seguito è riportata una descrizione di ciascuno degli elementi UI del selettore colori:

1. Ombre.
2. Contagocce. Vedi 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 di Gamut. Questa linea è disponibile solo per i nuovi spazi colore e la funzione color(). Possono produrre colori sia HD che non HD. La linea consente di distinguere tra HD e non HD.
8. Cerchio dei colori. Trascina questo cerchio tra le ombre per modificare il valore di visualizzazione.
9. Dispositivo di scorrimento tonalità.
10. Dispositivo di scorrimento dell'opacità.
11. Selettore del valore di visualizzazione. Seleziona uno spazio colore dall'elenco a discesa. Vedi Convertire i colori.
12. Aumenta il rapporto di contrasto. Apre la sezione corrispondente che ti consente di Correggere il contrasto.

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

    • Tavolozza Material Design.
    • Tavolozza personalizzata. Per aggiungere manualmente il colore corrente a questa tavolozza, fai clic su .
    • Tavolozza Variabili CSS. Elenca tutte le variabili CSS personalizzate (allegate --) sulla tua pagina.
    • Tavolozza dei colori pagina. Per generare questa tavolozza, DevTools cerca tutti i colori nei fogli di stile.

Scegli uno spazio colore

Per scegliere uno spazio colore:

1. Fai clic tenendo premuto Maiusc 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).

   Oppure uno dei nuovi spazi:

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

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

Converti 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. Usa il colore consigliato conforme a una linea guida:

   • Fai clic su accanto alla linea guida.
   • Nell'anteprima Ombre in alto, trascina il Cerchio dei colori sotto la linea corrispondente.

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

Campiona un colore ovunque con il Contagocce

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

Per selezionare un colore da qualsiasi punto 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 il contagocce attivo, passa il mouse sopra il colore di destinazione e fai clic per campionare.

In questo esempio, il Selettore colori mostra il valore corrente del colore rgb(224 255 255 / 15%). che diventa rosa quando fai clic fuori da Chrome.