choisir les bonnes couleurs pour un site (hexa, rgb)

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.

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 :

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 26/09/2018 : On peut également utiliser deux sites très bien faits : Coolors et

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

Creative colors est un peu moins simple mais intéressant. On choisit la paire de couleur qui nous intéresse dans la page puis on en extrait les couleurs comme indiqué dans le paragraphe suivant.  Dans l’image qui suit, les couleurs sont #f49e9a, #f8f5e5 et #f3c4bc.

Un exemple de palette avec Color Claim
Un exemple de palette avec Color Claim

 

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.

 

1
Poster un Commentaire

avatar
  S’abonner  
plus récent plus ancien Le plus populaire
Notifier de
trackback

[…] un article précédent, nous avons parlé du choix des couleurs pour un site web : comment décrire une couleur et comment […]