Astuce CSS3 et RGBA avec les outils de développement de Google Chrome

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Astuce CSS3 et RGBA avec les outils de développement de Google Chrome

J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence.

Pour cela, je lance les outils de développement de Google Chrome (Ctrl + Maj + i ou Clic droit et «Inspecter l’élément»). Je clique ensuite plusieurs fois sur le carré de couleur jusqu’à ce que le mode rgb() apparaisse. Il suffit ensuite de copier-coller les valeurs dans lafeuille de style CSS.

Exemple visible sur la nouvelle version de WordPress & Webdesign :

#menu-download-basics a {
    background: #807666;
    background: rgba(128,118,102,0.8);
}
Le premier background précise une couleur au format hexadécimal pour les anciens navigateurs, tandis que le deuxième s’adresse aux navigateurs capables d’afficher une couleur en transparence avec la propriégé RGBa indiquée dans le 4ème paramètre (ici, 0.8).

Finie, l’ouverture de Photoshop pour connaitre les valeurs RGB d’une couleur au format Hexadécimal !

Fonction "Inspecter l'élément" de Google Chrome

Parmi les modes colorimétriques disponibles, on trouve :

  • Hexadécimal (Rouge, Vert, Bleu) : #807666,
  • RGB (Rouge, Vert, Bleu) : rgb(128, 118, 102),
  • HSL (Teinte, Saturation et luminance) : hsl(37, 11%, 45%).

Le dernier mode (TSL en français) est très intéressant car il permet de modifier, pour une couleur donnée, uniquement la teinte (en gardant les informations de saturation et de luminosité intactes), la saturation (en gardant les deux autres) ou la luminosité (idem).

Je ne dis pas que ces outils de développement remplaceront l’extension ColorZilla de Firefox, mais ils peuvent ponctuellement rendre des services.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



2 commentaires pour “Astuce CSS3 et RGBA avec les outils de développement de Google Chrome”

  1. Erik dit :

    Ce sont les outils de développement de Webkit et cette astuce fonctionne donc également dans Safari. Il faut au préalable activer le mode développeur dans les préférences (onglet « avancées »).

  2. Guillaume L. dit :

    et sinon pour le backup du rgba tu peux simplement utiliser du rgb, pas besoin de convertir en hexa ;)



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site