Comment utiliser le sélecteur de couleurs Google Chrome ?

Google Chrome est fourni avec Chrome DevTools, qui est une collection d'outils de développement Web. Parmi tous les outils accessibles, le sélecteur de couleurs disponible dans Chrome est très pratique.

Mais comment y accéder ? Comment l'utilisez-vous? Quelles sont les fonctionnalités offertes avec l'outil ?

Dans cet article, nous allons explorer cet outil et ses fonctionnalités.

Comment lancer le sélecteur de couleurs Chrome ?

Vous pouvez accéder à l'outil chrome du sélecteur de couleurs à l'aide d'un raccourci clavier ou d'une interface graphique (interface utilisateur graphique).

Press Ctrl + Shift + I lors de l'utilisation du clavier pour obtenir les DevTools, puis dirigez-vous vers le sélecteur de couleurs. Si vous utilisez un mac, vous devez appuyer sur, Commande + Option + I.

A l'aide de la souris, vous devez effectuer un clic droit puis cliquer sur "Inspect" pour naviguerate via les DevTools.

Vous pouvez également définir Chrome DevTools pour s'ouvrir automatiquement à chaque nouvel onglet. Ainsi, vous pouvez accéder rapidement au sélecteur de couleurs pour chaque onglet de votre browser.

Pour y parvenir, vous devez lancer une nouvelle instance de Chrome à l'aide de la ligne de commande tout en transmettant l'indicateur suivant :

--auto-open-devtools-for-tabs

Voici à quoi cela ressemble lors du lancement de chrome avec DevTools à ouverture automatique via le terminal sous Linux :

google-chrome-stable --auto-open-devtools-for-tabs

Comment utiliser la couleur Sélecteur sur Chrome ?

Une fois que vous aurez lancé DevTools, vous devrez naviguerate votre moyen d'accéder aux outils nécessaires pour identifier la couleur sur une page Web ou un design sur lequel vous souhaitez travailler.

Par défaut, vous devriez pouvoir voir le "Style" section active au bas des DevTools, comme indiqué dans la capture d'écran.

Si vous avez sélectionné autre chose, assurez-vous de cliquer sur "Style” pour accéder au code CSS de la page Web.

Ici, vous devez faire défiler le code CSS disponible et rechercher une couleur box étiqueté comme arrière-plan ou couleur sous la section corps. C'est le sélecteur de couleurs que vous recherchiez.

Cliquez simplement sur la couleur box; cela devrait vous donner plus d'options, comme le montre la capture d'écran ci-dessous.

C'est ça! Voilà, vous avez le sélecteur de couleurs sur votre browsje suis prêt à vous aider.

Ici, vous devriez trouver le code hexadécimal ou la valeur RVB de la couleur et avoir la possibilité de sélectionner d'autres CSS éléments à explorer et inspect la conception sur la page Web.

Fonctionnalités du sélecteur de couleurs sur Chrome

Le sélecteur de couleurs intégré de Chrome vous donne une variété d'informations en plus du code hexadécimal pour identifier la couleur.

Voici ce que vous pouvez en attendre. Certaines fonctionnalités clés incluent :

Palettes de couleurs : Au lieu de parcourir de nombreuses nuances de couleurs, vous obtenez des palettes de couleurs prédéfinies pour appliquer rapidement certaines sélections.

Format couleur: Vous avez la possibilité de passer de code hexadécimal aux valeurs RGBA et à la couleur HSLA valeurs aussi.

Pipette: Lorsque vous accédez au sélecteur de couleurs, vous pouvez browse la page Web et sélectionnez n’importe quel élément pour obtenir le code hexadécimal de cette couleur. Vous pouvez cliquer sur le sélecteur de couleurs toggle pour activer/disable le

Vous disposez de plus d'options pour modifier les couleurs et obtenir la précision.ate couleur de votre choix. Les voici:

• Copiez le Presse-papiers: Vous pouvez copier le code de la couleur identifiée rapidement dans votre presse-papiers.
• Dégradé de couleur: Vous pouvez modifier la nuance de la couleur et parcourir les possibilités d'une combinaison de couleurs à votre guise.
• Contrôle de l'opacité: Vous pouvez ajuster le niveau de transparence pour lui donner un aspect solide ou minimal.
• Sélecteur de couleur d'arrière-plan: Pour choisir une couleur d'arrière-plan appropriée pour un contraste parfait.
• Rapport de contraste: Ajustez le contraste ou corrigez-le pour rendre le texte/l'élément visible.

Remarque: L'outil de sélection de couleurs n'est pas limité à Google Chrome mais peut être utilisé sur n'importe quel site Web basé sur Chrome.rowseuh comme Brave.

Comment utiliser le sélecteur de couleurs Chrome avec Google Slides?

Vous pouvez naviguerate pour accéder à l'outil de sélection de couleurs si vous effectuez un clic droit sur la section d'en-tête de Google Slides page web. Même si Google Slides n'offre pas d'outil de sélection de couleurs intégré, cela devrait suffire.

Si vous n'êtes pas à l'aise avec l'utilisation des DevTools avec Google Slides, vous pouvez aussi en essayer extensions de chrome Pour le boulot.

Extensions Chrome comme alternative au sélecteur de couleurs

Bien que les extensions puissent s'avérer utiles, il convient de noter qu'elles ne sont pas activement mises à jour.ated ou maintenu. Étant donné qu'ils ont besoin d'accéder à votre browsEuh, vous devez être prudent lors de l’installation d’une extension, même celles recommandées ici.

Cependant, il existe deux extensions populaires que vous pourriez être intéressé à essayer :

# 1. ColorZilla

ColorZilla L'extension offre toutes les fonctions essentielles que vous obtenez avec le sélecteur de couleurs intégré de chrome. En prime, vous avez également la possibilité de consulter l'historique de la dernière couleur choisie.

Cela devrait donc être utile pour tous les cas d'utilisation, pas seulement avec Google. Slides.

# 2. Pipette ColorPick

Si vous rencontrez des problèmes avec l'outil Pipette à l'aide de DevTools, vous pouvez essayer Pipette ColorPick pour obtenir une pipette sans accéder aux outils Web.

Lorsque vous sélectionnez une couleur, elle affichera la valeur RVB et l'option de générerate palettes de couleurs. Semblable à l’extension ci-dessus, vous pouvez également vérifier l’historique des couleurs que vous choisissez.

Derniers mots 🎨

Chrome DevTools Color Picker est un outil utile. Vous n'avez pas besoin d'un outil professionnel pour vous aider à identifier les couleurs et leurs associés.ated code ou valeurs. L'outil intégré de Chrome facilite la tâche sans avoir besoin d'un third-extension de fête.

Des graphistes aux développeurs Web, construisant un modèle de site Webplate, tout le monde devrait le trouver utile.

Bien sûr, vous pouvez choisir d'utiliser third-extensions de fête disponibles également. Mais, à moins que vous n’en ayez besoin, nous vous suggérons d’explorer toutes les fonctionnalités avec DevTools.