Couleurs HTML

Vous avez déjà changé l’apparence avec l’attribut style et marqué le sens avec la mise en forme et les citations. Les couleurs façonnent l’ambiance et la lisibilité. Dans ce parcours HTML débutant, vous pratiquez les valeurs de couleur dans style : noms courants, codes hex et fonctions rgb(). Les systèmes de design complets viendront plus tard en CSS ; ici vous apprenez à lire et écrire les formes correctement, pour qu’une page ne paraisse pas seulement « colorée » sans que vous compreniez ce que vous avez vraiment écrit. Quand les trois formes sont maîtrisées, le passage aux feuilles de style partagées devient plus clair, car vous retrouvez les mêmes valeurs hors des attributs inline répétés.

Qu’est-ce qu’une valeur de couleur HTML ?

Une valeur de couleur indique au navigateur quelle couleur utiliser pour une propriété CSS telle que color ou background-color. Les mêmes formes de valeur fonctionnent dans le style inline et dans les feuilles de style. Les débutants rencontrent d’abord trois formes pratiques : un nom lisible (tomato), un code hex (#c0392b) et un mélange rgb() (rgb(192, 57, 43)). Elles peuvent décrire la même teinte avec des écritures différentes, ce qui est utile quand vous copiez depuis une palette ou ajustez un seul canal. Comprendre que nom, hex et rgb peuvent viser la même couleur évite la confusion en comparant des exemples issus de sources différentes.

Réponse directe

Définissez le texte avec color et la zone derrière le contenu avec background-color. Choisissez une forme de valeur adaptée au moment : un nom pour des démos rapides, hex quand vous copiez depuis une palette, ou rgb() quand vous pensez en canaux rouge/vert/bleu de 0 à 255. Gardez un contraste assez fort pour lire. À mesure que les projets grandissent, déplacez les couleurs partagées vers le CSS au lieu de répéter de longs attributs sur chaque page. Cette habitude gagne du temps et évite de petites divergences entre pages quand l’identité du site évolue plus tard.

Formes de valeur en un coup d’œil

Couleurs avec des noms

Les couleurs nommées sont le point de départ le plus accueillant. Associez avec soin la couleur du texte et celle du fond pour que les mots restent lisibles. Le nom aide à expérimenter vite sans mémoriser des chiffres, mais il ne couvre pas chaque teinte d’un vrai design. Voyez les noms comme un pont d’apprentissage, puis passez à hex ou rgb quand vous avez besoin de plus de précision ou de couleurs provenant d’un outil de design.

Lecture de l’exemple

• Le premier paragraphe ne change que la couleur du texte
• Le second fixe à la fois le fond et le texte pour que le bleu marine reste net sur bleu clair
• Les noms ne sont pas sensibles à la casse en CSS, mais les minuscules restent une habitude claire
• Chaque mot de couleur anglais n’est pas un nom CSS valide — restez sur des noms courants que vous avez vérifiés
• Si une couleur « ne fait rien », vérifiez d’abord que le nom correspond exactement au libellé CSS et n’est pas une traduction libre

Couleurs hex

Une couleur hex commence en général par # suivi de six caractères parmi 0–9 et a–f. Les paires signifient rouge, vert et bleu. #000000 est noir ; #ffffff est blanc. Inutile de mémoriser un catalogue — choisissez dans une palette et collez avec soin. Beaucoup d’outils de design fournissent un hex prêt à copier ; votre rôle est de garder le # et six chiffres valides pour que le navigateur ne rejette pas la valeur en silence.

Conseils hex

• Gardez le # — dans la forme de cette leçon, 336699 seul n’est pas la même chose que #336699
• N’utilisez que des chiffres hex valides ; les lettres s’arrêtent à f
• Le hex à trois chiffres existe en CSS (#333), mais les codes à six chiffres suffisent à ce stade du cours
• Revérifiez le copier-coller pour qu’un chiffre manquant ne fasse pas échouer la couleur sans message clair
• Comparez #c0392b au nom ou au rgb équivalent quand vous voulez confirmer avoir collé la bonne teinte de la palette

Couleurs rgb()

La fonction rgb() mélange rouge, vert et bleu sous forme de nombres de 0 à 255. rgb(255, 0, 0) est un rouge pur. Cette forme est pratique quand vous réglez un canal à la fois, par exemple pour augmenter la luminosité ou réduire le bleu sans recalculer le hex à la main. Les trois nombres suivent toujours l’ordre rouge, vert, bleu ; les virgules font partie de la syntaxe.

Relier les formes

La même teinte peut souvent s’écrire comme nom, hex ou rgb. Choisissez une forme par démo pour que votre œil apprenne la syntaxe. Plus tard en CSS vous rencontrerez d’autres notations ; ces trois couvrent la pratique HTML de début. Quand une palette donne du hex et un autre outil du rgb, souvenez-vous qu’il peut s’agir de la même couleur écrite de deux façons. L’essentiel est une forme complète et correcte à l’intérieur de style.

Contraste et lisibilité

Une couleur valide peut encore être un mauvais choix. Un texte jaune clair sur blanc peut être analysé sans erreur et rester difficile à lire. Quand vous fixez à la fois color et background-color, vérifiez que le texte se détache. Sur de vrais sites, le contraste fait partie de l’accessibilité — commencez l’habitude dès maintenant, même dans de petites démos. Un bon contraste n’est pas qu’esthétique ; c’est une condition pour que le visiteur lise le contenu sans effort, surtout sur des écrans différents ou sous une lumière forte.

Pratique dans votre éditeur

1. Créez trois courts paragraphes sous un titre.
2. Colorez le texte du premier avec un nom (teal ou similaire).
3. Colorez le texte du second avec une valeur hex.
4. Donnez au troisième un background-color via rgb(), et un color sombre si besoin pour le contraste.
5. Enregistrez et actualisez. Confirmez que chaque forme fonctionne.
6. Cassez volontairement un hex (retirez un chiffre), actualisez, puis corrigez — cela entraîne une syntaxe soignée.
   Répétez l’exercice avec d’autres couleurs jusqu’à distinguer vite nom, hex et rgb sans rouvrir vos notes à chaque fois. Surveillez aussi que les guillemets entourent toute la valeur de style ; une petite erreur d’attribut peut supprimer toute la couleur.

Erreurs qui cachent ou affaiblissent les couleurs

• Confondre color (texte) et background-color (derrière le texte)
• Écrire #33, #gggggg ou un hex sans # alors que vous visiez un code à six chiffres
• Des combinaisons à faible contraste qui paraissent « stylées » mais restent difficiles à lire
• Construire tout un thème de marque uniquement avec des styles inline répétés au lieu d’apprendre ensuite le CSS partagé
• Supposer que chaque mot de couleur anglais est un nom CSS valide sans vérifier
• Oublier de fermer les guillemets de la valeur style, de sorte que le navigateur lise l’attribut comme incomplet
  Chacune de ces erreurs fait perdre du temps ou affaiblit la confiance dans le contenu. Relisez la page avec les yeux d’un visiteur : le texte est-il clair sur son fond ? Comprenez-vous pourquoi vous avez choisi cette forme de valeur ?

Résumé

• Utilisez color et background-color dans style pour des démos de couleur rapides
• Valeurs : noms, hex (#RRGGBB) ou rgb(r, g, b)
• Les paires hex correspondent au rouge, au vert et au bleu ; les canaux rgb vont de 0 à 255
• Préférez un contraste lisible dès que le texte repose sur un fond coloré
• Déplacez les couleurs partagées vers le CSS quand les pages et projets grandissent
• Vérifiez avec enregistrement et actualisation ; corrigez la syntaxe avec soin quand une couleur « ne fait rien »
  Dans cet ordre, vous construisez une habitude claire : choisir la bonne propriété, écrire une valeur complète, protéger la lecture par le contraste, puis passer à des styles partagés plus larges.