Les couleurs HTML

En HTML Il existe trois façons de spécifier une couleur. Considérez-les.

Comment définir la couleur en utilisant la valeur Hex

HEX est un système de représentation hexadécimale des couleurs qui utilise des chiffres décimaux arabes de 0 à 9 et des lettres latines A à F. La conception Web utilise 16 couleurs clés, le code de couleur hexadécimal #RRGGBB, RR est le rouge, GG est le vert et BB est le bleu. Chaque fraction de couleur est comprise entre 00 et FF.

Le cas des lettres en Hex n'a pas d'importance. Par exemple, la définition de la couleur blanche peut être à la fois la majuscule #FFFFFF et la minuscule #ffffff.

Pour spécifier la couleur, utilisez l'attribut style, où la propriété color sera le code Hex.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        background-color: #1c87c9;
        color: #d5dce8;
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>C'est un texte gris, et le fond est bleu</p>
    </div>
    <p style="color:#8ebf42;"> C'est un texte vert</p>
  </body>
</html>

Résultat

Dans le tableau ci-dessous, vous pouvez trouver un code Hex pour chaque couleur. Vous pouvez également obtenir le code couleur dont vous avez besoin à l'aide de pipette à couleurs/ Color Picker.

Comment définir la couleur en utilisant les noms des couleurs

Afin de changer la couleur, vous devez spécifier son nom en anglais (blue, red, etc.) au lieu de la valeur Hex de l'exemple précédent.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>    
      div {
        background-color: blue;
        color: #d5dce8;
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>C'est un texte gris, et le fond est bleu</p>
    </div>
    <p style="color:blue;"> C'est un texte bleu</p>
  </body>
</html>

Résultat

Comment définir la couleur en utilisant la valeur RGB

Pour définir la couleur, utilisez l’attribut style, où la propriété de la couleur sera le code RGB.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        background-color:rgb(25,25,112);
        color: rgb(169,169,169);
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>C'est un texte gris, et le fond et bleu</p>
    </div>
    <p style="color:rgb(25,25,112);"> C'est un texte bleu</p>
  </body>
</html>

Résultat

Vous trouverez ci-dessous une palette de couleurs inter-navigateur de 216 couleurs.

La valeur Hex Couleur La valeur RGB
#000000 rgb(0,0,0)
#FFFFFF rgb(255,255,255)
#FF0000 rgb(255,0,0)
#00FFFF rgb(0,255,255)
#0000FF rgb(0,0,255)
#C0C0C0 rgb(192,192,192)
#FF00FF rgb(255,0,255)

La valeur Hex Couleur La valeur RGB
#000000   rgb(0,0,0)
#080000   rgb(8,0,0)
#100000   rgb(16,0,0)
#180000   rgb(24,0,0)
#200000   rgb(32,0,0)
#280000   rgb(40,0,0)
#300000   rgb(48,0,0)
#380000   rgb(56,0,0)
#400000   rgb(64,0,0)
#480000   rgb(72,0,0)
#500000   rgb(80,0,0)
#580000   rgb(88,0,0)
#600000   rgb(96,0,0)
#680000   rgb(104,0,0)
#700000   rgb(112,0,0)
#780000   rgb(120,0,0)
#800000   rgb(128,0,0)
#880000   rgb(136,0,0)
#900000   rgb(144,0,0)
#980000   rgb(152,0,0)
#A00000   rgb(160,0,0)
#A80000   rgb(168,0,0)
#B00000   rgb(176,0,0)
#B80000   rgb(184,0,0)
#C00000   rgb(192,0,0)
#C80000   rgb(200,0,0)
#D00000   rgb(208,0,0)
#D80000   rgb(216,0,0)
#E00000   rgb(224,0,0)
#E80000   rgb(232,0,0)
#F00000   rgb(240,0,0)
#F80000   rgb(248,0,0)
#FF0000   rgb(255,0,0)

La valeur Hex Couleur La valeur RGB
#000000   rgb(0,0,0)
#080808   rgb(8,8,8)
#101010   rgb(16,16,16)
#181818   rgb(24,24,24)
#202020   rgb(32,32,32)
#282828   rgb(40,40,40)
#303030   rgb(48,48,48)
#383838   rgb(56,56,56)
#404040   rgb(64,64,64)
#484848   rgb(72,72,72)
#505050   rgb(80,80,80)
#585858   rgb(88,88,88)
#606060   rgb(96,96,96)
#686868   rgb(104,104,104)
#707070   rgb(112,112,112)
#787878&   rgb(120,120,120)
#808080   rgb(128,128,128)
#888888   rgb(136,136,136)
#909090    rgb(144,144,144) 
#989898   rgb(152,152,152)
#A0A0A0    rgb(160,160,160) 
#A8A8A8   rgb(168,168,168)
#B0B0B0   rgb(176,176,176)
#B8B8B8   rgb(184,184,184)
#C0C0C0   rgb(192,192,192)
#C8C8C8   rgb(200,200,200)
#D0D0D0   rgb(208,208,208)
#D8D8D8   rgb(216,216,216)
#E0E0E0   rgb(224,224,224)
#E8E8E8   rgb(232,232,232)
#F0F0F0   rgb(240,240,240)
#F8F8F8   rgb(248,248,248)
#FFFFFF   rgb(255,255,255)

Les couleurs-Web
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 v99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 v99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF



Trouvez-vous cela utile?

Articles Associées