HTML - Code hexadécimal

Structure des codes couleur HEX

Les codes couleur HEX utilisent un format hexadécimal à 6 chiffres, composé de lettres (A-F) et de chiffres (0-9). Le code est précédé d'un signe dièse (#) et n'est pas sensible à la casse. Le code à 6 chiffres est divisé en trois paires, chacune représentant une composante de couleur : rouge (R), vert (G) et bleu (B).

#FF0000

Chaque paire de chiffres dans un code couleur HEX peut varier de 00 à FF, 00 étant l'intensité la plus faible et FF l'intensité la plus élevée de cette composante de couleur particulière. En faisant varier les valeurs des composantes rouge, verte et bleue, de nombreuses couleurs peuvent être créées.

Fonctionnement des codes couleur HEX

Les codes couleur HEX fonctionnent en spécifiant l'intensité des composantes rouge, verte et bleue qui constituent une couleur. Chaque composante est représentée par une valeur hexadécimale allant de 00 à FF. La relation entre les valeurs hexadécimales et les couleurs RVB est simple.

#000000

#FFFFFF

En utilisant différentes combinaisons de valeurs hexadécimales pour ces composantes, vous pouvez représenter plus de 16 millions de couleurs possibles. Cela permet aux développeurs web et aux designers de spécifier des couleurs précises pour divers éléments d'une page web tels que le texte ou les arrière-plans.

Application des couleurs HEX aux éléments HTML

Les codes couleur HEX peuvent être appliqués aux éléments HTML en utilisant l'attribut style. L'attribut style permet de spécifier des styles CSS en ligne pour un élément, y compris les propriétés color et background-color.

Pour définir la couleur du texte d'un élément à l'aide d'un code couleur HEX, utilisez la propriété color dans l'attribut style :

<p style="color: #FF0000;">Ce texte est rouge.</p>

De même, pour définir la couleur de fond d'un élément, utilisez la propriété background-color :

<div style="background-color: #00FF00;">Cette div a un fond vert.</div>

Vous pouvez également appliquer des codes couleur HEX aux bordures en utilisant la propriété border :

<p style="border: 2px solid #0000FF;">Ce paragraphe a une bordure bleue.</p>

En utilisant l'attribut style avec ces propriétés, vous pouvez appliquer des codes couleur HEX à divers éléments HTML et contrôler leur apparence.

Codes couleur HEX en CSS

En plus des styles en ligne, les codes couleur HEX peuvent être définis dans les feuilles de style CSS. Cela permet de séparer les styles de présentation de la structure HTML et d'appliquer des couleurs en utilisant des sélecteurs et des classes CSS.

Pour définir un code couleur HEX dans une feuille de style CSS, utilisez cette syntaxe :

.texte-rouge {
  color: #FF0000;
}

.fond-vert {
  background-color: #00FF00;
}

.bordure-bleue {
  border: 2px solid #0000FF;
}

Nous définissons trois classes CSS : .texte-rouge, .fond-vert, et .bordure-bleue. Chaque classe spécifie un code couleur HEX différent pour sa propriété respective.

Pour appliquer ces classes aux éléments HTML, utilisez l'attribut class :

<p class="texte-rouge">Ce texte est rouge.</p>
<div class="fond-vert">Cette div a un fond vert.</div>
<p class="bordure-bleue">Ce paragraphe a une bordure bleue.</p>

En définissant les codes couleur HEX dans des feuilles de style CSS et en utilisant des sélecteurs et des classes, vous pouvez appliquer des couleurs cohérentes sur votre page web. Cette approche favorise la réutilisation du code et facilite la mise à jour des styles visuels sur votre site web.

Couleurs pastel

• #FFC8DD (Rose)
• #FFAFCC (Rose clair)
• #BDE0FE (Bleu clair)
• #A2D2FF (Bleu ciel)
• #CDB4DB (Lavande)

Tons chauds de terre

• #E76F51 (Terre de Sienne brûlée)
• #F4A261 (Brun sable)
• #E9C46A (Kaki foncé)
• #2A9D8F (Vert jungle)
• #264653 (Fusain)

Vif et audacieux

• #FF4136 (Rouge vif)
• #FF851B (Orange)
• #FFDC00 (Jaune)
• #2ECC40 (Vert)

Ces palettes de couleurs montrent comment différentes teintes peuvent être combinées pour créer des designs visuellement attrayants. Lors du choix des couleurs pour un site web, prenez en compte des facteurs tels que l'harmonie, le contraste et l'ambiance générale que vous souhaitez transmettre.

De nombreux sites web et outils aident les designers à créer et explorer des palettes de couleurs, comme Adobe Color, Coolors et Paletton. Ces outils vous permettent de générer des schémas basés sur différents principes comme les couleurs complémentaires ou analogues.

En utilisant des codes couleur HEX courants et des palettes bien conçues, les concepteurs web peuvent créer des sites attrayants qui communiquent clairement leur message.

Générateurs ou sélecteurs de codes couleur HEX en ligne

Ces sites web vous permettent de sélectionner visuellement une couleur à l'aide d'une roue chromatique ou en ajustant des curseurs pour la teinte, la saturation et la luminosité. Voici quelques sélecteurs de couleurs en ligne populaires :

• ColorPicker.com : Un sélecteur de couleurs simple et intuitif qui affiche les valeurs HEX, RGB et HSL de la couleur sélectionnée.
• Adobe Color : Un outil qui vous permet de créer des palettes de couleurs basées sur différentes règles comme les couleurs monochromatiques ou complémentaires.
• Coolors.co : Un générateur qui vous aide à créer et à enregistrer des palettes de couleurs pour vos projets.

Ces outils sont utiles lorsque vous devez trouver une couleur spécifique ou créer une nouvelle palette.

Extensions et plugins de navigateur

Voici quelques extensions populaires :

• ColorZilla : Une extension pour Firefox et Chrome qui vous permet de prélever des couleurs sur des pages web.
• Eye Dropper : Une extension Chrome qui vous permet de sélectionner des couleurs sur des pages web et de copier leurs valeurs HEX, RGB ou HSL.
• Color Picker : Un module complémentaire Firefox qui vous permet de sélectionner des couleurs sur n'importe quelle page web.

Ces extensions facilitent la sélection rapide de couleurs à partir de sites web existants.

Conversion entre différents formats de couleurs

Vous pourriez également avoir besoin de convertir entre différents formats comme HEX, RGB (Rouge Vert Bleu) et HSL (Teinte Saturation Luminosité).

#FF0000

Un code à 6 chiffres représentant une couleur où chaque paire de chiffres correspond à l'intensité du rouge, du vert et du bleu (par exemple, #FF0000 pour le rouge).

rgb(255, 0, 0)

Spécifie l'intensité du rouge, du vert et du bleu en tant que valeurs individuelles entre 0 et 255.

hsl(0, 100%, 50%)

Représente les couleurs en utilisant les valeurs de teinte (0-360 degrés), saturation (0-100%) et luminosité (0-100%).

De nombreux outils en ligne comme RapidTables fournissent des convertisseurs permettant une entrée dans un format et une sortie dans un autre. Cela peut être utile lorsque vous travaillez avec différents systèmes.