• Home
  • Contact
  • Édito
  • Bientôt
  • Glossaire
  • Cours PDF
  • Restez informé
  • Forum

explainMe

Le graphisme et la programmation de façon simple.

  • Articles
    Commentaires
  • Dossiers

    • La couleur
    • La typographie
    • Site complet en flash
  • Catégories

    • Astuces
    • Couleurs
    • Cours théoriques
    • Divers
    • Flash
    • Flash – AS2
    • Flash – AS3
    • Non classé
    • Réflexions
    • Typographie
  • Articles les plus lus

    • Site complet en flash : part 1 (12 936)
    • Site complet en flash : part 2 (9 232)
    • Site complet en flash : part 3 (6 924)
    • La couleur dans vos créations (6 758)
    • Site complet en flash : part 4 (6 689)
  • Mots-clefs

    HTML Site ton direct équipe Flash masque colorimétrie webdesigner actionscript Réflexion sens caractères spéciaux RVB italic XML vie du blog forum tutoriel Astuce AS3 site complet perception AS2 couleurs règles typographiques Tableau associatif cercle chromatique théorie font sondage gras caractère Divers Photoshop cours Résolution police CSS symbolique CMJN Typographie gamme de couleurs
La couleur dans vos créations

La couleur dans vos créations

Le 10 juillet 2008


La couleur
  • La couleur dans vos créations
  • RVB ou CMJN ?
  • Le sens caché des couleurs

Introduction |

Ce cours est le premier d’une série de trois visant à guider le novice dans l’utilisation de la couleur dans ses créations.
Pour autant la couleur ne pouvant être résumée dans ces trois cours, ceux-ci ne représentent qu’une approche de la couleur.

Au programme de ce premier chapitre :

  • définition de la couleur
  • les caractéristiques de la couleur
  • le cercle chromatique
  • les contrastes

Définition de la couleur |

« La couleur est une impression produite sur l’œil par les diverses radiations constitutives de la lumière. »

Le spectre lumineux est en fait composé de plusieurs ondes qui, au contact de l’œil provoquent des impressions de couleurs (le tout traduit par notre cerveau bien sûr).

Évidement tout cela fait référence à de nombreuses explications physiques bien plus complètes que cette simple phrase, mais cela n’est pas l’objet du cours.


Les caractéristiques de la couleur |

Les caractéristiques de la couleur sont au nombre de trois :

teinte, saturation, luminosité
  • la teinte
  • la saturation (ou intensité)
  • la luminosité (ou valeur)

La teinte est ce qui est perçue en premier, c’est ce que l’on appelle communément « la couleur » : ma voiture est rouge, mon jean bleu,…

La saturation correspond à la pureté de la couleur ou encore son taux.
Ainsi plus vous réduisez la saturation d’une couleur (ou son intensité si vous préférez), et plus elle devient terne. Aussi, réduire la saturation d’une couleur à zéro aboutit à un gris équivalent.

La luminosité est le degré de clarté d’une couleur, c’est-à-dire que l’ajout de blanc augmente la luminosité d’une couleur alors que l’ajout de noir l’assombrit.

les couleurs primaires sont le Rouge, le Jaune, et le Bleu, le noir quand à lui n’est pas une couleur puisqu’il correspond à l’absence de lumière.


Le cercle chromatique |

Le cercle chromatique est l’outil de base pour comprendre l’harmonie des couleurs.

S’il ne fallait retenir qu’un seul exemple d’harmonisation des couleurs, je vous conseillerais de sortir de chez vous et de contempler la nature, car elle manie les couleurs depuis des milliers d’années sans jamais faire de faute de goût.

cercle chromatique Le cercle chromatique fonctionne de la manière suivante :

  • les trois couleurs primaires sont disposées chacune à 120° les unes des autres : le rouge, le jaune, et le bleu.
  • le mélange de 2 couleurs primaires (en quantité égale), forme une couleur secondaire : Le vert, le violet, et le orange
  • le mélange d’une couleur primaire et d’une couleur secondaire forme une couleur tertiaire.
  • et ainsi de suite…

Plusieurs notions sont importantes ici :

  • les couleurs complémentaires
  • les couleurs qui s’harmonisent
  • les couleurs chaudes et les couleurs froides

Les couleurs complémentaires sont les couleurs qui sont diamétralement opposées dans le cercle chromatique (ex : la couleur complémentaire du rouge est le vert).

Les couleurs qui s’harmonisent sous les couleurs voisines les unes des autres dans le cercle chromatique (ex : vert, vert-jaune, jaune, jaune-orangé, orange…).

Sur l’illustration vous pouvez noter que le cercle chromatique est « coupé » en deux zones, les couleurs chaudes d’un côté, et les couleurs froides de l’autre. Cette limite est très arbitraire car vous verrez qu’il est très difficile de dire à partir de quelle teinte un vert-jaune est chaleureux ou froid, et même chose pour le violet-rouge.

Le principe est qu’une couleur chaude a tendance à rapprocher le sujet de nous alors qu’une couleur froide aura plus tendance à l’éloigner.

Les contrastes |

Le contraste est également un concept important car il fourni un outil puissant pour la création graphique.

Il existe différent types de contrastes :

  • le contraste de couleur en soi
  • le contraste clair-obscur
  • le contraste chaud-froid
  • le contraste des complémentaires
  • le contraste de qualité
  • le contraste de quantité
  • le contraste simultané
contraste 01 Le contraste de couleur en soi est le plus simple de tous à réaliser. Il demande au moins trois couleurs de teintes très différentes. Les trois couleurs primaires forment le plus net des contrastes de couleur.
contraste 02 Le contraste clair-obscur fait appel à la valeur des couleurs (ou luminosité). Le plus évident est celui du noir et du blanc. Le jaune et le violet forment également un contraste clair-obscur, le jaune étant très lumineux à côté du violet très sombre. Il est possible d’atténuer ce contraste en utilisant des couleurs correspondantes à des valeurs de gris proches (voir illustration).
contraste 03 Le contraste chaud-froid est obtenu en associant une couleur chaude à une couleur froide. Le meilleur contraste s’obtient entre le rouge-orangé et le vert-bleu. Cependant ce contraste peut-être utilisé pour « réchauffer » une couleur, comme indiqué sur l’illustration.
contraste 04 Le contraste des complémentaires fait intervenir deux couleurs complémentaires qui, pour une même intensité, se renvoie la balle et forment une sorte d’harmonie, de part leurs forces égales.
contraste 05 Le contraste de qualité ne fait intervenir qu’une seule teinte, mais à des degrés différents de luminosité. Ainsi le jaune devient plus lumineux (certains diront « fade ») lorsque l’on lui ajoute du blanc, et devient vert (et donc plus froid) lorsque l’on y ajoute du noir.
contraste 06 Le contraste de quantité joue sur la différence de présence entre 2 couleurs contrastées. Ainsi une grande zone de violet accolée à une petite zone de jaune créé un contraste de quantité. Ce contraste est très subjectif car c’est la sensibilité de chacun qui orientera le contraste.
contraste 07 Le contraste simultané est dû à notre œil. Ce dernier, pour une couleur donnée, cherchera systématiquement sa complémentaire et la créera si besoin est. Il est d’autant plus fort que la couleur principale est lumineuse et que l’on la fixe longtemps.

Conclusion |

Nous voici arrivé à la fin de ce premier chapitre visant essentiellement à vous faire découvrir les caractéristiques de la couleur.
Je  suis sûr que vous voyez déjà quelques perspectives intéressantes se dessiner par le biais des contrastes ou encore le fait de pouvoir jouer sur l’intensité d’une couleur.

En tout les cas j’espère que ce cours vous aura si ce n’est appris des choses, du moins intéressé.

Dans le prochain article, nous ferons la distinction entre la synthèse additive (RVB) et soustractive (CMJN) et nous verrons quel mode colorimétrique utiliser en fonction du type de travail à effectuer.

Références qui ont servies à la rédaction de ce cours :
http://fr.wikipedia.org/wiki/Couleur
http://www.ac-reunion.fr/pedagogie/aa/pedago/theorie/couleur/contrast/contrast.html
« Textures & Couleurs » Owen Demers Edition CampusPress


RVB ou CMJN ?»
Wikio

Catégorie(s) : Couleurs, Cours théoriques

Article lu 6 758 fois

BofPeut faire mieuxPas malIntéressantTrès intéressant [4,14 / 5 - 7 vote(s)]

Loading ... Loading ...

Articles en rapport

  • Le sens caché des couleurs
  • RVB ou CMJN ?
  • Site complet en flash : part 7
  • Et maintenant, la suite (sondage) !
  • Site complet en flash : part 6
Haut de page

8 commentaires sur “La couleur dans vos créations”

  1. admin dit :
    12 juillet 2008 à 16:58

    N’hésitez pas à laisser un commentaire si jamais vous trouvez des erreurs, des fautes d’orthographe, ou tout simplement si vous avec des questions.

    Répondre
  2. tyberium dit :
    16 juillet 2008 à 14:42

    Bon courage pour ton blog. Jerome

    Répondre
  3. admin dit :
    16 juillet 2008 à 21:42

    Merci l’ami !

    Répondre
  4. Stellaire dit :
    24 septembre 2008 à 12:57

    Je découvre ton blog aujourd’hui et c’est le 2ème article (sur 2 lus ^^) que j’adore. La j’avoue que je n’avais rien de spécial a apprendre, mais c’est parfaitement expliqué, simple, clair et bien illustré, une référence à mes yeux.aller hop ajouté à mes flux RSS :)

    Répondre
    • admin dit :
      24 septembre 2008 à 13:37

      Merci beaucoup comme je l’ai déjà indiqué sur http://www.digg-design.fr en répondant à ton commentaire, ça fait vraiment très plaisir et c’est encourageant pour la suite. Merci à toi.

  5. Cours de chromie | PIQUESEL dit :
    25 septembre 2008 à 10:04

    [...] La couleur dans vos créations. [...]

    Répondre
  6. Hypaepa dit :
    3 octobre 2008 à 11:00

    Je suis pas trop d’accord avec le contraste par complémentairs, sur ton illustration en bas tu place le bleu comme complémentaire du violet au lieu du jaune. Sans aucun doute une coquille graphique :)

    Répondre
  7. admin dit :
    3 octobre 2008 à 18:39

    Tu as totalement raison !
    J’ai corrigé la boulette et j’en profite pour m’excuser auprès de ceux que cela aurait pu induire en erreur.

    Merci à toi de me l’avoir indiquée.

    Au passage j’en profite pour dire à tout le monde que si vous trouvez la moindre erreur (comme ici par exemple) ou faut de frappe/orthographe, n’hésitez pas à me la signaler pour que je la corrige au plus vite. Merci à vous…

    Répondre

Laisser une réponse

Cliquer ici pour annuler la réponse.

Haut de page

Derniers articles

  • Bonnes fêtes de fin d’année à tous !
    le 23 décembre 2009
  • Site complet en flash : part 7
    le 18 décembre 2009
  • Photoshop : transmission de masque
    le 4 novembre 2009
  • Et maintenant, la suite (sondage) !
    le 26 octobre 2009
  • Changement d’hébergeur
    le 21 octobre 2009

Derniers commentaires

  • bonjour et bravo... vraiment un trés bon...
    par Podi le 21 janvier 2010 | 0:05
  • Bonjour, Il faudrait voir ton code mais ...
    par admin le 15 janvier 2010 | 13:39
  • bonjour et bravo pour ce tuto superbemen...
    par gorrevod le 15 janvier 2010 | 12:08
  • Merci toi aussi !...
    par Epoc le 14 janvier 2010 | 19:51
  • Bonjour. Merci pour le compliment tout d...
    par admin le 11 janvier 2010 | 20:33

Crédits

Copyright ©2010 | explainMe
Contact | boris@explain-me.com
Design | infoTRASH
Propulsé par | WordPress

Inscription
Connexion


PageRank Actuel

pix-cration d'or  Zero awards 2009 : explainMe : Meilleur site d'enseignement