Farbsystem erstellen

Farben und ihre Reproduktion in digitalen Medien

Was sind eigentlich Hex-Codes?

In digitalen Medien arbeitet man mit Hex-Codes (z. B. #FFFFFF für Weiß, #FF0000 für 100 % Rot, #000000 für Schwarz), um Farben technisch korrekt darzustellen.


Warum ist das wichtig?

  • Du kannst gezielt mit Design-Tools arbeiten (z. B. Canva, Figma, PowerPoint).
  • Nur so bleibt die Farbe exakt gleich – auf jedem Bildschirm, in jeder Grafik.
  • Schau Dir das Beispiel der FU Berlin an. Hier siehst Du, wie präzise die Farbwerte festgelegt sind: Corporate-Design-Farben

💡 Tipp: Zum Kombinieren, Speichern und Testen von Farben nutze Tools wie coolors.co oder Color Contrast Checker .

💜 Stell Dir vor, Du möchtest, dass Dein kleiner Roboter immer denselben Lila-Ton hat. Wie würdest Du ohne Hex-Codes erklären, welchen Ton Du genau meinst?

Illustration von verschiedenen Farbtönen mit den entpsrechenden Hexcodes.

Erste Schritte zum eigenen Farbsystem

  1. Nähere Dich einem Grundfarbschema. Was passt zu Deiner Zielgruppe und zu Deinem Thema? Unendlich viele Beispiele findest Du in Canva oder in anderen Vorlagenbibliotheken – oder auf Instagram und anderen Plattformen, auf denen Du unterwegs bist. Mach Dir Screenshots und nähere Dich so Schritt für Schritt Deiner Idee an.
  2. Die Hex-Codes holst Du Dir anschließend in einem Programm wie PowerPoint, Canva oder im Sharepic-Generator mit der Pipetten-Funktion – oder über die bereits oben genannten Websites. Das ist super einfach und wird im Modul „Sharepic“ im Clip „Designeinstellungen“ genau erklärt.
  3. Neutralere Farben eignen sich für Fließtext und Flächen. Suche Dir außerdem ein bis zwei passende Akzentfarben. Diese dürfen ruhig kontrastreich sein.
  4. Dokumentiere alle Farben mit ihren Hex-Codes, sodass Du jederzeit darauf zugreifen kannst. Du kannst Dir dafür auch einen sogenannten Styleguide mit Beispielen anlegen. Sieh Dir dazu auch das Modul „Corporate Design“ an.

Farbkontraste

Farbkontraste für gute Lesbarkeit sind beim Erstellen eines Farbsystems essenziell!

💡 Farben helfen – aber nur, wenn man sie lesen kann!

Hier noch ein paar wichtige Farbregeln im Gebrauch:

Regeln für Kontraste: 📜

  • Hell auf dunkel (z. B. Weiß auf Dunkelblau)
  • Dunkel auf hell (z. B. Schwarz auf Hellgelb)
  • Vermeide z. B. Hellgrau auf Weiß oder Rot auf Grün

Barrierearm gestalten: 🚀