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

Jecelyn Yeen

Twitter GitHub Homepage

Sofia Emelianova

GitHub

Il selettore colori fornisce una GUI per la modifica delle dichiarazioni color e *-color e 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 CSS Color Level 4 e la funzione color-mix() di CSS Color Level 5.

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

Apri il Selettore colori e cambia i colori

Utilizza il selettore colori per modificare i valori dei colori con un solo 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 è presente una piccola icona quadrata con un'anteprima del colore in questione.

   

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

Per esaminare il valore calcolato, utilizza il riquadro Calcolato.

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

Elementi del selettore colori

Di seguito è riportata una descrizione di ciascun elemento dell'interfaccia utente del selettore colori:

1. Tensioni.
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 sostituire il colore del quadrato.
7. Confine del gamut. Questa riga è disponibile solo per i nuovi spazi colore e la funzione color(). Sono in grado di produrre colori sia HD che non HD. La linea consente di distinguere tra HD e non HD.
8. Cerchio dei colori. Trascina questo cerchio attraverso le ombre per modificare il valore di visualizzazione.
9. Dispositivo di scorrimento tonalità.
10. Dispositivo di scorrimento dell'opacità.
11. Mostra il selettore di valori. 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 di anteprima colore accanto al valore del colore.
12. Espandi il rapporto di contrasto. Apre la sezione corrispondente che consente di correggere il contrasto.

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

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

Scegli uno spazio colore

Per scegliere uno spazio colore:

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

   Nota: in alternativa, fai clic sul selettore dei valori 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 i colori

Quando passi da uno spazio colore a un altro con il selettore di valori di visualizzazione, DevTools converte automaticamente i valori.

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

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

Il prossimo video mostra le conversioni in azione.

Correggi contrasto

Punto chiave: il selettore colori calcola i rapporti di contrasto solo per i valori di color e relativi ai rispettivi valori di background-color. Pertanto, solo i valori 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. Utilizza il colore suggerito che rispetti le linee guida:

   • Fai clic su accanto alla linea guida.
   • Nell'anteprima Tende in alto, trascina il Cerchio di colore sotto la riga corrispondente.

Nota: per impostazione predefinita, il selettore colori ti consiglia di seguire le linee guida di WebAIM. In alternativa, puoi impostarlo in modo che suggerisca valori conformi ad APCA: In Impostazioni > Esperimenti, seleziona Attiva il nuovo algoritmo del contrasto percettivo avanzato (APCA)...

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

Campiona un colore ovunque con il Contagocce

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

Per scegliere 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 disattivarla, premi Esc.
2. Con il Contagocce attivo, passa il mouse sopra il colore target e fai clic per campionare.

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

In questo esempio, il Selettore colori mostra un valore corrente del colore pari a rgb(224 255 255 / 15%). Questo colore diventa rosa quando fai clic all'esterno di Chrome.