Figma-Farbkreis
Möchtest du die perfekten komplementären oder analogen Farben finden, die zu Grau passen?
Die Farbe Grau entsteht durch das Mischen von Schwarz und Weiß und hat eine rauchige, neutrale Qualität. Sie ist achromatisch, was bedeutet, dass sie technisch gesehen keine Farbe hat und daher nicht auf dem Farbkreis erscheint. Grau kann sowohl Formalität und Raffinesse vermitteln als auch in bestimmten Kontexten Gefühle von Traurigkeit oder Monotonie hervorrufen.
Grau wird durch folgende Farbwerte definiert, um Konsistenz über verschiedene digitale Plattformen und Geräte hinweg zu gewährleisten.
- HEX-Code: #898989
- RGB-Wert: 53,7 % Rot, 53,7 % Grün und 53,7 % Blau
Barrierefreiheit spielt eine entscheidende Rolle bei der Farbwahl im UX- und UI-Design. Die Figma-Community bietet Plugins an, mit denen du sicherstellen kannst, dass deine Designs den Web Content Accessibility Guidelines entsprechen.
Hier sind einige Möglichkeiten, Grau in deinen Designs zu verwenden:
- Schaffe eine minimalistische Ästhetik. Grau kann einen sauberen und modernen Look erzeugen, ideal für Interfaces, die Einfachheit und Inhalt in den Vordergrund stellen.
- Setze die Stimmung. Grau kann sowohl Raffinesse und Ernsthaftigkeit als auch Traurigkeit hervorrufen.
- Nutze es als Basis. Dieser neutrale und ausgewogene Farbton eignet sich hervorragend für Elemente wie Hintergründe und Texte, da er ein sauberes, unaufdringliches Erscheinungsbild bietet, das verschiedene Designstile und Farbpaletten unterstützt.
Bedenke, dass Farbe und ihre Bedeutung je nach Kultur und Kontext variieren können. Wenn du für ein internationales Publikum gestaltest, informiere dich über die Farbsymbolik in den jeweiligen Regionen.
Für Variationen innerhalb des gleichen rauchigen Spektrums wie Grau, ziehe folgende Farben in Betracht:
- Kühles Grau (#CBCBCB) ist eine hellere Version von Grau und verleiht eine gewisse Leichtigkeit.
- Silber (#C4C4C4) ist ein hellerer Grauton, der Eleganz hinzufügt.
- Zinn (#909EAE) ist ein grauer Farbton mit einem subtilen Blaustich.
- Schiefer (#6D8196) ist ein tieferes, kühleres Grau mit einem Hauch von Blau.
Grau ist eine neutrale Farbe, die sich gut mit fast jeder Farbe im Spektrum kombinieren lässt. Hier sind einige Ideen, um deine Kreativität zu entfachen:
- Blaugrau (#6A89A7) ergänzt die Kühle von Grau und fügt Lebendigkeit hinzu, ideal für saubere und moderne Ästhetiken.
- Gebrannte Siena (#ED7B58) fügt eine warme und erdige Note hinzu, die die Neutralität von Grau ergänzt.
- Gunmetal (#353E43) bietet Tiefe und Dimension und schafft ein anspruchsvolles und professionelles Gefühl.
- Karmesinrot (#B22222) bietet einen Energieschub, ohne die Ruhe von Grau zu überwältigen.
Weitere Farben, die du in Betracht ziehen kannst, sind Cremeweiß für einen eleganten Effekt, Aqua für einen hellen Kontrast und subtile Grüntöne, die die Neutralität von Grau ergänzen, wie Moos auf einem Stein.
Obwohl Grau neutral ist, kann es mit extrem gesättigten Farben kollidieren, wie zum Beispiel:
- Neongrün (#2CFF05) stört die Neutralität von Grau und erzeugt einen intensiven Kontrast.
- Indigo (#560591) ist eine tiefe Farbe, die Disharmonie statt Ergänzung zur kühlen Neutralität von Grau schafft.
- Rosa (#FF1D8D) kollidiert mit der Kühle von Grau und führt zu visueller Spannung.
- Gelb (#FFFF00) überwältigt mittleres Grau und erzeugt einen harten Kontrast.
Grau steht für Neutralität und Ausgewogenheit und vermittelt Unparteilichkeit und Raffinesse. Es wird häufig in professionellen Umgebungen verwendet, um Autorität und Vertrauen zu etablieren.
In der Farbpsychologie repräsentiert Grau Unparteilichkeit und wird oft mit dem Justizsystem, Fairness und der Suche nach Wahrheit in Verbindung gebracht. Hellere Grautöne rufen Ruhe und Sicherheit hervor, während dunklere Töne aufgrund ihrer fehlenden Lebendigkeit Gefühle von Trübsinn und Pessimismus hervorrufen können.
Im UI-Design kann Grau die Lesbarkeit verbessern und Professionalität vermitteln. Ein übermäßiger Einsatz von Grau kann jedoch Designs uninspiriert oder deprimierend wirken lassen. Hellere Töne eignen sich gut für Hintergründe, während dunklere Ernsthaftigkeit hinzufügen können. Verwende dunkle Grautöne sparsam, um ein langweiliges Benutzererlebnis zu vermeiden.
Das Wort „Grau“ stammt aus den germanischen Sprachen, insbesondere aus dem Altenglischen „græg“, was „dämmern“ oder „hell werden“ bedeutet. Die erste dokumentierte Verwendung von „Grau“ im Englischen geht auf etwa 700 n. Chr. zurück.
Grau war ein fester Bestandteil der Mode, von den einfachen Tuniken der Bauern bis zu den eleganten Kleidern des Adels. Künstler nutzten es für Schattierungen und die Darstellung der Natur, während Architekten graue Steine und Ziegel in Gebäuden verschiedener Epochen integrierten. Auch in Schmuckstücken erscheinen Perlen und Edelsteine in verschiedenen Grautönen.
Heute spiegelt Grau moderne Effizienz und Innovation wider und vermittelt gleichzeitig Professionalität, Raffinesse und Luxus. Hellere Grautöne sind weiterhin beliebt für ihre minimalistische Ästhetik, während dunklere Töne ein urbanes Lebensgefühl hervorrufen können.
Farbvarianten
Schattierungen
Tönungen
Töne
Farbtöne
Farbharmonien
Komplementär
Gespalten
Monochromatisch
Analog
Triadisch
Quadratisch
Eigene Paletten
Graustufen
Scharfe Kante
Grau ist wichtig
Kontrastprüfer
Kontrast 3,5
- Großer Text
#898989
- Normaler Text
Dein Design, deine Ausrichtung und dein Aufbau zählen. Figma ist für dich da.
| Kategorie | ||
|---|---|---|
Fehlgeschlagen | Fehlgeschlagen | |
Bestanden | Fehlgeschlagen | |
Bestanden | Fehlgeschlagen |
Kontrast 6
- Großer Text
#898989
- Normaler Text
Dein Design, deine Ausrichtung und dein Aufbau zählen. Figma ist für dich da.
| Kategorie | ||
|---|---|---|
Bestanden | Fehlgeschlagen | |
Bestanden | Bestanden | |
Bestanden | Bestanden |
Farbsimulationen
Protanopie
Deuteranopie
Tritanopie
Achromatopsie
Die hexadezimale Farbe #898989, bekannt als Grau, hat die RGB-Werte R:137, G:137, B:137 und die CMYK-Werte C:0, M:0, Y:0, K:46.
| VALUE | CSS | |
|---|---|---|
| HEX | #898989 | #898989 |
| RGB DECIMAL | 137, 137, 137 | RGB(137,137,137) |
| RGB PERCENTAGE | 53.7, 53.7, 53.7 | RGB(53.7%,53.7%,53.7%) |
| CMYK | 0, 0, 0, 46 | |
| HSL | HSL(0.0, 0.0%, 53.7%) | HSL(0.0, 0.0%, 53.7%) |
| HSV (OR HSB) | 0.0°, 0.0, 53.7 | |
| WEB SAFE | #153153153 | #153153153 |
| BINARY | 10001001, 10001001, 10001001 | |
| iOS - SwiftUI | Color(red: 0.537, green: 0.537, blue: 0.537) | |
| iOS - UIKit | UIColor(red: 0.537, green: 0.537, blue: 0.537, alpha: 1) | |
| Android - Compose | Color(0xFF898989) |
