Inspectez et déboguez les couleurs HD et non HD à l'aide du sélecteur de couleur

Jecelyn Yeen

Sofia Emelianova

Le sélecteur de couleur fournit une interface utilisateur graphique permettant de modifier les déclarations color et *-color, et vous permet de créer, de convertir et de déboguer des couleurs HD et non HD en un clic.

Pour en savoir plus sur les nouveaux espaces colorimétriques, consultez le guide sur les couleurs CSS haute définition.

Ouvrir le sélecteur de couleur et modifier les couleurs

Utilisez le sélecteur de couleurs pour modifier les valeurs de couleur en un clic :

1. Sélectionnez un élément dans le panneau Éléments.

2. Dans le volet Styles, recherchez la déclaration color ou *-color que vous souhaitez modifier.

   À gauche de chaque valeur color ou *-color, une petite icône carrée affiche un aperçu de la couleur.

   

Pour inspecter la valeur calculée, utilisez le volet Calculé.

1. Cliquez sur le carré d'aperçu à côté d'une couleur pour ouvrir le sélecteur de couleurs.
2. Pour modifier la couleur, utilisez l'un des éléments d'UI du sélecteur de couleurs.

Éléments du sélecteur de couleur

Voici une description de chacun des éléments de l'interface utilisateur du sélecteur de couleurs :

1. Nuances.
2. Pipette Consultez Échantillonner une couleur n'importe où avec la pipette.
3. Copier dans le presse-papiers. Copiez la valeur à afficher dans le presse-papiers.
4. Valeur d'affichage : Arguments de l'espace colorimétrique choisi.
5. Rapport de contraste. Disponible uniquement pour les valeurs color. Il s'agit de la différence entre color et background-color.
6. Palette de couleurs. Cliquez sur un carré pour modifier la couleur.
7. Limite du gamut Cette ligne n'est disponible que pour les nouveaux espaces colorimétriques et la fonction color(). Ils peuvent produire des couleurs HD et non HD. Cette ligne vous permet de faire la distinction entre la HD et la non-HD.
8. Cercle de couleurs Faites glisser ce cercle sur les nuances pour modifier la valeur affichée.
9. Curseur de teinte :
10. Curseur d'opacité :
11. Sélecteur de valeur d'affichage : Sélectionnez un espace colorimétrique dans la liste déroulante. Consultez Convertir des couleurs.
12. Développez le rapport de contraste. Ouvre la section correspondante qui vous permet de corriger le contraste.

13. Sélecteur de palette de couleurs. Cliquez dessus pour basculer entre les options suivantes :

    • Palette Material Design.
    • Palette Personnalisée. Pour ajouter manuellement la couleur actuelle à cette palette, cliquez sur .
    • Palette Variables CSS. Liste toutes les variables CSS personnalisées (ajoutées avec --) sur votre page.
    • Palette de couleurs de la page. Pour générer cette palette, les outils de développement recherchent toutes les couleurs de vos feuilles de style.

Choisir un espace colorimétrique

Pour choisir un espace colorimétrique :

1. Cliquez en maintenant la touche Maj enfoncée sur l'icône d'aperçu à côté d'une valeur de couleur. Une liste déroulante s'ouvre.

   

2. Choisissez l'un des espaces colorimétriques suivants :

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

   ou l'un des nouveaux espaces :

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

   ou un espace défini par la fonction color(<color_space> X X X).

Convertir des couleurs

Lorsque vous passez d'un espace colorimétrique à un autre avec le sélecteur de valeurs d'affichage, les outils de développement convertissent automatiquement les valeurs.

Pointez sur l'icône pour afficher la valeur d'origine.

La vidéo suivante montre les conversions en action.

Corriger le contraste

Pour résoudre un problème de contraste pour une déclaration color :

1. Ouvrez le sélecteur de couleur à côté de la valeur color.
2. Développez la section Rapport de contraste .

3. Utilisez la couleur suggérée qui respecte une consigne :

   • Cliquez sur  à côté de la consigne.
   • Dans l'aperçu Nuances en haut de l'écran, faites glisser le cercle de couleur sous la ligne correspondante.

Par défaut, le sélecteur de couleur suggère des valeurs conformes à l'APCA.

Vous pouvez également le configurer pour qu'il suggère des valeurs conformes aux consignes WebAIM. Dans Paramètres > Préférences > Éléments, décochez la case  Algorithme avancé de contraste perceptuel (APCA)....

Pour obtenir la liste de tous les problèmes de contraste en une seule fois, suivez le guide Rendre votre site Web plus lisible.

Prélever une couleur n'importe où avec la pipette

La pipette  peut échantillonner les couleurs de la page et de n'importe quel endroit de l'écran.

Pour sélectionner une couleur n'importe où sur l'écran :

1. Ouvrez le sélecteur de couleur et effectuez l'une des opérations suivantes :
   • Cliquez sur le bouton .
   • Appuyez sur C pour activer l'outil Pipette. Pour désactiver, appuyez sur Échap.
2. Lorsque l'outil Pipette est actif, pointez sur la couleur cible et cliquez pour la sélectionner.

Dans cet exemple, le sélecteur de couleur affiche la valeur de couleur actuelle rgb(224 255 255 / 15%). Cette couleur devient rose lorsque vous cliquez en dehors de Chrome.