{"id":2226,"date":"2015-11-07T14:56:50","date_gmt":"2015-11-07T14:56:50","guid":{"rendered":"http:\/\/photos-infographiste.com\/diario\/?p=2226"},"modified":"2018-08-02T13:29:08","modified_gmt":"2018-08-02T13:29:08","slug":"les-couleurs-html","status":"publish","type":"post","link":"https:\/\/photos-infographiste.com\/diario\/les-couleurs-html\/","title":{"rendered":"Couleurs html"},"content":{"rendered":"

Internet<\/p><\/blockquote>\n

Les couleurs hmtl<\/h1>\n

\"Les<\/a\/><\/p>\n

Les couleurs en html sont d\u00e9finies par 3 nombres hexad\u00e9cimaux repr\u00e9sentant les tons de Rouge, de Vert et de Bleu (selon le codage RVB (Red Green Blue, en anglais : RGB)<\/em> de la couleur choisie. la syntaxe de codage d’une couleur en html est la suivante : color:#rrvvbb.<\/h6>\n
ff0000 rouge<\/div>\n
00ff00 vert<\/div>\n
00ffff bleu<\/div>\n
<\/div>\n

<\/p>\n

Le mode hexad\u00e9cimal<\/h3>\n

rr, vv et bb repr\u00e9sentent respectivement un nombre hexad\u00e9cimal entre 00 et ff pour le Rouge, le Vert et le Bleu ; ff est la valeur la plus forte, 00, la plus sombre.<\/p>\n

Vous recherchez une couleur bien pr\u00e9cise pour l’ins\u00e9rer sur votre site ?<\/p>\n

Am\u00e9thyste, #884DA7<\/div>\n
Rubis, #E0115F<\/div>\n
Emeraude, #01D758<\/div>\n
Ambre jaune, #F0C300<\/div>\n
Bleu saphir, #0131B4<\/div>\n
Or, #996600<\/div>\n
Olive, #808000<\/div>\n
Sable, #E0CDA9<\/div>\n
Havane, #947F60<\/div>\n
Menthe \u00e0 l’eau, #54F98D<\/div>\n
Caf\u00e9, #462E01<\/div>\n
Tomate, #FF6347<\/div>\n
Indigo, #4B0082<\/div>\n
Prune, #811453<\/div>\n
Pistache, #BEF574<\/div>\n
Pourpre, #800080<\/div>\n
Cerise, #BB0B0B<\/div>\n
Ma\u00efs, #FFDE75<\/div>\n
Sang, #850606<\/div>\n
Citron, #F7FF3C<\/div>\n
Bleu marin, #000080<\/div>\n
Moutarde, #C7CF00<\/div>\n
Caramel, #7E3300<\/div>\n
Bleu lavande, #E6E6FA<\/div>\n
Corail, #FF7F50<\/div>\n
Coquelicot, #C60800<\/div>\n
Denim, #1560BD<\/div>\n
Bleu ciel, #77B5FE<\/div>\n
Rose bonbon, #F9429E<\/div>\n
 <\/div>\n

\u2022 Un site qui recense les principales couleurs, tr\u00e8s bien fait et joli esth\u00e9tiquement, un peu ancien de conception, une vraie mine d’or pour trouver une couleur : www.letoileauxsecrets.fr<\/a><\/p>\n

\u2022 Un autre site, tr\u00e8s complet \u00e9galement, avec les correspondances cmyk, pantone … : toutes-les-couleurs.com<\/a><\/p>\n

Le mode rgba<\/h3>\n

Les valeurs R, V, et B allant de 0 (noir) \u00e0 255 (blanc),la valeur alpha allant de 0 (transparent) \u00e0 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\u00e9 qui est 80 % ici. Voir aussi l’article : Les propri\u00e9t\u00e9s CSS3<\/a><\/p>\n

Le mode hsl<\/h3>\n

Les fonctions hsl() ou hsla() sont bas\u00e9s sur Teinte (H), Saturation (S) et Lumi\u00e8re (L):
\n– Teinte: valeur de couleur sur un cercle chromatique de 0\u00b0 (Rouge) \u00e0 360\u00b0 (Rouge). A 60\u00b0: Jaune, \u00e0 120\u00b0: Vert, \u00e0 180\u00b0: Cyan, \u00e0 240\u00b0: Bleu, \u00e0 300\u00b0: Magenta.
\n– Saturation: de 0 \u00e0 100%
\n– Lumi\u00e8re ou Luminance: de 0 (enti\u00e8rement noir) \u00e0 100% (enti\u00e8rement blanc). 50% correspond \u00e0 la teinte de base.\n<\/p>\n

Le mode hsla : la valeur “a” indique la transparence ou l’opacit\u00e9 de la couleur.<\/p>\n

Exemple hsl<\/h4>\n
Rouge<\/div>\n
hsl(0, 100%, 50%)<\/div>\n
hsl(0, 50%, 50%)<\/div>\n
hsl(0, 25%, 50%)<\/div>\n
hsl(0, 100%, 50%)<\/div>\n
hsl(0, 100%, 100%)<\/div>\n
hsl(0, 100%, 75%)<\/div>\n
hsl(0, 100%, 25%)<\/div>\n
hsl(0, 100%, 5%)<\/div>\n
Turquoise<\/div>\n
hsl(180, 100%, 50%)<\/div>\n
hsl(180, 50%, 50%)<\/div>\n
hsl(180, 25%, 50%)<\/div>\n
hsl(180, 100%, 50%)<\/div>\n
hsl(180, 100%, 100%)<\/div>\n
hsl(180, 100%, 75%)<\/div>\n
hsl(180, 100%, 25%)<\/div>\n
hsl(180, 100%, 5%)<\/div>\n
Citron vert<\/div>\n
hsl(120, 100%, 50%)<\/div>\n
hsl(120, 50%, 50%)<\/div>\n
hsl(120, 25%, 50%)<\/div>\n
hsl(120, 100%, 50%)<\/div>\n
hsl(120, 100%, 100%)<\/div>\n
hsl(120, 100%, 75%)<\/div>\n
hsl(120, 100%, 25%)<\/div>\n
hsl(120, 100%, 5%)<\/div>\n
<\/div>\n

Exemple hsla<\/h4>\n
hsla(240, 100%, 50%, 0.5)<\/div>\n
hsla(60, 100%, 50%, 0.5)<\/div>\n
hsla(120, 100%, 50%, 0.5)<\/div>\n
<\/div>\n

 <\/p>\n

Avantages<\/strong><\/p>\n

On peut tr\u00e8s vite trouver soient les couleurs compl\u00e9mentaires, en ajoutant 180\u00b0 \u00e0 la valeur teinte (h) ; soient les couleurs analogues ou couleurs adjacentes : on enl\u00e8ve ou ajoute \u00e0 la valeur de la teinte des angles de 30\u00b0  ou des couleurs monochromes en jouant sur la valeur “s” saturation. <\/p>\n

Inconv\u00e9nients<\/strong><\/p>\n

\"addon<\/a><\/p>\n

Les logiciels de graphisme les plus fr\u00e9quents n’utilisent pas le m\u00eame mode que CSS. Il faut donc utiliser un convertisseur, notamment ColorZilla<\/a>, disponible \u00e9galement sous forme d’Addon<\/em>, ici > ColorZilla, addon pour Firefox<\/a>. La propri\u00e9t\u00e9 CSS3 hsl(a), n’est reconnue qu’\u00e0 partir d’IE9 pour Internet Explorer, il faut donc doubler la d\u00e9claration css, si on veut utiliser ce mode. Exemple : couleur{background-color:#FF0000;background-color:hsl(0, 100%, 50%);}<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Internet Les couleurs hmtl Les couleurs en html sont d\u00e9finies par 3 nombres hexad\u00e9cimaux repr\u00e9sentant 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 … Continuer la lecture de Couleurs html<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2298,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"link","meta":[],"categories":[3,4],"tags":[],"_links":{"self":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts\/2226"}],"collection":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/comments?post=2226"}],"version-history":[{"count":88,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts\/2226\/revisions"}],"predecessor-version":[{"id":4274,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts\/2226\/revisions\/4274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/media\/2298"}],"wp:attachment":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/media?parent=2226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/categories?post=2226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/tags?post=2226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}