Le sélecteur de couleur fournit une IUG permettant de modifier les déclarations color et *-color, et vous permet de créer, convertir et déboguer des couleurs non HD et HD en un clic.
Pour une présentation détaillée des nouveaux espaces de couleur, consultez le Guide de couleurs CSS 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:
- Sélectionnez un élément dans le panneau Éléments.
Dans le volet Styles, recherchez la déclaration
colorou*-colorque vous souhaitez modifier.À gauche de chaque valeur
colorou*-color, une petite icône carrée affiche un aperçu de cette couleur.
Pour inspecter la valeur calculée, utilisez le volet Calculé.
- Cliquez sur le carré d'aperçu à côté d'une couleur pour ouvrir le sélecteur de couleur.
- Pour modifier la couleur, utilisez l'un des éléments d'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:
- Ombres :
- Pipette : Consultez Échantillonner une couleur n'importe où avec la pipette.
- Copier dans le presse-papiers : Copiez la valeur d'affichage dans votre presse-papiers.
- Valeur d'affichage : Arguments de l'espace colorimétrique choisi.
- Rapport de contraste : Disponible uniquement pour les valeurs
color. C'est la différence entrecoloretbackground-color. - Palette de couleurs : Cliquez sur un carré pour utiliser la couleur du carré.
- Limite de Gamut. 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. Cette ligne vous permet de distinguer les vidéos HD des non-HD. - Cercle de couleurs : Faites glisser ce cercle à travers les stores pour modifier la valeur d'affichage.
- Curseur de teinte :
- Curseur d'opacité :
- Sélecteur de valeur d'affichage : Sélectionnez un espace colorimétrique dans la liste déroulante. Consultez Convertir les couleurs.
- Développer le rapport de contraste : Ouvre la section correspondante qui vous permet de corriger le contraste.
Sélecteur de palette de couleurs : Cliquez dessus pour basculer entre les différentes options:
- Palette Material Design :
- Personnaliser. Pour ajouter manuellement la couleur actuelle à cette palette, cliquez sur
. - Variables CSS. Répertorie toutes les variables CSS personnalisées (ajoutées par
--) sur votre page. - Couleur 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:
Cliquez tout en maintenant la touche Maj enfoncée sur l'icône d'aperçu située à côté d'une valeur de couleur. Une liste déroulante s'ouvre.
Choisissez l'un des espaces de couleur suivants:
Ou l'un des nouveaux espaces:
Ou 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 à l'aide du sélecteur de valeur d'affichage, les outils de développement convertissent automatiquement les valeurs.
Pointez sur l'icône pour voir la valeur d'origine.
La vidéo suivante présente les conversions en action.
Corriger le contraste
Pour résoudre un problème de contraste pour une déclaration color:
- Ouvrez le sélecteur de couleur à côté de la valeur
color. - Développez la section Rapport de contraste
. Utilisez la couleur suggérée qui respecte les consignes:
- Cliquez sur
à côté de la consigne. - Dans l'aperçu Ombres en haut, faites glisser le cercle Couleur sous la ligne correspondante.
- Cliquez sur
Pour obtenir une liste de tous les problèmes de contraste en une seule fois, suivez le guide Améliorer la lisibilité de votre site Web.
Dégustez une couleur n'importe où avec la pipette
La pipette 
peut échantillonner les couleurs à la fois sur la page et n'importe où sur l'écran.
Pour choisir une couleur n'importe où sur l'écran:
- Ouvrez le sélecteur de couleur, puis effectuez l'une des opérations suivantes :
- Cliquez sur le bouton
(Publier). - Appuyez sur C pour activer la pipette. Pour la désactiver, appuyez sur Échap.
- Cliquez sur le bouton
- Avec la pipette active, pointez sur la couleur cible et cliquez pour échantillonner.
Dans cet exemple, le sélecteur de couleur affiche la valeur actuelle de rgb(224 255 255 / 15%) pour la couleur. Cette couleur devient rose lorsque vous cliquez en dehors de Chrome.