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 e eseguire il debug di colori non HD e HD con un solo clic.

Punto chiave: questo video mostra una versione di Chrome DevTools precedente alla 112. Nelle versioni successive, il riquadro Stili supporta 12 nuovi spazi di colore e 7 nuove gamme dalla specifica CSS Color Level 4 e la funzione color-mix() da CSS Color Level 5.

Per un'analisi approfondita dei nuovi spazi di colore, consulta la Guida ai colori CSS ad alta definizione.

Aprire il selettore dei colori e modificare 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.

   

   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 Calcolata.

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

Elementi del selettore colori

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

1. Sfumature.
2. Pipetta. Consulta l'articolo Prelevare un campione di colore da qualsiasi punto con lo strumento 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 modificarne il colore.
7. Limite della gamma. Questa riga è disponibile solo per i nuovi spazi di colore e la funzione color(). Possono produrre colori sia HD che non HD. La riga ti consente di distinguere tra contenuti HD e non HD.
8. Cerchio di colori. Trascina questo cerchio sulle tonalità per modificare il valore visualizzato.
9. Cursore di tonalità.
10. Dispositivo di scorrimento dell'opacità.
11. Selettore del valore visualizzato. Scegli uno spazio di colore dall'elenco a discesa. Consulta Convertire i colori.
    Nota: in alternativa, per aprire direttamente il menu a discesa, tieni premuto Maiusc e fai clic sull'icona di anteprima del colore accanto al valore del colore.
12. Aumenta il rapporto di contrasto. Si apre la sezione corrispondente che ti consente di correggere il contrasto.

13. Selettore della tavolozza dei colori. Fai clic per passare da:

    • Tavolozza di design Material.
    • Tavolozza Personalizzata. Per aggiungere manualmente il colore corrente a questa tavolozza, fai clic su .
    • La tavolozza Variabili CSS. Elenca tutte le variabili CSS personalizzate (aggiunte con --) nella pagina.
    • Tavolozza dei colori pagina. Per generare questa tavolozza, DevTools cerca tutti i colori negli stili CSS.

Scegli uno spazio di colore

Per scegliere uno spazio di colore:

1. Fai clic con Maiusc premuto sull'icona di anteprima accanto a un valore di colore. Viene visualizzato un elenco a discesa.

   Nota: in alternativa, fai clic sul selettore del valore visualizzato nel selettore dei colori.

   

2. Scegli uno dei seguenti spazi di 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)

   Oppure 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 del valore di visualizzazione, DevTools converte automaticamente i valori.

Attenzione: durante la conversione da HD a non HD, DevTools taglia le gamme per adattarle allo spazio e contrassegna i valori tagliati con icone di avviso.

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

Il video seguente mostra le conversioni in azione.

Correggi il contrasto

Punto chiave: lo strumento Selettore di colori calcola i rapporti di contrasto solo per i valori color e in base ai rispettivi valori background-color. Pertanto, solo i valori color hanno sezioni Rapporto di contrasto.

Per risolvere un problema di contrasto per una dichiarazione color:

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

3. Utilizza il colore suggerito conforme a una linea guida:

   • Fai clic su accanto alle linee guida.
   • Nell'anteprima Sfumature in alto, trascina il Cerchio di colori sotto la riga corrispondente.

Nota: per impostazione predefinita, lo strumento 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 Attiva il nuovo algoritmo APCA (Advanced Perceptual Contrast)

Per ottenere un elenco di tutti i problemi di contrasto contemporaneamente, segui la guida Rendere il sito web più leggibile.

Acquisire un campione di colore da qualsiasi punto con il Contagocce

Lo strumento ContaGocce può campionare i colori sia dalla pagina che 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 l'Ago di misura. Per disattivare la funzionalità, premi Esc.
2. Con lo strumento Contagiocce attivo, passa il mouse sopra il colore target e fai clic per acquisire il campione.

Nota: lo strumento Ago di colore campiona i colori solo nello spazio colore sRGB. Quando esegui il campionamento al di fuori di questo spazio, lo strumento Ago di goccia taglia il colore a quello più vicino. Consulta Convertire i colori.

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