Rot ist eine der intensivsten und auffälligsten Farben im sichtbaren Spektrum. Es wird mit Energie, Leidenschaft, Handlung und Kraft verbunden und ist daher eine häufige Wahl in Grafikdesign, Branding, Werbung und Interface-Design.
Rot ist eine der intensivsten und auffälligsten Farben im sichtbaren Spektrum. Es wird mit Energie, Leidenschaft, Handlung und Kraft verbunden.
Dank seiner starken Fähigkeit, Aufmerksamkeit zu erregen, wird Rot oft eingesetzt, um wichtige Elemente hervorzuheben, Calls-to-Action zu schaffen oder Emotionen unmittelbar zu vermitteln.
Rot wird häufig mit Konzepten wie diesen in Verbindung gebracht:
Die Bedeutung kann je nach Kultur und Kontext variieren, doch praktisch überall ist Rot eine Farbe, die sofort Aufmerksamkeit erregt.
In der Farbpsychologie gehört Rot zu den Farben, die die intensivste emotionale Reaktion auslösen.
Es kann Begeisterung, Entschlossenheit und Vertrauen vermitteln, bei hoher Sättigung aber auch Dringlichkeit oder Warnung.
Deshalb findet man es häufig in:
In digitalen Interfaces wird es meist für wichtige Aktionen, Hinweise oder Elemente reserviert, die sich vom übrigen Inhalt abheben sollen.
Rot gehört zu den am häufigsten genutzten Farben in digitalen und gedruckten Medien. Besonders häufig ist es in:
Seine Fähigkeit, Aufmerksamkeit zu fesseln, macht es zu einer ausgezeichneten Farbe, um Buttons, Aktionen und Conversion-Elemente hervorzuheben.
Rot bietet eine enorme Vielfalt an Nuancen. Zu den am häufigsten verwendeten Tönen gehören:
| Name | Muster | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| IndianRed | |||||
| LightCoral | |||||
| Salmon | |||||
| Crimson | |||||
| FireBrick | |||||
| Red | |||||
| DarkRed | |||||
| Maroon | |||||
| Tomato | |||||
| Coral |
Jeder Ton vermittelt eine andere Wirkung. Lebhafte Rottöne wirken dynamischer, während dunkle Rottöne Eleganz und Raffinesse einbringen.
HTML-FarbenObwohl Rot eine dominante Farbe ist, lässt es sich leicht mit anderen Farben kombinieren, um ausgewogene Kompositionen zu schaffen. Häufige Kombinationen sind:
#FFFFFF#111111#9CA3AF#FFFFF0#F5F5DC#001F3F#0E4D5C#556B2F#F8C8DC#D4AF37Die Wahl hängt vom gewünschten visuellen Stil ab: modern, elegant, klassisch oder auffällig.
Die Komplementärfarbe von Rot wird mit demselben Farbkreis von Matizly berechnet (Drehung um 180° in HSL). Für reines Rot (#FF0000) ergibt sich Cyan (#00FFFF). Komplementärkombinationen erzeugen einen sehr hohen Kontrast und werden daher oft genutzt, um wichtige Elemente hervorzuheben, visuelle Balance zu schaffen oder Kompositionen mit starker Wirkung zu bauen.
Die Harmonien auf dieser Seite nutzen genau dieselbe Logik wie der Farbkreis und der Palettengenerator von Matizly (HSL-Rotationen). Die am häufigsten verwendeten sind:
Kombiniert Rot mit benachbarten Farben wie Orange und Rotorange für warme, natürliche Kompositionen.
Verbindet Rot und Blaugrün für maximalen visuellen Kontrast.
Behält den Kontrast des Komplementärschemas bei, nutzt aber zwei Farben neben dem Komplementärton und wirkt dadurch ausgewogener.
Bildet eine Kombination aus drei Farben, die gleichmäßig auf dem Farbkreis verteilt sind. Sehr häufig in Illustration, Branding und kreativem Design.
Nutzt vier Farben in zwei komplementären Paaren und ermöglicht sehr vollständige Paletten für komplexe Projekte.
Die Variationen werden mit denselben Funktionen des Matizly-Studios erzeugt (Tönungen, Abstufungen und Schatten auf HSL-Basis). Die gebräuchlichsten sind:
Tönungen (mit Weiß)
Abstufungen (mit Grau)
Schatten (mit Schwarz)
Sättigungsvariationen
Chromatische Skalen
Diese Anpassungen ermöglichen es, dieselbe Farbe für verschiedene Interface-Elemente zu nutzen, ohne die visuelle Kohärenz zu verlieren.
Paletten auf Rotbasis können je nach Begleitfarben von Energie bis Eleganz reichen. Beliebte Kombinationen sind:
3 Farben
3 Farben
3 Farben
3 Farben
3 Farben
Im Webdesign empfiehlt es sich, Rot mit Neutralfarben auszubalancieren, um eine zu intensive Wirkung zu vermeiden.
FarbpalettenWenn Rot in Text oder Buttons verwendet wird, ist es wichtig, den Kontrast zum Hintergrund zu prüfen.
Die WCAG-Empfehlungen zur Barrierefreiheit helfen sicherzustellen, dass Inhalte für alle Nutzer lesbar sind – besonders bei hellen oder stark gesättigten Tönen.
Bevor eine Farbe in einem Interface eingesetzt wird, sollte das Kontrastverhältnis auf weißem und schwarzem Hintergrund geprüft werden.
Roter Text / weißer Hintergrund
4.99:1AA ✓
Weißer Text / roter Hintergrund
4.99:1AA ✓
Schwarzer Text / Korallhintergrund
7.56:1AA ✓
Roter Text / schwarzer Hintergrund
5.77:1AA ✓
Rot eignet sich dank seines reichen Farbspektrums besonders gut für Verläufe. Häufige Verläufe sind:
#FF0000 → #FF8C00#FF0000 → #FF69B4#FF0000 → #8B008B#FF0000 → #7F1D1D#FF0000 → #111111Diese Verläufe werden häufig in Hintergründen, modernen Interfaces und hervorgehobenen Elementen eingesetzt.
VerlaufsgeneratorJenseits des HEX-Codes spielt Rot in Interfaces eine konkrete Rolle. Sehen Sie, wie es in echten UI-Komponenten wirkt: Buttons, Zuständen, Formularen und Branding.
Rot steht für Energie, Leidenschaft, Kraft, Handlung und Präsenz. Je nach Kontext kann es auch Dringlichkeit, Gefahr oder Warnung ausdrücken.
Rot harmoniert besonders gut mit Weiß, Schwarz, Grau, Marineblau, Beige, Elfenbein, Olivgrün und Gold.
Die Komplementärfarbe liegt im Bereich der blaugrünen oder Cyan-Töne und erzeugt einen der stärksten Kontraste auf dem Farbkreis.
Es wird für CTA-Buttons, Aktionen, wichtige Meldungen, Fehleranzeigen, Branding und Elemente genutzt, die schnell Aufmerksamkeit erzeugen sollen.
Wähle eine Farbe und kopiere Hex, RGB, HSL oder OKLCH mit Schattierungen.
Jetzt ausprobierenEntdecke fertige Paletten und speichere Favoriten auf diesem Gerät.
Jetzt ausprobierenEntdecke Harmonien auf einem interaktiven Rad und baue ausgewogene Paletten.
Jetzt ausprobieren