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

Jecelyn Yeen

Twitter GitHub Page d'accueil

Sofia Emelianova

GitHub

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

Important:Cette vidéo présente les outils pour les développeurs Chrome dont la version est antérieure à la version 112. Dans les versions ultérieures, le volet Styles accepte 12 nouveaux espaces de couleur et sept nouvelles gammes issues de la spécification CSS Color Level 4 (Niveau de couleur CSS 4) et de la fonction color-mix() du CSS Color Level 5.

Pour en savoir plus sur les nouveaux espaces de couleur, consultez le guide des couleurs CSS en haute définition.

Ouvrir le sélecteur de couleur et modifier les couleurs

Utilisez le sélecteur de couleur 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 offre un aperçu de cette couleur.

   

   Remarque:Cet exemple montre deux cercles croisés à côté de la fonction color-mix(): . L'intersection est un aperçu de la couleur obtenue.

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

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

Éléments du sélecteur de couleur

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

1. Ombres :
2. Pipette : Consultez Échantillonner une couleur n'importe où avec la pipette.
3. Copier dans le presse-papiers. Copiez la valeur Display value (Valeur d'affichage) 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. C'est la différence entre color et background-color.
6. Palette de couleurs : Cliquez sur un carré pour lui appliquer la couleur du carré.
7. Limite de plage. Cette ligne n'est disponible que pour les nouveaux espaces de couleur et la fonction color(). Ils peuvent produire des couleurs HD et non HD. La ligne permet de faire la distinction entre HD et non HD.
8. Cercle de couleur. Faites glisser ce cercle sur les nuances pour modifier la valeur d'affichage.
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 les couleurs.
    Remarque:Pour ouvrir directement le menu déroulant, maintenez la touche Maj enfoncée et cliquez sur l'icône d'aperçu des couleurs à côté de la valeur de la couleur.
12. Augmenter le rapport de contraste. Ouvre la section correspondante vous permettant de corriger le contraste.

13. Sélecteur de palette de couleurs : Cliquez dessus pour basculer entre les éléments suivants:

    • Palette Material Design.
    • Palette personnalisée. Pour ajouter manuellement la couleur actuelle à cette palette, cliquez sur .
    • Variables CSS. Liste toutes les variables CSS personnalisées (ajoutées à --) 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. Tout en maintenant la touche Maj enfoncée, cliquez sur l'icône d'aperçu à côté d'une valeur de couleur. Une liste déroulante s'ouvre.

   Remarque:Vous pouvez également cliquer sur le sélecteur de valeur d'affichage dans le sélecteur de couleur.

   

2. Choisissez l'un des espaces de couleur 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)

   Il peut également s'agir d'un espace défini par la fonction color(<color_space> X X X).

Convertir les couleurs

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

Attention:Lors de la conversion du format HD au format non HD, les outils de développement rognent des gammes pour les adapter à l'espace et marquent les valeurs rognées à l'aide d'icônes d'avertissement .

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

La vidéo suivante présente les conversions.

Corriger le contraste

Important:Le sélecteur de couleurs ne calcule les rapports de contraste que pour les valeurs color et par rapport aux valeurs background-color respectives. Ainsi, seules les valeurs color comportent des sections Rapport de 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 Contrast ratio (Rapport de contraste) .

3. Utilisez la couleur suggérée conforme aux consignes:

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

Remarque:Par défaut, le sélecteur de couleur vous suggère de suivre les consignes de WebAIM. Vous pouvez également le configurer pour suggérer des valeurs conformes à l'APCA : Dans Paramètres > Tests, cochez Activer le nouvel algorithme de contraste perceptuel avancé (APCA)...

Pour obtenir instantanément une liste de tous les problèmes de contraste, suivez le guide Rendre votre site plus lisible.

Échantillonnez 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 choisir une couleur depuis n'importe quel écran sur l'écran:

1. Ouvrez le sélecteur de couleurs, puis effectuez l'une des opérations suivantes :
   • Cliquez sur le bouton (Publier).
   • Appuyez sur C pour activer la pipette. Pour le désactiver, appuyez sur Échap.
2. Avec la pipette activée, pointez sur la couleur cible, puis cliquez pour échantillonner.

Remarque:La pipette échantillonne uniquement les couleurs dans l'espace colorimétrique sRVB. Lorsque vous échantillonnez un échantillon en dehors de cet espace, la pipette associe la couleur à la couleur la plus proche. Consultez Convertir les couleurs.

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