INFORMATIQUE : CRÉER UN SITE WEB

METTEZ-Y DE LA COULEUR!

Bleue comme une orange*

Le choix des couleurs constitue une étape importante pour réussir la charte graphique d'un site Web.

En tant que composantes des éléments graphiques (avec le logo, l'en-tête, les polices utilisées, etc.), les couleurs contribuent en effet à définir le ton ainsi que l'identité visuelle d'un site. Elles seront donc choisies en fonction du public visé ainsi que de l'intention du site, tout en gardant à l'esprit que dans le choix et l'agencement des couleurs, lisibilité, simplicité et cohérence devraient prévaloir.

Déclaration des couleurs en HTML/CSS

Les couleurs sur les pages Web sont obtenues en mélangeant 256 nuances de rouge, de vert et de bleu en proportions variables.

Si certaines couleurs peuvent être directement désignées par leur nom en anglais, le format de codage RVB (Rouge, Vert, Bleu ou RGB pour Red, Green, Blue, en anglais) est plus largement utilisé en HTML. C'est d'ailleurs le modèle qui se rapproche le plus du fonctionnement d'un écran.

Modèle RVB

La couleur est obtenue à partir de la combinaison des trois couleurs de base (rouge, vert, bleu), chacune de ces couleurs ayant une luminosité plus ou moins forte déterminée par la valeur d'un octet pouvant aller de 0000 0000 à 1111 1111. Pour coder la couleur d'un pixel, il faut donc utiliser trois octets qui définissent respectivement le niveau de rouge, de vert et de bleu, donc vingt-quatre chiffres binaires au total. Pour simplifier, on emploiera plutôt un nombre hexadécimal à six chiffres, les deux premiers correspondant à la valeur du rouge, les deux suivants à celle du vert et les deux derniers à celle du bleu.

Système hexadécimal

Le système hexadécimal est un système de numération positionnel en base 16 (il compte donc seize symboles plutôt que dix dans le système décimal) utilisant les chiffres arabes pour les dix premiers symboles (0 à 9) et, comme il n'existe pas de chiffres (à ne pas confondre avec les nombres) pour représenter 10, 11, 12, 13, 14 et 15, les lettres A à F pour les six derniers. Donc, en hexadécimal, 10 est représenté par A et 15 par F. Au-delà de 15, on ajoutera un second symbole : ainsi, 10 en hexadécimal équivaut à 16 en base décimale, 11 à 17 et 1A à 26.

Code RVB en notation hexadécimale

Avec ce système, tous les nombres de 0 à 255 peuvent être représentés par deux symboles (chiffres ou lettres), la plus haute valeur étant 255 (FF en hexadécimal) et la plus basse 0 (00 en hexadécimal). Donc, #FFFFFF pour le blanc et #000000 pour le noir. Le dièse (#) qui précède les symboles indique l'utilisation d'un nombre hexadécimal plutôt que d'un nombre décimal. Quand les deux symboles de chacune des valeurs des composantes de rouge, de vert et de bleu sont identiques, il est possible d'utiliser la notation hexadécimale abrégée, soit uniquement le premier symbole de chacune des valeurs. Ainsi, #3e7 devient un raccourci pour #33ee77.

Code RVB en notation décimale

Le code RVB peut aussi être exprimé en notation décimale. La valeur des composantes de rouge, de vert et de bleu d'une couleur sera définie en indiquant sa proportion relative en notation entière absolue comprise entre 0 et 255, ou en pourcentage, la première valeur étant celle de la composante rouge, la seconde celle de la composante verte et la troisième, celle de la composante bleue de la couleur. Par exemple, 255 correspondant à 100% et à FF dans la notation hexadécimale (soit la valeur maximale de la composante) : rgb(255,255,255) = rgb(100%,100%,100%) = #FFF ou #FFFFFF (blanc). Et 0 correspondant à 0% et à 00 dans la notation hexadécimale (absence de la composante) : rgb(0,0,0) = rgb(0%,0%,0%) = #000 ou #000000 (noir).

Plus de 16 millions de couleurs

La combinaison des valeurs de rouge, de vert et de bleu de 0 à 255 donne plus de 16 millions de couleurs différentes (256 x 256 x 256); la plupart des ordinateurs récents sont capables d'afficher ces couleurs. La notation hexadécimale abrégée permet, quant à elle, d'obtenir 4096 couleurs différentes.

(Sélecteurs de couleurs HTML)

Les ressources à consulter

Note : À moins d'indication contraire, les liens présents ci-dessous sont des liens externes, c'est-à-dire des liens qui pointent vers des ressources extérieures au site actuel et qui ouvriront donc des sites autres que maboite.qc.ca.

Pourpre.com
Ce site propose des articles consacrés à la couleur : le phénomène physique, la perception de la couleur, la couleur dans la langue française, des questions-réponses, un glossaire, une présentation des modèles de couleurs, quelques jeux. On y trouve aussi : CHROMA, un dictionnaire de noms de couleurs, accompagné d'un dictionnaire imaginaire alimenté par les internautes; le chromograf, un ensemble d'outils en ligne pour manipuler la couleur et créer des dégradés; Chromafiltre, un outil en Flash pour aider à l'accord des couleurs; la Boîte à couleurs, un logiciel gratuit pour récupérer une couleur sur l'écran et la modifier ou la convertir facilement.
Code-couleur.com
Signification des couleurs, dictionnaire des couleurs, codes de couleurs HTML, palettes de couleurs...
Color Palette Generator
Color Palette Generator permet de créer une palette de couleurs à partir d'une image (png, gif, jpg, jpeg).
CSS Drive's Image to Colors Palette Generator
Pour obtenir une palette de couleurs basée sur les couleurs primaires d'une image prise sur le Web ou sur l'ordinateur. Possibilité de choisir une palette claire, moyenne ou foncée. Liste complète des couleurs présentes dans l'image aussi disponible.
Color Hunter
Color Hunter génère une palette de couleurs à partir d'images trouvées en entrant une étiquette (tag) ou un code hexadécimal, ou à partir d'une image du Web ou d'une image téléchargée depuis l'ordinateur.
Color Calculator
Cercle chromatique pour trouver le nuancier de couleurs parfait. Combinaisons de couleurs à partir de n'importe quelle couleur de base.
Adobe Kuler
Adobe Kuler permet de créer des thèmes de couleurs avec la roue chromatique ou en entrant des codes de couleur. Des milliers de combinaisons de couleurs de la communauté Kuler sont aussi consultables.
ColorCombos
Un outil pour tester des combinaisons de couleurs. Les échantillons peuvent être affichés sous forme de larges colonnes, ce qui permet de bien voir le résultat de l'agencement de couleurs. Des combinaisons pré-sélectionnées sont aussi disponibles.
ColorCodeHex.com
Informations sur les couleurs. Description spécifique d'une couleur et conversion automatique à sa valeur en hexadécimal, RVB, CMJN, HSL, HSV, XYZ, xyY, CIE-Lab, CIE-LCH et Hunter-Lab. Thèmes de couleurs analogues, triadiques, tétradiques, monochromatiques, complémentaires isocèles, complémentaires.
Color Schemer
Palette interactive qui affiche une gamme de couleurs complémentaires pour une couleur donnée. Format RGB et format hexadécimal affichés. Possibilité de choisir une nuance plus claire ou plus foncée.
Color-hex.com
Informations sur les couleurs, incluant les modèles RVB, HSL, HSV et CMJN, les couleurs triadiques, les couleurs monochromes et les couleurs analogues. Code CSS et exemples d'éléments HTML pour la couleur sélectionnée.
Sphere: Color Theory Visualizer
Outil en ligne pour harmoniser les couleurs, créer des thèmes de couleurs, trouver les codes hexadécimaux, simuler le daltonisme. Possibilité d'exporter dans Illustrator, Photoshop et ColRD.com.
Colour Selector ~ Library & tools ~ Limitless Innovations
Gamme d'outils permettant de sélectionner, mélanger, prévisualiser, agencer des couleurs.
HTML Color Picker et HTML Color Mixer (W3schools)
Pour obtenir des nuances plus claires ou plus foncées d'une couleur.
Pour visualiser le résultat du mélange de deux couleurs.
ColorMatch Remix
Sélecteur de couleurs qui permet de créer de nouveaux thèmes pour une interface donnée. En fonction d'une couleur choisie, l'application montre et conseille des couleurs à y associer. Possibilité de charger des thèmes de couleurs prédéfinis, d'en créer de nouveaux, d'exporter les couleurs vers Photoshop ou Illustrator.
Color schemes generator 2
Sélecteur de couleurs interactif qui permet de tester et de choisir des gammes de couleurs pour sites Web. Prend en compte le daltonisme dans le choix des couleurs.

Sélecteur de couleurs à télécharger

Color Cop

Color Cop est un sélecteur de couleurs polyvalent pour les concepteurs Web et les programmeurs. Il identifie et affiche les couleurs dans différents formats de code hexadécimal. Il suffit de faire glisser la pipette à n'importe quel endroit sur l'écran, puis de relâcher : le code de la couleur sélectionnée sera automatiquement copié dans le presse-papiers.

Un outil dont je ne pourrais me passer. Je l'utilise non seulement pour choisir et visionner les couleurs, mais aussi pour examiner les détails d'une image, vérifier les ajustements sur la page, corriger avec précision un défaut qui passerait autrement inaperçu, grâce à la loupe intégrée.

Aussi disponible en français, en version portable : colorcop_fr.zip

Color Cop et autres logiciels de sélection de couleurs sur ma boîte

Sélecteur de couleurs en ligne

Mode d'emploi :
Déplacer le curseur vertical pour choisir la couleur puis cliquer dans la grande surface de couleur pour obtenir le code correspondant en hexadécimal ou dans les formats RGB/RVB (Red, Green, Blue/Rouge, Vert, Bleu), HSV/TSV (hue, saturation, value/teinte, saturation, valeur) et CMYK/CMJN (Cyan, Magenta, Yellow, Key/Cyan, Magenta, Jaune, Noir). Entrer le code d'une couleur pour la voir ou la convertir instantanément.
La terre est bleue
  • La terre est bleue comme une orange
  • Jamais une erreur les mots ne mentent pas
  • Ils ne vous donnent plus à chanter
  • Au tour des baisers de s’entendre
  • Les fous et les amours
  • Elle sa bouche d’alliance
  • Tous les secrets tous les sourires
  • Et quels vêtements d’indulgence
  • À la croire toute nue.
  • Les guêpes fleurissent vert
  • L’aube se passe autour du cou
  • Un collier de fenêtres
  • Des ailes couvrent les feuilles
  • Tu as toutes les joies solaires
  • Tout le soleil sur la terre
  • Sur les chemins de ta beauté.
Paul Éluard
L'amour la poésie