avril 23, 2019

Manipulation des couleurs avec le sélecteur de couleurs dans Chrome DevTools

Découvrez Chrome DevTools et son processus de démarrage rapide. Nous allons couvrir les fonctionnalités de l'outil de sélection des couleurs et leur manipulation des couleurs dans les pages Web.

Chrome DevTools est un ensemble d'outils de développement Web directement intégrés au navigateur Google Chrome . DevTools peut vous aider à modifier des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui vous aide finalement à créer de meilleurs sites Web, plus rapidement. Avec DevTools, vous pouvez afficher et modifier n’importe quelle page de votre navigateur en inspectant simplement ses éléments et en modifiant les valeurs HTML et CSS.

Dans cet article, nous allons examiner quelques moyens de manipuler les couleurs de sites Web différents à l’aide du sélecteur de couleurs dans Chrome DevTools. Premièrement, commençons par montrer quelques façons d’ouvrir Chrome DevTools à partir de la page d’accueil de Chrome.

Il existe plus d’une façon d’ouvrir DevTools. Si vous n’en connaissez pas, il n’ya pas de quoi s’inquiéter, nous allons parcourir tout cela dans cette section. Commençons par le premier:

Élément à inspecter: dans Chrome, lors de la navigation sur un site Web, vous pouvez facilement cliquer avec le bouton droit de la souris sur n’importe quel élément de la page (image, texte, vidéo, etc.) et sélectionner Inspecter dans la liste. Ceci ouvrira le panneau Elements dans DevTools, où vous pourrez inspecter le DOM ou les fichiers CSS du site Web. Voyons ceci sur la page d'accueil de Google:

En cliquant sur Inspecter ouvrira les outils de développement du panneau Elements dans lesquels vous pouvez manipuler les propriétés des éléments:

Raccourcis clavier: Certaines personnes préfèrent utiliser les raccourcis. C’est une bonne chose que Chrome propose des raccourcis clavier sur tous les systèmes d’exploitation pour ouvrir DevTools à partir de n’importe quelle fenêtre de navigateur. Pour macOS, appuyez simplement sur Commande + Option + C . Ou bien Ctrl + Maj + C fonctionne sous Windows, Linux et Chrome OS.
Enfin, vous pouvez également suivre la longue route si vous souhaitez cliquer et utiliser le menu principal de Chrome, comme suit: [19659009] Merveilleux. Maintenant que nous avons vu comment ouvrir le panneau DevTools dans Chrome, voyons comment gérer les couleurs avec le sélecteur de couleurs DevTools.
Pour accéder au sélecteur de couleur, inspectez un élément, puis sélectionnez les styles. onglet et cliquez sur un carré de couleur. Il va charger le sélecteur de couleur où vous pouvez changer la couleur existante en n'importe quelle couleur de votre choix. Pour illustrer cela, changeons la couleur de fond de la page d'accueil de Google en une nuance de rouge:

Nous avons vu comment effectuer une opération de base de changement de couleur avec le sélecteur de couleur. Pour mieux comprendre le fonctionnement du sélecteur de couleurs, jetons un coup d’œil à certaines de ses caractéristiques.
Conversion du mode couleur
Le sélecteur de couleur vous permet de convertir facilement les modes couleur. Le sélecteur de couleurs vous permet de convertir des fichiers HEX, RGBA et HSLA.
Cela s'avère pratique lorsque vous utilisez un mode de couleur particulier dans votre application et que vos spécifications sont présentées dans un autre mode. Le sélecteur de couleurs vous permet de sélectionner une couleur particulière dans un mode et de copier sa valeur dans les autres modes:

Palette de conception de matériau intégrée
Le sélecteur de couleurs a la possibilité de choisir entre différentes palettes de couleurs. Par défaut, toutes les couleurs de votre page Web seront affichées. Toutefois, il vous permet de sélectionner une palette personnalisée et de créer vos propres couleurs ou de choisir la palette Matériau, qui vous fournit une liste de couleurs conforme aux spécifications de Google Material Design

.
Effets de teinte et d’opacité
Le sélecteur de couleur a la possibilité d’ajuster les effets de teinte et d’opacité de la couleur sélectionnée jusqu’à ce que la valeur désirée soit atteinte. Pendant que vous ajustez les barres d’effet, les valeurs de votre sélection de couleur changent en conséquence pour vous fournir la valeur de couleur exacte qui correspond à votre motif.
Cette fonction est particulièrement utile lorsque vous créez des motifs de perte de vision. La plupart du temps, les personnes ayant une déficience visuelle ont besoin de valeurs de teinte et d'opacité élevées ou abaissées pour bien visualiser votre site Web et l'utiliser efficacement. Voici comment modifier ces effets avec le sélecteur de couleur:

Eye Dropper
L'outil Sélecteur de couleurs vous permet également de choisir les couleurs des pages Web et de les utiliser dans votre application. Cette fonctionnalité est très pratique lorsque vous répliquez une fonctionnalité d'interface utilisateur à partir d'une autre page Web ou souhaitez simplement reconstruire une certaine fonctionnalité. L'outil compte-gouttes facilite grandement la sélection des couleurs et leur définition selon leurs propriétés. Voyons comment cela fonctionne:

Conclusion
Dans cet article, nous avons montré comment manipuler les couleurs avec le sélecteur de couleurs dans Chrome. Il existe bien plus d’informations sur Chrome DevTools et sur tout ce que vous pouvez faire pour améliorer votre expérience de développement et de conception. N'hésitez pas à consulter la documentation officielle pour plus d'informations.
En savoir plus sur DevTools
Vous souhaitez en savoir plus sur l'utilisation de Chrome DevTools? Jetez un coup d'œil aux autres articles de cette série ou commencez ici:
Pour plus d'informations sur la création d'applications Web exceptionnelles
Vous souhaitez en savoir plus sur la création d'interfaces utilisateur de qualité? Découvrez Kendo UI – notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.