Lorsqu’on crée un site internet, une des difficultés est d’identifier les couleurs que l’on souhaite utiliser. Il faut savoir quel est le code Hexadécimal ou RVB d’une couleur qui nous plait ou quelles sont les couleurs complémentaires que l’on pourrait utiliser.

Cet article fait partie d’une série intitulée

Quels sont les codes haxadécimal ou RGB (RVB en français) de cette couleur ?

code hexadécimal ou RGB, quezako ?

Pour en savoir plus, allez voir sur wikipedia ici. Sur le HSB, on pourra lire  en anglais The HSB Color System: A Practitioner’s Primer.

Toute couleur correspond à un assemblage de Rouge, Vert (Green en anglais) ou Bleu. On peut donc décrire une couleur en décrivant ses attributs RVB (RGB en anglais).

Ainsi le noir correspond à (0,0,0) en RVB : ni rouge, ni vert, ni bleu.

Le blanc est à l’opposé : (255,255,255) en RVB, soit le maximum de rouge, le maximum de vert et le maximum de bleu.

0 à 255 pour coder une couleur, ça représente un octet de données (un octet = 8 bits = 28 = 256 valeurs possibles, de 0 à 255).

Il nous faut donc trois octets pour représenter une couleur. En hexadécimal (la manière « normale » de compter pour un ordinateur), ça va être représenté également par trois octets. Chaque octet peut prendre une valeur de 00 (0 en décimal) à FF (255 en décimal).

La couleur blanche sera donc, en hexadécimal : #000000 tandis que le noir sera #FFFFFF.

Un certain nombre de couleurs peuvent également être appelées par leur nom en anglais (‘white’ pour ‘blanc’, « black’ pour ‘noir’.

Les codes couleur dans les feuilles de style

Supposons que nous voulions donner les couleurs suivantes à un élément de classe « mon-texte ».

La feuille de style contiendra :

.mon-texte { 
	/* couleur du texte */
	color: #000000 ; /* ou color: black ou color: rgb(0,0,0); */
	/* couleur du fond */
	color: #FFFFFF ; /* ou color: white ou color: rgb(255,255,255); */
}

identifier les couleurs utilisées par un site web

Quelles sont les couleurs utilisées par un site que j’aprécie. On mettra l’adresse de ce site dans http://webcolourdata.com/

quelles couleurs utilise ce site ?

Trouver une palette de couleurs pré-définie

On pourra essayer Paletton ou Colorion.co, deux sites qui proposent des palettes pré-définies.

Mise à jour du 22 avril 2019 : on pourra également utiliser une palette de couleur composée de 3 à 8 couleurs différentes de Palette generator, par Learn UI Design.

Palette generator, par Learn UI Design

Palette generator, par Learn UI Design

Mise à jour du 26/09/2018 : On peut également utiliser Coolors.

Coolors : on appuie sur la barre d’espace pour générer une palette. Une fois qu’une couleur nous plait, on la verrouille en sélectionnant le petit cadenas. Des pressions sur la barre d’espace permettent ensuite de modifier les autres couleurs.

Exemple de palette de couleurs générée avec Coolors

Exemple de palette générée avec Coolors

Quelles sont les couleurs d’une image ?

Pour repérer les couleurs utilisées dans une image ou choisir une image pour ses couleurs, j’utilise http://labs.tineye.com/

Ici on extrait les couleurs d’une photo disponible sur le web.

Quelles sont les couleurs de cette image ?

Ce site permet également de chercher sur le web des photos utilisant une ou plusieurs couleurs prédéfinies. Mais attention, les images ne sont pas toutes utilisables légalement (licence).

Ici je recherche d’autres images utilisant le même rouge (#7f1005) que dans la photo ci-dessus

rechercher des images d'une couleur donnée

Repérer des couleurs complémentaires

https://color.adobe.com/fr/create/color-wheel/    (était adobe kuler)

Quelles couleurs associer ?

Et voilà !

L’autre article de cette série  parle de la vérification du bon contraste entre les couleurs choisies pour les polices et les fonds.

0 0 votes
Évaluation de l'article
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x