Internet

Les couleurs hmtl

Les couleurs en html sont définies par 3 nombres hexadécimaux représentant les tons de Rouge, de Vert et de Bleu (selon le codage RVB (Red Green Blue, en anglais : RGB) de la couleur choisie. la syntaxe de codage d’une couleur en html est la suivante : color:#rrvvbb.

ff0000 rouge

00ff00 vert

00ffff bleu

Le mode hexadécimal

rr, vv et bb représentent respectivement un nombre hexadécimal entre 00 et ff pour le Rouge, le Vert et le Bleu ; ff est la valeur la plus forte, 00, la plus sombre.

Vous recherchez une couleur bien précise pour l’insérer sur votre site ?

Améthyste, #884DA7

Rubis, #E0115F

Emeraude, #01D758

Ambre jaune, #F0C300

Bleu saphir, #0131B4

Or, #996600

Olive, #808000

Sable, #E0CDA9

Havane, #947F60

Menthe à l’eau, #54F98D

Café, #462E01

Tomate, #FF6347

Indigo, #4B0082

Prune, #811453

Pistache, #BEF574

Pourpre, #800080

Cerise, #BB0B0B

Maïs, #FFDE75

Sang, #850606

Citron, #F7FF3C

Bleu marin, #000080

Moutarde, #C7CF00

Caramel, #7E3300

Bleu lavande, #E6E6FA

Corail, #FF7F50

Coquelicot, #C60800

Denim, #1560BD

Bleu ciel, #77B5FE

Rose bonbon, #F9429E

• Un site qui recense les principales couleurs, très bien fait et joli esthétiquement, un peu ancien de conception, une vraie mine d’or pour trouver une couleur : www.letoileauxsecrets.fr

• Un autre site, très complet également, avec les correspondances cmyk, pantone … : toutes-les-couleurs.com

Le mode rgba

Les valeurs R, V, et B allant de 0 (noir) à 255 (blanc),la valeur alpha allant de 0 (transparent) à 1 (visible). Si on veut un effet de transparence, on utilise le codage rgba : color:rbga(255, 255, 255, 0.8). 0.8 indiquant l’opacité qui est 80 % ici. Voir aussi l’article : Les propriétés CSS3

Le mode hsl

Les fonctions hsl() ou hsla() sont basés sur Teinte (H), Saturation (S) et Lumière (L):
– Teinte: valeur de couleur sur un cercle chromatique de 0° (Rouge) à 360° (Rouge). A 60°: Jaune, à 120°: Vert, à 180°: Cyan, à 240°: Bleu, à 300°: Magenta.
– Saturation: de 0 à 100%
– Lumière ou Luminance: de 0 (entièrement noir) à 100% (entièrement blanc). 50% correspond à la teinte de base.

Le mode hsla : la valeur “a” indique la transparence ou l’opacité de la couleur.

Exemple hsl

Rouge

hsl(0, 100%, 50%)

hsl(0, 50%, 50%)

hsl(0, 25%, 50%)

hsl(0, 100%, 50%)

hsl(0, 100%, 100%)

hsl(0, 100%, 75%)

hsl(0, 100%, 25%)

hsl(0, 100%, 5%)

Turquoise

hsl(180, 100%, 50%)

hsl(180, 50%, 50%)

hsl(180, 25%, 50%)

hsl(180, 100%, 50%)

hsl(180, 100%, 100%)

hsl(180, 100%, 75%)

hsl(180, 100%, 25%)

hsl(180, 100%, 5%)

Citron vert

hsl(120, 100%, 50%)

hsl(120, 50%, 50%)

hsl(120, 25%, 50%)

hsl(120, 100%, 50%)

hsl(120, 100%, 100%)

hsl(120, 100%, 75%)

hsl(120, 100%, 25%)

hsl(120, 100%, 5%)

Exemple hsla

hsla(240, 100%, 50%, 0.5)

hsla(60, 100%, 50%, 0.5)

hsla(120, 100%, 50%, 0.5)

Avantages

On peut très vite trouver soient les couleurs complémentaires, en ajoutant 180° à la valeur teinte (h) ; soient les couleurs analogues ou couleurs adjacentes : on enlève ou ajoute à la valeur de la teinte des angles de 30° ou des couleurs monochromes en jouant sur la valeur “s” saturation.

Inconvénients

Les logiciels de graphisme les plus fréquents n’utilisent pas le même mode que CSS. Il faut donc utiliser un convertisseur, notamment ColorZilla, disponible également sous forme d’Addon, ici > ColorZilla, addon pour Firefox. La propriété CSS3 hsl(a), n’est reconnue qu’à partir d’IE9 pour Internet Explorer, il faut donc doubler la déclaration css, si on veut utiliser ce mode. Exemple : couleur{background-color:#FF0000;background-color:hsl(0, 100%, 50%);}.