edubun
Deutsch
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Start›Farbe und Gestaltung

Farbenlehre

Jede Bildschirmfarbe lässt sich mit drei Zahlen beschreiben. In diesem Kurs baust du den RGB-Würfel und den HSL-Zylinder in 3D auf und siehst, wie komplementäre und triadische Farben auf dem Farbkreis liegen. Du mischst Licht und Druckfarbe und berechnest das WCAG-Kontrastverhältnis, das angibt, ob Text lesbar ist.

Fortschritt

Über diesen Kurs

In den 1660er-Jahren begann Isaac Newton, in einem abgedunkelten Raum Sonnenlicht durch Glasprismen zu schicken. Er zeigte, dass weißes Licht ein Band aus Farben ist und dass ein zweites Prisma diese Farben nicht weiter aufspalten konnte. In seinem Werk „Opticks“ von 1704 bog er das Band zu einem Kreis, teilte seinen Rand in sieben Teile im Verhältnis einer Tonleiter und setzte Weiß in die Mitte. Diese Zeichnung ist einer der ersten Farbkreise, und jedes Farbrad in diesem Kurs stammt davon ab. Jede Farbe auf einem Bildschirm besteht aus drei Zahlen, und eine Netzhaut enthält etwa 6 Millionen Zapfen von nur drei Arten.

Die sieben Einheiten beginnen damit, wie wir Farbe sehen, und gehen dann zu RGB und Hex-Codes: Je 256 Stufen für Rot, Grün und Blau ergeben 16 777 216 Farben, jede ein Punkt in einem Würfel. Maxwell zeigte 1861 an der Royal Institution ein Schottenmuster-Band, das durch rote, grüne und blaue Filter fotografiert worden war, und das Dreikanalverfahren benutzen bis heute alle Digitalkameras und Bildschirme. Bei Farbton, Sättigung und Helligkeit zeigt sich, dass Gelb und Blau in HSL beide eine Helligkeit von 50% haben, Gelb aber fast 13-mal so viel Licht reflektiert wie Blau. Komplementäre, analoge und triadische Farben werden auf dem Farbkreis eingetragen. Additive und subtraktive Mischung enthält Jacob Christoph Le Blons „Coloritto“ von etwa 1722, das die Smithsonian Institution die erste Aufzeichnung beider Ideen nennt. Beim Kontrastverhältnis besteht Grau #767676 auf Weiß mit 4.54:1 das WCAG-Minimum für Fließtext, während #777777 mit 4.48:1 durchfällt. Die letzte Einheit weist darauf hin, dass etwa 8 Prozent der Männer eine Rot-Grün-Sehschwäche haben. Das 3D-Labor baut den RGB-Würfel und den HSL-Zylinder.

Bevor du anfängst

Farben anhand ihrer Zahlen zu vergleichen hilft, wenn zwei Flächen ähnlich aussehen, sich aber unterschiedlich verhalten. Die Lektionen führen RGB und Hexcodes vor HSL, Farbbeziehungen und Kontrast ein. Achte auf den Unterschied zwischen Bildschirmlicht und Druckfarben, denn gleiche Farbnamen bedeuten nicht gleiche Mischergebnisse.

Wenn du fertig bist

Du kannst RGB- und Hexwerte lesen, Farbton, Sättigung und Helligkeit einstellen und komplementäre, analoge oder triadische Farben wählen. Du kannst additive Lichtmischung von subtraktiver Farbmischung unterscheiden, Textkontrast anhand der WCAG prüfen und erklären, warum Farbe allein nicht reicht, um einen Formularfehler zu kennzeichnen.

  1. 1Wie wir Farbe sehenEine Netzhaut enthält etwa 6 Millionen Zapfen von nur drei Arten, und jede Farbe, die du je gesehen hast, ergibt sich aus dem Verhältnis, in dem diese drei Arten reagieren.
  2. 2RGB und Hex-CodesMit 256 Stufen für jedes von Rot, Grün und Blau kann ein Bildschirm 256 × 256 × 256 = 16 777 216 Farben ansteuern, und jede davon ist ein Punkt in einem Würfel.
  3. 3Farbton, Sättigung und HelligkeitIn HSL haben Gelb und Blau beide eine Helligkeit von 50%, doch Gelb reflektiert nach der WCAG-Leuchtdichteformel fast 13-mal so viel Licht wie Blau.
  4. 4Komplementäre, analoge und triadische FarbenAuf dem Farbkreis für Bildschirmfarben ist Gelb bei 60 Grad die Komplementärfarbe von Blau bei 240 Grad. Auf dem Farbkreis der Malerei liegt dagegen Orange gegenüber von Blau.
  5. 5Additives und subtraktives MischenCyan-Druckfarbe auf weißem Papier absorbiert rotes Licht, sodass übereinander gedrucktes Cyan und Magenta nur Blau übrig lassen.
  6. 6Kontrastverhältnis und lesbarer TextGrau #767676 auf Weiß hat ein Kontrastverhältnis von 4.54:1 und besteht das WCAG-Minimum für Fließtext; einen Schritt heller ergibt #777777 4.48:1 und fällt durch.
  7. 7Farbe in einem Entwurf nutzenEtwa 8 Prozent der Männer haben eine Rot-Grün-Sehschwäche; deshalb lässt ein Formular, das Fehler nur in Rot markiert, viele von ihnen raten.

Verwandte Kurse

  • Noten lesen · Musiktheorie
    Lerne, Tonhöhen im Notensystem zu lesen: Violinschlüssel, Bassschlüssel, Hilfslinien, das Klaviersystem, Kreuze und Bs (Erhöhungen und Erniedrigungen) sowie die verschiedenen Namen, die Musiker für dieselben Töne verwenden. Jede Einheit hat ein Notensystem-Quiz oder eine Klaviatur zum Spielen.
  • Erste Schritte am Klavier · Ein Instrument spielen
    Finde dich auf der Klaviatur zurecht, lerne die Namen der weißen Tasten, setz deine rechte Hand auf und spiel deine erste Melodie auf der Tastatur unten. Maus, Touchscreen oder die Tasten deines Computers funktionieren alle.
  • Das Orchester · Musikgeschichte und Musikhören
    In einem großen Sinfonieorchester können mehr als 100 Musikerinnen und Musiker gemeinsam auf der Bühne stehen. Geh über eine 3D-Bühne und wähle ein Instrument aus: Du hörst einen synthetisch erzeugten Klang, der seinen Ton annähert, und siehst seinen Tonumfang auf einer Klaviatur. Lass dann eine berühmte Melodie erklingen, indem du nach und nach die Instrumentenfamilien hinzunimmst. Sieben Einheiten behandeln die Geschichte, die vier Instrumentenfamilien, Dirigent und Partitur sowie das bewusste Zuhören.
  • Perspektivisches Zeichnen · Zeichnen
    Jede perspektivische Zeichnung entsteht so, als würdest du ein Bild auf einer gedachten Glasscheibe zwischen deinem Auge und der Welt nachzeichnen. Gehe durch einen 3D-Raum mit einem Augenpunkt und einer gläsernen Bildebene, wechsle zwischen Ein-, Zwei- und Dreipunktperspektive, erhöhe deine Augenhöhe und beobachte, wie sich der Horizont und die Fluchtpunkte bewegen.
Quellen zu diesem Kurs (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).

Abgerufen: 2026-10-17