accueil
bibliothèque
informatique
cuisine
divers
contact- INFORMATIQUE
- CRÉER UN SITE WEB
- METTEZ-Y DE LA COULEUR!
Couleur et site web
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 sont capables d'afficher ces couleurs.
La notation hexadécimale abrégée permet, quant à elle, d'obtenir 4096 couleurs différentes.
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.
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.
Signification des couleurs, dictionnaire des couleurs, codes de couleurs HTML, palettes de couleurs...
Un portail pour tout savoir sur les couleurs : la signification des couleurs, l'impression que donne une couleur, les couleurs primaires, le rôle des couleurs complémentaires, l'association des couleurs, etc. Liste de couleurs en ligne avec les différents codes couleurs HTML, RVB et CMJN. Nuanciers Pantone et RAL également disponibles.
Tout sur la couleur par l'experte de la couleur Jill Morton : la signification des couleurs, la couleur et le design, la couleur et le marketing, la couleur et le corps, la vision des couleurs, la couleur et la science; section pour les enfants, ressources diverses.
Color Palette Generator permet de créer une palette de couleurs à partir d'une image.
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 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.
Cercle chromatique pour trouver le nuancier de couleurs parfait. Combinaisons de couleurs à partir de n'importe quelle couleur de base.
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.
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.
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.
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.
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.
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.
Gamme d'outils permettant de sélectionner, mélanger, prévisualiser, agencer des couleurs.
Pour obtenir des nuances plus claires ou plus foncées d'une couleur.
Et pour visualiser le résultat du mélange de deux couleurs :
HTML Color Mixer
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.
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 en ligne.
Sélecteurs de couleurs à télécharger. Pour identifier et afficher les couleurs dans différents formats de code de couleur.
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