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 par son code hexadécimal et transparence
background:#008B8B2A;
le fond sera darkcyan (code hexa 008B8B) avec une tranparence de valeur hexadécimale 2A.
La valeur de la transparence est donnée sur 1 byte.
Démo
<style>
.fond {background:#008B8B2A}
</style>
</head>
<body>
<div class=fond>
L'erreur n'annule pas la valeur de l'effort accompli.
(Proverbe africain)
</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-même, 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 permet de choisir un niveau de gris: 0% on a une couleur désaturée et donc du gris. A 100% la couleur est
complètement saturée et on a donc que la couleur pleine.
La lumière permet de choisir la luminosité: 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>
Quiz
Clique-moi pour générer un questionnaire !