edubun
Français
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Accueil›Couleur et design

Théorie des couleurs

Chaque couleur à l'écran se décrit par trois nombres. Dans ce cours, tu construis en 3D le cube RVB et le cylindre TSL, et tu observes la place des couleurs complémentaires et triadiques sur le cercle des teintes. Tu mélanges la lumière et l'encre, puis tu calcules le rapport de contraste WCAG qui permet de savoir si un texte est lisible.

Progression

À propos de ce cours

Dans les années 1660, Isaac Newton commence à faire passer la lumière du soleil à travers des prismes de verre dans une pièce sombre. Il montre que la lumière blanche est composée d'une bande de couleurs et qu'un second prisme ne peut pas décomposer davantage ces couleurs. Dans son ouvrage Opticks de 1704, il referme cette bande en cercle, en partage le bord en sept parties selon les proportions d'une gamme musicale et place le blanc au centre. Ce dessin est l'un des premiers cercles chromatiques ; tous ceux de ce cours en descendent. Chaque couleur à l'écran correspond à trois nombres, et une rétine contient environ 6 millions de cônes appartenant à seulement trois types.

Les sept unités commencent par la vision des couleurs, puis le RVB et les codes hexadécimaux : 256 niveaux pour le rouge, le vert et le bleu donnent 16 777 216 couleurs, chacune correspondant à un point dans un cube. En 1861, à la Royal Institution, Maxwell présente un ruban écossais photographié à travers des filtres rouge, vert et bleu. Les appareils photo numériques et les écrans utilisent toujours cette méthode à trois canaux. L'unité sur la teinte, la saturation et la luminosité précise que le jaune et le bleu ont tous deux une luminosité de 50 % en HSL, alors que le jaune réfléchit presque 13 fois plus de lumière. Les couleurs complémentaires, analogues et triadiques se placent sur le cercle chromatique. Les mélanges additif et soustractif sont illustrés par Coloritto de Jacob Christoph Le Blon, vers 1722, que le Smithsonian présente comme la première description des deux principes. Le rapport de contraste montre que le gris #767676 sur blanc, à 4.54:1, respecte le minimum WCAG pour le texte courant, tandis que #777777, à 4.48:1, échoue. La dernière unité rappelle qu'environ 8 pour cent des hommes ont une déficience de la vision rouge-vert. L'atelier en 3D construit le cube RVB et le cylindre HSL.

Avant de commencer

Comparer les couleurs par leurs nombres aide quand deux échantillons se ressemblent mais se comportent différemment. Les leçons présentent RGB et les codes hexadécimaux avant HSL, les relations entre couleurs et le contraste. Distingue bien le mélange de lumière à l’écran du mélange d’encres : les mêmes noms ne donnent pas le même résultat.

À la fin du cours

Tu pourras lire des valeurs RGB et hexadécimales, régler teinte, saturation et luminosité et choisir des couleurs complémentaires, analogues ou triadiques. Tu sauras distinguer mélange additif de lumière et soustractif d’encres, vérifier le contraste du texte selon les WCAG et expliquer pourquoi la couleur seule ne suffit pas à signaler une erreur dans un formulaire.

  1. 1Comment nous voyons la couleurUne rétine contient environ 6 millions de cônes répartis en seulement trois types. Toutes les couleurs que tu as vues résultent des réponses combinées de ces trois types de cônes, qui réagissent avec des intensités différentes.
  2. 2RVB et codes hexadécimauxAvec 256 niveaux pour chacun du rouge, du vert et du bleu, un écran peut adresser 256 × 256 × 256 = 16 777 216 couleurs, et chacune est un point à l'intérieur d'un cube.
  3. 3Teinte, saturation et luminositéEn TSL, le jaune et le bleu ont tous deux une luminosité de 50 %, pourtant le jaune réfléchit près de 13 fois plus de lumière que le bleu selon la formule de luminance WCAG.
  4. 4Couleurs complémentaires, analogues et triadiquesSur la roue chromatique d'écran, le complément du bleu à 240 degrés est le jaune à 60 degrés, alors que la roue du peintre place l'orange en face du bleu.
  5. 5Mélange additif et soustractifL'encre cyan sur papier blanc absorbe la lumière rouge : le cyan et le magenta imprimés l'un sur l'autre ne laissent donc que du bleu.
  6. 6Rapport de contraste et texte lisibleLe gris #767676 sur blanc a un rapport de contraste de 4.54:1 et satisfait le minimum WCAG pour le texte courant ; un cran plus clair, #777777 donne 4.48:1 et échoue.
  7. 7Utiliser la couleur dans un designEnviron 8 % des hommes ont une déficience de la vision des couleurs rouge-vert : un formulaire qui ne marque les erreurs qu'en rouge en laisse beaucoup dans le doute.

Cours associés

  • Lire les notes · Théorie musicale
    Apprends à lire les hauteurs sur la portée : clé de sol, clé de fa, lignes supplémentaires, la portée double du piano, dièses et bémols, et les différents noms que les musiciens donnent aux mêmes notes. Chaque unité propose un quiz sur la portée ou un clavier sur lequel tu peux jouer.
  • Premiers pas au piano · Jouer d'un instrument
    Repère-toi sur le clavier, apprends le nom des touches blanches, place ta main droite et joue ta première mélodie sur le clavier ci-dessous. La souris, un écran tactile ou le clavier de ton ordinateur : tout fonctionne.
  • L'orchestre · Histoire de la musique et écoute
    Un orchestre symphonique complet peut réunir plus de 100 musiciens sur une scène. Déplace-toi sur une scène en 3D, choisis n'importe quel instrument pour entendre un son synthétisé approximatif et voir son étendue sur un clavier, puis reconstruis un air célèbre famille par famille. Sept unités couvrent l'histoire, les quatre familles d'instruments, le chef et la partition, et la façon d'écouter.
  • Le dessin en perspective · Dessin
    Tout dessin en perspective revient à tracer une image sur une vitre imaginaire placée entre ton œil et le monde. Déplace-toi dans une pièce en 3D avec un point de vue et un plan du tableau en verre. Passe d'une vue à un point de fuite à une vue à deux, puis à trois points de fuite, élève ton point de vue et observe le déplacement de l'horizon et des points de fuite.
Sources de ce cours (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Consulté le: 2026-10-17