Illustration & Design · Ein Begriff aus dem MediaPedia-Lexikon von mattostudios

Das HSB-Farbmodell ist ein Werkzeug, mit dem Farben so beschrieben werden, wie wir Menschen sie wahrnehmen. Es wird in vielen Grafikprogrammen, in der Videoproduktion und im Online Marketing eingesetzt, um Farben gezielt auszuwählen, anzupassen und aufeinander abzustimmen. HSB steht für Hue, Saturation und Brightness. Auf Deutsch spricht man von Farbton, Sättigung und Helligkeit. Gerade für Marketing-Verantwortliche ohne Designausbildung ist das HSB-Farbmodell hilfreich, weil es Farben in einfach verständliche Regler aufteilt, statt mit komplizierten Zahlenkolonnen wie beim RGB- oder Hex-System zu arbeiten.

Grundprinzip des HSB-Farbmodells

Das HSB-Farbmodell beschreibt jede Farbe mit drei Werten. Diese drei Werte lassen sich in den meisten Design- und Videoschnittprogrammen direkt über Schieberegler oder Eingabefelder steuern. Das macht es leicht, Farben zu vergleichen, zu variieren und gezielt anzupassen.

Hue: Der Farbton

Hue steht für den Farbton, also die eigentliche Farbrichtung. Typische Farbtöne sind Rot, Orange, Gelb, Grün, Blau oder Violett. Im HSB-Farbmodell wird der Farbton meist als Gradzahl auf einem Farbkreis angegeben, von 0 bis 360 Grad. Dabei sind zum Beispiel:

  • 0 Grad: ein Rotton
  • 120 Grad: ein Grünton
  • 240 Grad: ein Blauton

Programme zeigen den Farbton häufig in einem runden Farbrad an. Wenn Sie im HSB-Farbmodell den Regler für Hue verschieben, wandern Sie praktisch einmal um dieses Rad herum. Für Marketing und Videoproduktion bedeutet das: Sie können sehr gezielt entscheiden, ob Ihre Marke eher warm mit Rot- und Orangetönen oder eher kühl mit Blau- und Grüntönen wirken soll.

Saturation: Die Sättigung

Saturation beschreibt, wie intensiv oder kräftig eine Farbe ist. Im HSB-Farbmodell wird Sättigung in Prozent angegeben. Bei 0 Prozent ist die Farbe komplett entsättigt und wirkt grau. Bei 100 Prozent ist sie maximal kräftig und leuchtend. Eine Farbe mit hoher Sättigung fällt stärker auf und wirkt lebendiger. Eine Farbe mit niedriger Sättigung wirkt ruhiger, seriöser und dezenter.

Für Marketing-Verantwortliche ist dieser Regler besonders spannend. Mit der Sättigung können Sie steuern, wie laut oder leise Ihre Farbwelt erscheint. Ein stark gesättigtes Rot in einem Call-to-Action Button lenkt die Aufmerksamkeit sehr direkt auf die gewünschte Aktion. Ein leicht entsättigtes Blau in einem Hintergrund vermittelt dagegen Ruhe und Verlässlichkeit, ohne zu dominant zu wirken.

Brightness: Die Helligkeit

Brightness steht für die Helligkeit einer Farbe. Sie wird im HSB-Farbmodell ebenfalls in Prozent angegeben. Bei 0 Prozent ist die Farbe komplett schwarz, bei 100 Prozent maximal hell. Die Helligkeit beeinflusst, wie gut sich Elemente voneinander abheben und wie gut Texte lesbar sind. Ein helles Gelb auf weißem Hintergrund ist zum Beispiel schlecht lesbar, während ein dunkleres Gelb auf einem dunklen Hintergrund kaum noch als Gelb zu erkennen ist.

In der Praxis bedeutet das: Wenn Sie im HSB-Farbmodell arbeiten, können Sie mit dem Helligkeitsregler sehr schnell testen, wie Ihr Logo, Ihre Typografie oder Ihre Grafikelemente auf hellen und dunklen Hintergründen funktionieren. Besonders in Erklärvideos und Animationen ist dieser Aspekt wichtig, weil Bildinhalte oft schnell wechseln und Kontraste klar erkennbar sein müssen.

Warum das HSB-Farbmodell für Marketing und Videoproduktion so hilfreich ist

Das HSB-Farbmodell ist nicht nur ein technisches Konzept, sondern ein praktisches Werkzeug, das den Alltag von Marketing-Teams, Illustratorinnen und Videoproduzenten erleichtert. Es übersetzt Farbentscheidungen in leicht verständliche Stellschrauben.

Natürliche Denkweise statt technischer Codes

Viele Marketing-Verantwortliche kennen Farben vor allem über Begriffe wie Corporate-Farbe, Markenblau oder Akzentrot. Technische Angaben wie Hex-Codes oder RGB-Werte wirken dagegen abstrakt. Das HSB-Farbmodell schließt diese Lücke, weil es an die menschliche Wahrnehmung anknüpft.

Hue beschreibt, welche Farbe wir sehen, Saturation wie kräftig sie wirkt und Brightness wie hell oder dunkel sie erscheint.

Mit dieser Aufteilung lässt sich eine Farbe intuitiv anpassen. Wenn ein Rot zu aggressiv wirkt, reduzieren Sie die Sättigung oder erhöhen die Helligkeit. Wenn ein Blau zu kühl wirkt, verschieben Sie den Farbton ein wenig in Richtung Grün oder Violett. Das HSB-Farbmodell macht diese Anpassungen transparent und nachvollziehbar.

Praxisbeispiel: Farbanpassung im Erklärvideo

Stellen Sie sich vor, Sie lassen ein Erklärvideo produzieren, das einen neuen digitalen Service erklärt. Die Agentur arbeitet mit Ihrem Markenblau, doch im Video wirkt dieses Blau auf dunklem Hintergrund zu hart und technisch. Im HSB-Farbmodell können Sie gemeinsam mit der Agentur gezielt nachjustieren:

  • Der Farbton Hue bleibt nahezu gleich, damit die Wiedererkennbarkeit Ihrer Marke erhalten bleibt.
  • Die Sättigung wird leicht reduziert, damit das Blau weicher und zugänglicher wirkt.
  • Die Helligkeit wird etwas erhöht, damit das Blau sich besser vom dunklen Hintergrund abhebt.

Das Ergebnis ist eine Farbe, die weiterhin eindeutig zu Ihrer Marke gehört, aber im Bewegtbild sympathischer und leichter wirkt. Ohne das HSB-Farbmodell wäre diese Anpassung deutlich schwieriger zu erklären und nachzuvollziehen.

Praxisbeispiel: Landingpage und Social Media

Auch im Online Marketing zeigt das HSB-Farbmodell seine Stärken. Nehmen wir an, Sie gestalten eine neue Landingpage mit mehreren Call-to-Action Buttons, einem Hero-Element und verschiedenen Illustrationen. Sie möchten, dass die Buttons auffallen, aber nicht aggressiv wirken, und dass die Illustrationen zur restlichen Seite passen.

  • Für Buttons wählen Sie einen Farbton, der zur Marke passt, erhöhen die Sättigung für mehr Aufmerksamkeit und justieren die Helligkeit so, dass der Button sich klar vom Hintergrund abhebt.
  • Für Illustrationen im Hintergrund reduzieren Sie die Sättigung und die Helligkeit etwas, damit sie sich optisch zurücknehmen und den Fokus nicht vom Button ablenken.
  • Für Überschriften wählen Sie eine Farbe mit mittlerer Sättigung, die zuverlässig lesbar ist und dennoch einen klaren Bezug zur Marke hat.

All diese Entscheidungen lassen sich im HSB-Farbmodell schnell testen, vergleichen und feinjustieren, ohne dass Sie tief in Farbtheorie oder Programmiertechnik einsteigen müssen.

HSB-Farbmodell im Zusammenspiel mit anderen Farbmodellen

In der Praxis arbeiten Designer und Videoproduzentinnen mit mehreren Farbsystemen gleichzeitig. Das HSB-Farbmodell ist dabei eine Art Komfortschicht, die auf anderen Modellen aufsetzt.

HSB und RGB im digitalen Umfeld

Auf Bildschirmen werden Farben technisch als RGB dargestellt. RGB steht für Rot, Grün und Blau. Jede Bildschirmfarbe ist eine Mischung aus diesen drei Lichtfarben. Das HSB-Farbmodell ist eng mit RGB verbunden, denn die meisten Programme berechnen HSB Werte aus den vorhandenen RGB Werten. Für Marketing-Verantwortliche ist es jedoch oft einfacher, im HSB-Farbmodell zu denken und die Programme die Umrechnung übernehmen zu lassen.

Wenn Sie etwa ein Markenblau mit einem bestimmten RGB Wert haben, können Sie es in einem Grafikprogramm in das HSB-Farbmodell umwandeln. So sehen Sie, welcher Farbton, welche Sättigung und welche Helligkeit Ihrem Markenblau entsprechen. Auf dieser Basis lassen sich Varianten bilden, etwa ein helleres Blau für Hintergründe oder ein kräftigeres Blau für Akzente, ohne die Markenidentität zu verwässern.

HSB und CMYK im Print

Für Druckprodukte wie Flyer, Poster oder Broschüren wird meist das CMYK Modell genutzt. Es beschreibt Farben über die Druckfarben Cyan, Magenta, Yellow und Key, also Schwarz. Das HSB-Farbmodell ist hier zwar nicht direkt beteiligt, kann aber als Brücke dienen. Designer entwickeln oft zunächst eine Farbwelt im HSB-Farbmodell, weil sie dort schneller und intuitiver Varianten testen können. Anschließend werden die gewählten Farben in CMYK Werte umgerechnet, um sie druckbar zu machen.

Für Marketing-Verantwortliche bedeutet das: Wenn Sie mit einer Agentur über Farben sprechen, können Sie sich auf Begriffe wie Farbton, Sättigung und Helligkeit stützen und die technischen Umrechnungen den Fachleuten überlassen. Das HSB-Farbmodell ist damit eine gemeinsame Sprache zwischen Fachabteilungen und Kreativteams.

Anwendung des HSB-Farbmodells in Erklärvideos und Animationen

Gerade in Erklärvideos, Motion Graphics und animierten Social Media Clips spielt Farbe eine zentrale Rolle. Sie lenkt den Blick, ordnet Inhalte und transportiert Markenwerte. Das HSB-Farbmodell hilft dabei, diese Aufgaben gezielt zu erfüllen.

Lesbarkeit und Kontrast

In animierten Erklärvideos wechseln Szenen oft schnell. Texte, Icons und Grafiken erscheinen und verschwinden, während Sprecherstimmen Inhalte erklären. Damit Zuschauerinnen und Zuschauer folgen können, müssen Kontraste klar und stabil sein. Das HSB-Farbmodell unterstützt dabei, weil Sie Helligkeit und Sättigung bewusst steuern können.

  • Texte sollten sich mit einer deutlich anderen Helligkeit als der Hintergrund abheben.
  • Wichtige Elemente können eine höhere Sättigung erhalten, damit sie sofort ins Auge fallen.
  • Hintergründe können leicht entsättigt werden, damit sie nicht mit den Hauptelementen konkurrieren.

In der Praxis bedeutet das zum Beispiel: Wenn Ihr Hintergrund ein mittleres Blau mit mittlerer Helligkeit ist, wählen Sie für Texte ein sehr helles oder sehr dunkles Grau oder Weiß mit geringer Sättigung. So bleibt die Lesbarkeit auch auf kleinen Displays oder bei schwacher Internetqualität erhalten.

Markenkonsistenz über verschiedene Kanäle

Ein weiterer Vorteil des HSB-Farbmodells liegt in der Konsistenz. Markenfarben sollen in Erklärvideos, Social Media Posts, auf Landingpages und in Präsentationen möglichst einheitlich wirken. Gleichzeitig müssen sie sich an verschiedene Hintergründe und Formate anpassen. Das HSB-Farbmodell erlaubt es, systematisch Varianten einer Markenfarbe abzuleiten, ohne die Wiedererkennbarkeit zu verlieren.

Ein typischer Ansatz ist es, einen Grundfarbton festzulegen und dann verschiedene Kombinationen aus Sättigung und Helligkeit zu definieren. So entsteht eine kleine Farbpalette, die in allen Medien genutzt werden kann. Zum Beispiel:

  • Markenblau 1 Hue gleich, Sättigung hoch, Helligkeit mittel für Buttons und wichtige Highlights
  • Markenblau 2 Hue gleich, Sättigung mittel, Helligkeit hoch für Hintergründe in Erklärvideos
  • Markenblau 3 Hue gleich, Sättigung niedrig, Helligkeit niedrig für dezente Flächen und Rahmen

Alle drei Farben gehören sichtbar zusammen, lassen sich aber gezielt für unterschiedliche Zwecke einsetzen. Das HSB-Farbmodell macht diese Systematik klar erkennbar und einfach umsetzbar.

Typische Fragestellungen aus dem Marketingalltag

Im Alltag von Marketing-Verantwortlichen tauchen immer wieder ähnliche Fragen auf, bei denen das HSB-Farbmodell konkrete Unterstützung bietet.

Wie mache ich eine Farbe freundlicher oder seriöser?

Wenn eine Farbe zu aggressiv, zu kühl oder zu verspielt wirkt, können Sie im HSB-Farbmodell gezielt eingreifen:

  • Wirkt eine Farbe zu aggressiv, reduzieren Sie die Sättigung oder erhöhen die Helligkeit.
  • Wirkt eine Farbe zu blass, erhöhen Sie die Sättigung, lassen aber die Helligkeit unverändert.
  • Wirkt eine Farbe zu kühl, verschieben Sie den Farbton leicht in Richtung Rot oder Gelb.
  • Wirkt eine Farbe zu warm, verschieben Sie den Farbton in Richtung Blau oder Grün.

Mit diesen Anpassungen können Sie das emotionale Profil einer Farbe fein steuern, ohne die Zugehörigkeit zur Marke zu verlieren. Das HSB-Farbmodell macht diese Entscheidungen transparent und nachvollziehbar.

Wie setze ich Akzentfarben gezielt ein?

Akzentfarben sind wichtig, um Handlungsaufforderungen, wichtige Informationen oder zentrale Szenen in Erklärvideos hervorzuheben. Das HSB-Farbmodell hilft, Akzentfarben so zu wählen, dass sie auffallen, aber nicht störend wirken.

  • Wählen Sie einen Farbton, der sich deutlich vom Grundfarbton unterscheidet.
  • Erhöhen Sie die Sättigung deutlich, damit die Akzentfarbe leuchtet.
  • Passen Sie die Helligkeit so an, dass die Akzentfarbe auch auf unterschiedlichen Hintergründen gut sichtbar bleibt.

In einem Video mit überwiegend blauen Tönen kann ein kräftiges Orange mit hoher Sättigung und mittlerer Helligkeit als Call-to-Action Farbe dienen. Im HSB-Farbmodell lässt sich diese Akzentfarbe leicht definieren und in allen Medien wiederverwenden.

Wie behalte ich den Überblick über meine Farbwelt?

Gerade wenn mehrere Agenturen, Freelancer und interne Teams an einem Markenauftritt arbeiten, kann es schnell zu leichten Abweichungen in den Farben kommen. Das HSB-Farbmodell ermöglicht es, klare Vorgaben zu machen, die über Hex- oder RGB Codes hinausgehen.

Sie können zum Beispiel ein kleines Farbmanual erstellen, in dem zu jeder Markenfarbe die Werte für Hue, Sättigung und Helligkeit festgehalten sind. So ist eindeutig beschrieben, wie sich die Farbe zusammensetzt, und andere Farben können gezielt auf dieser Basis entwickelt werden. Das HSB-Farbmodell dient hier als verbindender Rahmen, der kreative Freiheit ermöglicht und gleichzeitig die Markenidentität schützt.

Fazit

Das HSB-Farbmodell ist ein praxisnahes Werkzeug, das Farben so beschreibt, wie wir sie tatsächlich erleben. Es teilt jede Farbe in die drei verständlichen Dimensionen Farbton, Sättigung und Helligkeit auf. Für Marketing-Verantwortliche, die mit Erklärvideos, Animationen, Illustrationen und Online Kampagnen arbeiten, bietet das HSB-Farbmodell eine einfache Möglichkeit, Farben gezielt zu steuern, ohne tief in technische Details einsteigen zu müssen. Es hilft, Markenfarben konsistent zu halten, Varianten systematisch zu entwickeln und die Wirkung von Farben bewusst einzusetzen. Ob bei der Gestaltung einer Landingpage, bei der Farbabstimmung eines Erklärvideos oder bei der Entwicklung einer Social Media Kampagne, das HSB-Farbmodell schafft eine gemeinsame Sprache zwischen Marketing, Design und Videoproduktion. Dadurch werden Farbentscheidungen transparenter, nachvollziehbarer und letztlich wirkungsvoller, weil sie nicht nur auf Bauchgefühl beruhen, sondern auf einer klaren, leicht verständlichen Systematik, die sich direkt im Arbeitsalltag anwenden lässt.

Häufige Fragen zu „HSB-Farbmodell"

Das HSB-Farbmodell beschreibt Farben über drei Werte: Farbton, Sättigung und Helligkeit. Es ist eine Art Farbsprache, die näher an der menschlichen Wahrnehmung ist als viele technische Modelle. Dadurch können auch Einsteiger Farben leichter verstehen und gezielt anpassen.

Im Marketing hilft das HSB-Farbmodell, Markenfarben konsistent zu halten und gezielt Stimmungen zu erzeugen. Sie können zum Beispiel den Farbton gleich lassen, aber Sättigung und Helligkeit variieren, um Serien von Social Media Posts, Thumbnails oder Erklärvideos einheitlich zu gestalten. So wirkt Ihr Auftritt professioneller und wiedererkennbar.

Der Farbton steht für die eigentliche Farbe, also etwa Rot, Blau oder Grün, und wird meist in Grad angegeben. Die Sättigung zeigt, wie intensiv oder wie grau eine Farbe wirkt. Die Helligkeit gibt an, wie hell oder dunkel eine Farbe ist, also ob sie eher wie ein Pastellton oder sehr kräftig erscheint.

In vielen Designprogrammen können Sie Farben direkt im HSB-Modus einstellen, indem Sie die drei Werte für Farbton, Sättigung und Helligkeit auswählen. So lassen sich etwa schnell hellere Varianten Ihrer Markenfarbe für Hintergründe oder weniger gesättigte Töne für Textfelder erzeugen. Das macht es einfacher, ein harmonisches Farbsystem für Videos, Animationen und Grafiken aufzubauen.

Mehr als Theorie: Wir produzieren Ihr Erklärvideo

Seit über 25 Jahren produziert mattostudios Erklärvideos, Animationen und Illustrationen für Wirtschaft und Politik – aus Stuttgart, München und Villingen-Schwenningen.

Jetzt Kontakt aufnehmen Referenzen ansehen