Eklablog
Editer l'article Suivre ce blog Administration + Créer mon blog

Couleur

Il existe trois moyens différents de noter les couleurs pour les navigateurs les reconnaissent : avec leur nom (anglais), un code hexadécimal ou en RGB

Couleur nommées

Il s'agit d'utiliser le nom de la couleur dans le code. Voici un petit aperçu des couleurs pouvant être utilisé de cette façon.

Red

Blue

Yellow

Green

Maroon

Lime

Gray

Fuchsia

Purple

Silver

Teal

White

Aqua

Olive

Navy

Black

Il en existe d'autre, mais je vous laisserais le soin de les chercher sur internet.

C'est la méthode la plus simple pour utiliser rapidement un couleur.

CSS

sélecteur {   color: red;}

HTML

<balise color="red" />

Code Héxadécimal

Permettant de faire plus de 16 millions de couleurs, cette façon d'écrire les couleurs est beaucoup plus complète que la précédente.
On utilise la notation suivante :

#RRVVBB

On utilise ensuite des chiffres de 1 à 9 et des lettres de A à F que l'on associe par paire pour indiquer les intensités de rouge, de vert et de bleu de la couleur voulue. Les deux premier correspondent au rouge, ceux du milieu au vert et les derniers au bleu. Le F est la teinte la plus intense, et le 0 la plus sombre. Ce type de code est toujours précédé du symbole #

Ainsi, si je veux du rouge,j'obtiens le code suivant:

CSS

sélecteur {   color: #ff0000;}

HTML

<balise color="#ff0000" />

Couleur RGB

Ce type d'écriture fonctionne de la même manière qe les couleurs héxa: il faut définir 3 valeurs, une pour le rouge, le vert et le bleu.

rgb(R,V,B)

Gardons la couleur rouge. J'obtient le code suivant :

CSS

sélecteur {   color: rgb(255,0,0);}

HTML

<balise color="rgb(255,0,0)" />

255 est la valeur maximum que peut prendre cette couleur. Si ce nombre ne vous parle pas, vous pouvez utiliser la même notation avec des pourcentages

CSS

sélecteur {   color: rgb(100%,0,0);}

HTML

<balise color="rgb(100%,0,0)" />

Canal Alpha

Il est également possible de créer des couleurs transparentes en rajoutant un canal dans la notation rgb : le canal alpha. Il permet de gérer l'opacité de la couleur entre 0 (invisible) et 1 (visible)

Dans l'exemple suivant, j'ai un rouge à 50% d'opacité.

CSS

sélecteur {   color: rgba(255,0,0,0.5);}

HTML

<balise color="rgba(255,0,0,0.5)" />

 
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
F
Merci beaucoup en tout cas. Je vais garder le lien précieusement jusqu'à ce que je trouve le bon dosage mais pour le moment je n'y parviens pas. Le dégradé ne se voit pas assez et pourtant cela fait une demi-heure que je teste avec des pourcentages différents. Bonne journée et merci encore. Votre site est une mine d'or.
Répondre
F
Cela marche bien en effet mais il faut décocher toutes les cases de mon fond actuel. Le problème va être pour moi de trouver comment avoir le bon dégradé car celui-ci, que je viens de tester chez moi, donne un bleu qui ne me plait pas en partie basse.
Répondre
N
#body {background: #12121c; /* Old browsers */background: -moz-linear-gradient(top,  #12121c 0%, #363654 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12121c), color-stop(100%,#363654)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #12121c 0%,#363654 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #12121c 0%,#363654 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #12121c 0%,#363654 100%); /* IE10+ */background: linear-gradient(to bottom,  #12121c 0%,#363654 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12121c', endColorstr='#363654',GradientType=0 ); /* IE6-9 */}<br /> Ce code fonctionne sur mon blog.<br /> Le fait que les cases soient cochées peut masquer les codes ajoutés en CSS, mais ne provoquent pas d'erreur<br /> <br /> Pour modifier la couleur, double cliquez sur les petits carrés en bas. Ceux du haut permettent re modifier l'opacité.<br />  
Répondre
F
Et sur mon site actuel, la couleur de base #12121C est cochée partout où il faut, c'est peut-être pour ça que les codes ne fonctionnent pas<br />  
Répondre
F
Je viens de réessayer mais Ekla rejette à nouveau le code qui est le suivant :<br /> /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#606c88+0,3f4c6b+100;Grey+3D+%232 */background: #606c88; /* Old browsers */background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* IE10+ */background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */<br /> Ce n'est d'ailleurs pas ce que je veux comme couleur car je voudrais partir du bleu marine que j'ai déjà sur mon site mais en y ajoutant un peu de dégradé.
Répondre