Informatique


Les couleurs

Aller à

Une couleur par son nom

background : darkcyan;

le fond sera darkcyan.

Les couleurs standardisées classées selon leur nom.

Les groupes de couleurs standardisées classées selon leur groupe.

Démo
<style> 
	.fond {background:darkcyan} 
</style>  
</head> 
<body> 
	<div class=fond>
		Que ton baiser ait l'ardeur du soleil, et la rose te donnera tout son parfum.<br> 
		(Proverbe kurde)
	</div>
</body> 

Une couleur par son code hexadécimal

background:#008B8B;

le fond sera darkcyan (code hexa 008B8B).

Pour rappel, les 2 premiers chiffres concernent le rouge, les 2 suivants le vert et les deux derniers le bleu. Chaque chiffre peur prendre une valeur de 0 à F (01231456789ABCDEF).

Les couleurs classées selon leur valeur hexadécimale.

Démo
<style> 
	.fond {background:#008B8B} 
</style>  
</head> 
<body> 
	<div class=fond>
		Qui veut faire quelque chose trouve un moyen ; qui ne veut rien faire trouve une excuse.<br> 
		(Proverbe arabe)
	</div>
</body> 

Une couleur avec rgb

background : rgb(0,139,139);

Le fond sera darkcyan (code décimal 0,139,139).

3 nombres (0 à 255) séparés par des virgules. Dans l'ordre le rouge, le vert et le bleu.

Démo
<style> 
	.fond {background:rgb(0,139,139)} 
</style>  
</head> 
<body> 
	<div class=fond>
		Là où la diplomatie a échoué, il reste la femme.<br> 
		(Proverbe arabe)
	</div>
</body> 

Une couleur avec rgba

background : rgba(0,139,139, 0.2);

Le fond sera darkcyan (code décimal 0,139,139) avec une transparence de 20%.

Le dernier paramètre permet de gérer la transparence (paramètre alpha) directement. L'opacité s'indique par une valeur comprise entre 0.0 (transparence totale) et 1.0 (totalement opaque).

Démo
<style> 
	.fond {background:rgba(0,139,139, 0.2)} 
</style>  
</head> 
<body> 
	<div class=fond>
		La vie est un jeu de cartes : Dieu les bat, et le Diable les distribue.<br> 
		(Proverbe yougoslave )
	</div>
</body> 

Une couleur avec hsl (PM)

background : hsl(180, 100%, 27%);

le fond sera darkcyan.

HSL pour Hue, Saturation, Lightness (Teinte, Saturation, Lumière).

La teinte correspond à la couleur, elle varie sur un cercle que l'on retrouve dans la plupart des palettes de couleurs. Il suffit donc de choisir la teinte en indiquant un nombre de degrés de 0 à 360°.
La saturation est un pourcentage : 0% on a une couleur désaturée complètement et donc du gris. A 100% la couleur est complètement saturée et on a donc que la couleur.
La lumière est un pourcentage : 50% c'est la couleur pure, 0% c'est le noir, 100% c'est le blanc.

Les couleurs hsl.

Démo
<style> 
	.fond	{background:hsl(180, 100%, 27%);} 
</style>  
</head> 
<body> 
	<div class=fond>
		Sois sans désirs, tu seras riche ; sois sans crainte, tu seras fort.<br> 
		(Proverbe arabe )
	</div>
</body> 

Une couleur avec hsla (PM)

background : hsl(180, 100%, 27%,0.5);

le fond sera darkcyan avec une transparence de 50%.

Démo
<style> 
	.fond	{background:hsla(180, 100%, 27%,0.5);} 
</style>  
</head> 
<body> 
	<div class=fond>
		L'abeille, quand elle récolte le miel, ne coupe pas la fleur.<br> 
		(Proverbe rom )
	</div>
</body>