Les couleurs

Le premier exercice vous demande seulement de passer d'un code à l'autre.
Ce sera le cas également des exercices suivants, mais ces exercices mettront ces codes couleur en action dans des exemples de code CSS. Lisez attentivement ces codes, il faut en retenir l'essentiel.

Changer de code.

Donner le code hexadécimal du code couleur rgb(92, 164, 211).
Donner le code rgb du code couleur hexadécimal #ca9107.

De rgb vers hexa

On pose la division de 92 par 16. On obtient : \[ 92 = 5\times 16 +12\] D'où les deux premiers chiffres en hexa : 5c.

On pose la division de 164 par 16. On obtient : \[ 164 = 10\times 16 +4\] D'où les deux chiffres du milieu en hexa : a4.

On pose la division de 211 par 16. On obtient : \[ 211 = 13\times 16 +3\] D'où les deux derniers chiffres en hexa : d3.

Le code en hexadécimal : #5ca4d3.

De hexa vers rgb

ca : \( c \times 16 +a = 12\times 16 + 10 = 202 \). La composante rouge vaut 202.

91 : \( 9\times 16 + 1 = 145\). La composante verte vaut 145.

07 : \( 0\times 16 + 7 = 7 \). La composante bleue vaut 7.

Le code rgb : rgb(202,145,7).

background-color et color.

Les éléments html sont tous inscrits dans une boîte rectangulaire. Ces boîtes rectangulaires peuvent être mises en évidence à l'aide de couleur de fond avec la propriété CSS background-color .

Le texte d'un paragraphe est lui mis en couleur avec la propriété CSS color .

Dans l'exemple de code suivant, les codes couleurs sont donnés en RGB. Modifiez les pour les obtenir en hexadécimal.

Le code CSS est le code qui se situe entre les balises <style> et </style>.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  De RGB vers l'hexa </title>
        
        <style>
        p{
        	background-color : rgb(100, 0,200); /* couleur de fond des paragraphes */
        	color : rgb(0, 150, 50); /* couleur du texte des paragraphes */
        	font-weight: bold; /* texte mis en gras */
        }
        </style>
    </head>
    <body>
        
		 <p> Un paragraphe en langage html est délimité par des balises p.
		 Ce paragraphe montre qu'il ne faut pas choisir les couleurs n'importe comment ! </p>
	  
        
    </body>
</html>

rgb(100, 0,200)

On pose la division de 100 par 16. On obtient : \[ 100 = 6\times 16 +4\] D'où les deux premiers chiffres en hexa : 64.

On pose la division de 0 par 16. On obtient : \[ 0 = 0\times 16 +0\] D'où les deux chiffres intermédiaires en hexa : 00.

On pose la division de 200 par 16. On obtient : \[ 200 = 12\times 16 +8\] D'où les deux derniers chiffres en hexa : c8.

Le code en hexadécimal : #6400c8.

Essayez de modifier le code dans le cadre de l'énoncé et vérifier que la couleur est inchangée.

rgb(0, 150, 50)

On pose la division de 0 par 16. On obtient : \[ 0 = 0\times 16 +0\] D'où les deux premiers chiffres en hexa : 00.

On pose la division de 150 par 16. On obtient : \[ 150 = 9\times 16 +6\] D'où les deux chiffres du milieu en hexa : 96.

On pose la division de 50 par 16. On obtient : \[ 50 = 3\times 16 +2\] D'où les deux derniers chiffres en hexa : 32.

Le code en hexadécimal : #009632.

Essayez de modifier le code dans le cadre de l'énoncé et vérifier que la couleur est inchangée.

Le code modifié

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  De RGB vers l'hexa </title>
        
        <style>
        p{
        	background-color : #6400c8; /* couleur de fond des paragraphes */
        	color : #009632; /* couleur du texte des paragraphes */
        	font-weight: bold; /* texte mis en gras */
        }
        </style>
    </head>
    <body>
        
		 <p> Un paragraphe en langage html est délimité par des balises p.
		 Ce paragraphe montre qu'il ne faut pas choisir les couleurs n'importe comment ! </p>
	  
        
    </body>
</html>

border-color.

Les éléments html sont tous inscrits dans une boîte rectangulaire. Ces boîtes rectangulaires peuvent être mises en évidence à l'aide de couleur de bordure avec la propriété CSS border-color .

Dans l'exemple de code suivant, les codes couleurs sont donnés en hexadécimal. Modifiez les pour les obtenir en rgb.

Le code CSS est le code qui se situe entre les balises <style> et </style>.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  De l'hexa vers rgb </title>
        
        <style>
        div{
        	 border-width : 3px; /* épaisseur du trait de bordure */
        	 border-style : dotted; /* trait de bordure en pointillés */
        	 border-color : #ffaa00; /* couleur de bordure */
        	 color : #00cb00; /* couleur du texte */
        }
        </style>
    </head>
    <body>
        
		 <div> Une division est une boîte de type block par défaut. </div>
	  
        
    </body>
</html>

#ffaa00

ff = \(15 \times 16 +15 \) = 255.

aa = \( 10\times 16 +10 \) = 170.

00 = \( 0 \times 16 +10 \) = 0.

Le code RGB est donc rgb(255, 170, 0).

Essayez de modifier le code dans le cadre de l'énoncé et vérifier que la couleur est inchangée.

#00cb00

cb = \( 12 \times 16 + 11 \) = 203.

Le code RGB est donc rgb(0, 203, 0).

Essayez de modifier le code dans le cadre de l'énoncé et vérifier que la couleur est inchangée.

Le code modifié

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  De l'hexa vers rgb </title>
        
        <style>
        div{
        	 border-width : 3px; /* épaisseur du trait de bordure */
        	 border-style : dotted; /* trait de bordure en pointillés */
        	 border-color : rgb(255, 170, 0); /* couleur de bordure */
        	 color : rgb(0, 203, 0); /* couleur du texte */
        }
        </style>
    </head>
    <body>
        
		 <div> Une division est une boîte de type block par défaut. </div>
	  
        
    </body>
</html>