1. L'Énigme de la Couleur

1.1 Briser les idées reçues

La couleur n'est pas une propriété intrinsèque des objets, mais plutôt comment notre cerveau interprète les longueurs d'onde de lumière réfléchies. Notre perception est façonnée par :

• Le langage
• Les associations culturelles
• Notre physiologie individuelle

Question de réflexion :

"Qu'est-ce qu'une couleur pour vous ?"

1.2 Noir et Blanc : Plus que de simples "non-couleurs"

Le noir

• Définition physique : Absence de lumière visible ou absorption de toutes les longueurs d'onde
• Propriétés psychologiques : Densité, élégance, mystère
• Applications en design : Crée de la profondeur, réduit visuellement l'espace

Le blanc

• Définition physique : Présence de toutes les longueurs d'onde du spectre visible mélangées
• Propriétés psychologiques : Pureté, espace, simplicité
• Applications en design : Élargit visuellement l'espace, crée une impression d'air et de légèreté

1.3 Couleurs chaudes et froides

La distinction entre couleurs chaudes et froides provient de :

• Associations psychologiques : Rouge et orange (feu), bleu (eau, glace)
• Impact émotionnel :
  • Chaudes : Énergie, passion, dynamisme
  • Froides : Calme, sérénité, professionnalisme

1.4 Le spectre électromagnétique

La lumière visible n'est qu'une petite partie d'un spectre beaucoup plus large qui inclut :

• Ondes radio
• Micro-ondes
• Infrarouge
• Ultraviolet
• Rayons X
• Rayons gamma

2. La Symphonie des Couleurs

2.1 La Synthèse Additive : Le Monde de la Lumière

• Primaires additives : Rouge, Vert, Bleu (RVB/RGB)
• Principe : L'addition des lumières colorées tend vers le blanc
• Secondaires additives :
  • Rouge + Vert = Jaune
  • Rouge + Bleu = Magenta
  • Vert + Bleu = Cyan
• Applications : Écrans, projecteurs, éclairage LED

Expérience pratique :

Observer comment les pixels de votre écran utilisent uniquement ces trois couleurs primaires pour créer toutes les autres.

2.2 La Synthèse Soustractive : Le Monde des Pigments

• Primaires soustractives : Cyan, Magenta, Jaune (CMJ/CMY)
• Principe : Chaque pigment absorbe (soustrait) certaines longueurs d'onde de la lumière blanche
• Secondaires soustractives :
  • Cyan + Magenta = Bleu
  • Cyan + Jaune = Vert
  • Magenta + Jaune = Rouge
• Applications : Impression, peinture, encres

Pourquoi CMYK et non CMY ?

Le noir (K) est ajouté car le mélange des trois primaires donne théoriquement du noir, mais en pratique, on obtient un brun foncé. Le noir supplémentaire permet :

• Une meilleure profondeur
• Une économie d'encre
• Une meilleure définition du texte

2.3 La Perception Humaine des Couleurs

Notre vision des couleurs repose sur :

• Les photorécepteurs :

  • Cônes (3 types, sensibles à différentes longueurs d'onde)
  • Bâtonnets (sensibles à la luminosité)

• Variations individuelles :

  • Daltonisme (déficience de certains types de cônes)
  • Sensibilité accrue chez certaines personnes (tétrachromatisme)

• Différences entre espèces :

  • Les abeilles : vision dans l'ultraviolet
  • Les serpents : détection de l'infrarouge
  • Les chiens : vision dichromatique (deux types de cônes)

3. La Révolution Numérique des Couleurs

3.1 Le modèle RGB (Rouge, Vert, Bleu)

• Principe : Chaque couleur est définie par l'intensité de ses composantes R, G et B
• Plage de valeurs : De 0 à 255 pour chaque composante (8 bits par canal)
• Nombre total de couleurs : 256³ = 16,777,216 couleurs possibles

Notations en CSS :

• Hexadécimal : #RRGGBB (ex: #FF0000 pour rouge)
• Décimal : rgb(r, g, b) (ex: rgb(255, 0, 0) pour rouge)
• Avec transparence : rgba(r, g, b, a) (ex: rgba(255, 0, 0, 0.5) pour rouge semi-transparent)

3.2 Le modèle HSL (Teinte, Saturation, Luminosité)

• Teinte (Hue) : La couleur pure sur le cercle chromatique (0-360°)
• Saturation : L'intensité de la couleur (0-100%)
• Luminosité : La quantité de blanc ou noir (0-100%)

Avantages pour le design :

• Plus intuitif pour les designers
• Facilite la création de variations d'une même couleur
• Permet de préserver la teinte tout en modifiant la luminosité ou la saturation

Notation en CSS :

• hsl(h, s%, l%) (ex: hsl(0, 100%, 50%) pour rouge)
• hsla(h, s%, l%, a) (ex: hsla(0, 100%, 50%, 0.5) pour rouge semi-transparent)

4. La Couleur au Service du Design Web

4.1 Psychologie des Couleurs

4.2 Harmonie des Couleurs

Principes fondamentaux :

1. Monochromatique : Variations d'une même teinte - élégant et cohérent

2. Analogue : Couleurs adjacentes sur le cercle chromatique - harmonieux et apaisant

3. Complémentaire : Couleurs opposées sur le cercle chromatique - contraste maximal, dynamique

4. Triadique : Trois couleurs équidistantes - équilibre entre harmonie et contraste

5. Tétradique : Deux paires de complémentaires - riche et varié

La règle des 60-30-10 :

• 60% : Couleur dominante (arrière-plan, éléments majeurs)
• 30% : Couleur secondaire (sections importantes, sous-titres)
• 10% : Couleur d'accent (appels à l'action, points focaux)

Ressources complémentaires

• MDN Web Docs sur les couleurs CSS
• A Complete Guide to CSS Colors
• Color Theory for Designers
• Accessibility and Color Contrast