Les couleurs jouent un rôle essentiel dans la transmission d'informations non verbales. Un site Web avec des couleurs interactives est considéré comme attrayant et visuellement attrayant. Il existe différentes méthodes pour appliquer des couleurs aux éléments HTML : RGB, RGBA, HEX Code, HSLA et HSL. Cependant, vous pouvez trouver des codes de couleur en inspectant la page, en sélectionnant des couleurs dans le sélecteur de couleurs ou en utilisant la fonction de pipette du panneau Developers Tool.
Dans cette étude, nous aborderons les méthodes de recherche de code couleur en HTML
Méthode 1 : Trouver un code couleur en HTML en inspectant la page Web
Voici les étapes pour trouver le code couleur en inspectant la page.
Étape 1 : Ouvrir la page Web
Tout d'abord, ouvrez la page Web requise :
Étape 2 : sélectionnez l'option d'inspection
Faites un clic droit sur la page et sélectionnez le ' Inspecter » du menu, qui donnera accès à l'option « Outils de développement ” panneau :
En conséquence, le « Éléments L'onglet ' s'affichera en bas du navigateur :
Étape 3 : Ajuster l'emplacement du panneau de l'outil de développement
En cliquant sur les trois points du coin, vous pouvez sélectionner l'emplacement du panneau. Par exemple, nous avons sélectionné l'icône en surbrillance verte. De plus, la fenêtre d'inspection peut être redimensionnée en faisant glisser ses coins :
Étape 4 : Sélectionnez l'élément à inspecter
Ensuite, cliquez sur l'icône en surbrillance pour sélectionner l'élément que vous souhaitez inspecter :
Étape 5 : Choisissez l'élément
Survolez l'élément dont le code couleur doit être trouvé et cliquez dessus. En conséquence, le « modes L'onglet ' s'ouvre et affiche les propriétés de style de l'élément sélectionné, à partir duquel vous devez sélectionner la couleur comme indiqué par la case en surbrillance verte :
Étape 6 : Choisissez la couleur dans le sélecteur de couleurs
Copiez le code couleur de la fenêtre de sélection de couleurs ouverte :
L'image ci-dessous indique que nous pouvons également sélectionner des couleurs en cliquant sur les petites cases de couleur mises en évidence par la couleur rouge. Alors que la case jaune représente un pointeur qui se modifie progressivement pour voir la couleur de l'élément sélectionné :
Étape 7 : Ajustez l'opacité de la couleur
Vous pouvez également ajuster l'opacité des couleurs comme illustré dans le GIF ci-dessous :
Méthode 2 : Trouver un code couleur en HTML à l'aide de la fonction Pipette
La fonction de compte-gouttes peut également être utilisée pour sélectionner n'importe quelle couleur de la page Web. Cette fonctionnalité est très pratique car elle permet de sélectionner une couleur n'importe où dans la fenêtre affichée.
Noter: La fonction Pipette est représentée par la case en surbrillance rouge dans l'image ci-dessous :
Voici une démonstration du fonctionnement de l'outil Pipette :
Après avoir sélectionné la couleur de votre élément, copiez le code couleur et collez-le dans le CSS de votre projet.
Conclusion
Il existe différentes méthodes pour appliquer des couleurs aux éléments HTML : RGB, RGBA, HEX Code, HSLA et HSL. Vous pouvez trouver des codes de couleur par ' Inspecter ” n'importe quelle page Web ou en sélectionnant des couleurs dans le “ pipette à couleurs ' et en utilisant le ' Compte-gouttes ' caractéristique. Cet article a démontré la procédure pour trouver des codes de couleur en HTML avec des exemples détaillés.