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.

Punto chiave:questo video mostra la versione di Chrome DevTools precedente alla 112. Nelle versioni successive, il riquadro Stili supporta 12 nuovi spazi colore e 7 nuove gamut della specifica Colore CSS livello 4 e la funzione color-mix() di Livello colore CSS 5.

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.

   

   Nota: questo esempio mostra due cerchi intersecati accanto alla funzione color-mix(): . L'intersezione è un'anteprima del colore risultante.

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.
    Nota:in alternativa, per aprire direttamente il menu a discesa, tieni premuto Maiusc e fai clic sull'icona dell'anteprima del colore accanto al valore del colore.
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.

   Nota:in alternativa, fai clic sul selettore del valore di visualizzazione nel selettore colori.

   

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.

Attenzione:durante la conversione da HD a non HD, DevTools crea un clip con una gamma che si adatta allo spazio e contrassegna i valori troncati con icone di avviso.

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

Il video successivo mostra le conversioni in azione.

Correggi contrasto

Punto chiave: il selettore colori calcola i rapporti di contrasto solo per i valori color e relativi ai rispettivi valori di background-color. Pertanto, solo i valori di color presentano le sezioni Rapporto di 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.

Nota: per impostazione predefinita, il selettore colori ti suggerisce di seguire le linee guida di WebAIM. In alternativa, puoi impostarlo in modo da suggerire valori conformi all'APCA: In Impostazioni > Esperimenti, seleziona Abilita il nuovo algoritmo di contrasto percettivo avanzato (APCA)...

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.

Nota:il contagocce campiona i colori solo nello spazio colore sRGB. Quando effettui il campionamento all'esterno di questo spazio, il contagocce ritaglia il colore in base a quello più vicino. Vedi Convertire i colori.

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.