UI-Farbpaletten: Was jede Farbe kann und was nicht
Zwölf UI-Farbpaletten mit exakten Hex-Codes, Rolle für Rolle getestet. Welche Akzente als Button und als Link taugen, welcher graue Text auf einer getönten Karte durchfällt und warum ein blasser Akzent füllt, aber nie schreibt.
Eine UI-Farbpalette ist kein Set hübscher Farben. Sie ist ein Set von Rollen, und jede Farbe kann manche Jobs und andere nicht. Hier sind zwölf Paletten, jede an einer Rolle getestet, die gern schiefgeht, mit allen Hex-Codes.
Die drei Rollen in einer UI-Palette
Die Tinte schreibt. Sie ist die Farbe jeder Textzeile, also muss sie auf der Fläche dunkel genug sein, etwa Ink Navy #141238 auf Indigo Mist #EEF0FB. Du nutzt sie auch für Links, wenn der Akzent es nicht kann.
Die Fläche trägt. Sie ist die Seite oder die Karte hinter allem anderen. Sie muss nicht weiß sein, und die Tönung, die du wählst, verändert das Verhalten jeder anderen Farbe.
Der Akzent tippt. Er ist die eine Farbe, die sagt: "Das hier tut etwas." Das klingt nach einem Job, und der nächste Abschnitt zeigt, dass es zwei sind.
Ein Akzent hat zwei Jobs
Auf einem Button muss das Label auf dem Akzent lesbar sein, und der Button muss sich von der Seite abheben. In einem Satz ist derselbe Akzent ein Link, und ein Link ist Text, also muss er auf derselben Seite lesbar sein. Beide Jobs nutzen dasselbe Farbpaar, aber der zweite hat die höhere Hürde.
Das heißt: Ein Akzent kann ein guter Button und ein schlechter Link sein. Sky und Coral sitzen genau in dieser Lücke. Indigo und Berry bestehen beides.
Indigo
Indigo #4338CA, weißes Label: besteht
Indigo als Link auf Indigo Mist #EEF0FB: besteht
Ink Navy #141238 als Link: besteht
Indigo funktioniert als Button und als Link. Eine Farbe, beide Jobs, nichts zu reparieren.
Berry
Berry #A61E4D, weißes Label: besteht
Berry als Link auf Berry Milk #FBEAF0: besteht
Deep Berry #2A0A18 als Link: besteht
Berry macht dasselbe: weißes Label auf dem Button, lesbarer Link auf der blassrosa Fläche.
Sky
Sky #248AE4, Label in Harbor Ink: besteht
Sky als Link auf Sky Wash #EAF4FC: fällt durch
Harbor Ink #021828 als Link: besteht
Sky ist ein guter Button und ein schwieriger Link. Heb es für Buttons auf und setze Links in Harbor Ink, unterstrichen.
Coral
Coral #E85446, Label in Burnt Clay: besteht
Coral als Link auf Coral Milk #FDEEEB: fällt durch
Burnt Clay #290E0A als Link: besteht
Coral hat dieselbe Spaltung. Ein Button, den man sieht, und ein Link, der in Coral Milk verschwindet.
Spare den Akzent für Buttons auf
Die Lösung ist billig. Heb Sky und Coral für Buttons auf und setze Links in der Tinte, unterstrichen. Hier derselbe Satz in beiden Varianten.
Passwort
Passwort vergessen?
✕ Sky als Link: schwer lesbar
Passwort
Passwort vergessen?
✓ Harbor Ink als Link: gut lesbar
Grauer Text auf getönten Karten
Sekundärtext ist meist deine Tinte bei etwa 65 %. Auf Weiß ist er in allen vier Paletten gut lesbar, und auf einer blassen Fläche ändert er sich kaum. Auf einer echten Tönung kann er unter die Grenze rutschen.
Teste ihn also auf der Fläche, auf der er sitzt, nicht auf Weiß. Bei starker Tönung hebst du das Grau auf 70 %, und es erholt sich.
Red Panda
Sombre Night
Red Panda
#636772 auf Sugar Milk #FAF7F0: besteht
Gleiche 65-%-Mischung #656A77 auf Weiß: besteht
Sugar Milk ist fast weiß, also ändert sich das Grau kaum. Es besteht auf der Karte und auf Weiß.
Warm Purple
English Walnut
Warm Purple
#606146 auf Oh Pistachio #BCDBA4: fällt durch
Bei 70 %, #59573F: besteht
Oh Pistachio ist eine echte Tönung. Dasselbe Grau, das auf Weiß besteht, rutscht hier unter die Grenze, und 70 % holen es zurück.
Mango
Jedi Night
Mango
#5E6C68 auf Heart of Ice #F2F5FA: besteht
Gleiche 65-%-Mischung #626F6A auf Weiß: besteht
Heart of Ice ist eine blasse, kühle Tönung, also hält das Grau stand.
Viridian
Midnight Dreams
Viridian
#535D71 auf Digital Lavender #D3CAEE: fällt durch
Bei 70 %, #495467: besteht
Digital Lavender ist stark genug getönt, um dasselbe Grau durchfallen zu lassen. Heb es auf 70 %, und die Karte ist wieder lesbar.
Ein blasser Akzent füllt, er schreibt nie
Ein blasser Akzent ist eine herrliche Füllung und eine hoffnungslose Textfarbe. Auf der eigenen Seite ist keiner dieser vier als Text lesbar. Mach dieselbe Farbe zur Füllung, und es klappt, solange du die richtigen Worte dafür wählst.
Purple Estate
Blue Horizon #72AFCC als Text auf Sunwashed Paper #F5EDCE: fällt durch
Purple Estate #58287F auf Blue Horizon: nur große Schrift
Purple Estate auf Sunwashed Paper: besteht
Das blasse Blau fällt als Text auf dem Papier durch. Als Füllung nimmt es Purple Estate, was für ein großes Datum reicht, aber nicht für kleine Schrift.
Blue Horizon
Blue Horizon #2FA4D7 als Text auf Desert Cream #F5E9D8: fällt durch
Cocoa Noir #3E2C23 auf Blue Horizon: besteht
Cocoa Noir auf Desert Cream: besteht
Das leuchtendere Blau fällt als Text auf Desert Cream ebenfalls durch. Als Füllung trägt es Cocoa Noir mühelos.
Herb Garden
Herb Garden #BCD9A2 als Text auf Sun Linen #FEFFD3: fällt durch
Red Monarch #A82323 auf Herb Garden: besteht
Red Monarch auf Sun Linen: besteht
Der blasseste der vier auf seiner Seite. Setz Red Monarch auf das Grün, und die Zahl liest sich klar.
Nordic Sky
Nordic Sky #7288AE als Text auf Manor Cream #EAE0CF: fällt durch
Weiß #FFFFFF auf Nordic Sky: nur große Schrift
Velvet Indigo #4B5694 auf Manor Cream: besteht
Nordic Sky nimmt nur Weiß, und nur für große Schrift: Zahlen ja, Kleingedrucktes nein. Der Seitentext steht in Velvet Indigo.
Prüfe also die Füllung und die Worte darauf, nicht nur die Seite. Wenn die Worte auf der Füllung nur den Kontrast für große Schrift erreichen, halte sie groß.
Alle zwölf Paletten in einer Tabelle
| Palette | Farben | Die getestete Rolle |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | Button und Link bestehen beide |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | Button und Link bestehen beide |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | Button besteht, Link fällt durch |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | Button besteht, Link fällt durch |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | Grau besteht auf der Karte |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | Grau fällt auf der Karte durch |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | Grau besteht auf der Karte |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | Grau fällt auf der Karte durch |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | Blasses Blau füllt, nur große Schrift |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | Füllung besteht mit Cocoa Noir |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | Füllung besteht mit Red Monarch |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | Füllung nimmt Weiß, nur große Schrift |
Die Zahlen, für alle, die die Wahl verteidigen müssen
Jede Paarung wurde mit der WCAG-2-Kontrastformel gegen die Fläche gemessen, auf der sie sitzt. Das ist die einzige Tabelle im Paper mit Verhältniswerten.
| Palette | Test | Verhältnis | Ergebnis |
|---|---|---|---|
| Indigo | Weißes Label / Button auf Seite / Link auf Seite | 7.90:1 / 6.96:1 / 6.96:1 | Besteht alles |
| Berry | Weißes Label / Button auf Seite / Link auf Seite | 7.21:1 / 6.22:1 / 6.22:1 | Besteht alles |
| Sky | Tinten-Label / Button auf Seite / Link auf Seite | 5.01:1 / 3.23:1 / 3.23:1 | Besteht, besteht, fällt durch |
| Coral | Tinten-Label / Button auf Seite / Link auf Seite | 4.98:1 / 3.21:1 / 3.21:1 | Besteht, besteht, fällt durch |
| Red Panda | 65-%-Grau auf der Karte / auf Weiß | 5.2:1 / 5.4:1 | Besteht beides |
| Warm Purple | 65-%-Grau auf der Karte / auf Weiß / bei 70 % | 4.1:1 / 5.0:1 / 4.8:1 | Fällt durch, besteht, besteht |
| Mango | 65-%-Grau auf der Karte / auf Weiß | 5.0:1 / 5.2:1 | Besteht beides |
| Viridian | 65-%-Grau auf der Karte / auf Weiß / bei 70 % | 4.2:1 / 5.1:1 / 4.8:1 | Fällt durch, besteht, besteht |
| Purple Estate | Blasser Akzent als Text / bester Text darauf / Tinte auf Seite | 2.05:1 / 4.31:1 / 8.83:1 | Fällt durch, große Schrift, besteht |
| Blue Horizon | Blasser Akzent als Text / bester Text darauf / Tinte auf Seite | 2.36:1 / 4.66:1 / 11.03:1 | Fällt durch, besteht, besteht |
| Herb Garden | Blasser Akzent als Text / bester Text darauf / Tinte auf Seite | 1.51:1 / 4.64:1 / 6.98:1 | Fällt durch, besteht, besteht |
| Nordic Sky | Blasser Akzent als Text / Weiß darauf / Tinte auf Seite | 2.75:1 / 3.59:1 / 5.25:1 | Fällt durch, große Schrift, besteht |
So baust du deine eigene UI-Palette
- Beginne mit Tinte und Fläche. Wähle eine dunkle Tinte und eine Fläche, getönt oder weiß, und prüfe die Tinte auf der Fläche. Harbor Ink #021828 auf Sky Wash #EAF4FC ist der einfache Fall.
- Wähle den Akzent für das Label. Entscheide, ob weißer oder dunkler Text darauf steht, und prüfe das Label auf dem Akzent.
- Teste den Akzent als Link. Setze ihn als Text auf deine Fläche. Fällt er durch, heb ihn für Buttons auf und setze Links in der Tinte.
- Teste Sekundärtext auf jeder Fläche. Mische die Tinte zu 65 % über jede Kartenfarbe. Geh auf 70 %, wo es rutscht.
- Heb blasse Farben für Füllungen auf. Wähle die Worte, die darauf stehen, bevor du dich festlegst. Unsere Papers zu UI-Farbfehlern und barrierefreiem Farbkontrast gehen tiefer auf die Schwellenwerte ein.
Hol dir die Dateien für jedes Set
Jedes Set ist ein kostenloses Farbset auf Forge, mit Tap-to-copy-Codes, Swatch-Dateien für Figma und Adobe (ASE), CSS-Variablen und Design Tokens.
Kostenloses Farbset
Ein Akzent hat zwei Jobs: Indigo, Berry, Sky, Coral
Jeder Hex-Code, dazu ASE-Swatches, CSS-Variablen und Design Tokens.
Kostenloses Farbset
Grauer Text auf getönten Karten: Red Panda, Warm Purple, Mango, Viridian
Jeder Hex-Code, dazu ASE-Swatches, CSS-Variablen und Design Tokens.
Kostenloses Farbset
Ein blasser Akzent füllt, er schreibt nie: Purple Estate, Blue Horizon, Herb Garden, Nordic Sky
Jeder Hex-Code, dazu ASE-Swatches, CSS-Variablen und Design Tokens.
FAQ
Welche Farben sollte eine UI-Farbpalette haben?
Mindestens drei Rollen: eine Tinte für Text, einen Akzent für Buttons und Links und eine Fläche für die Seite. Indigo #4338CA mit Ink Navy #141238 und Indigo Mist #EEF0FB ist ein vollständiges Beispiel.
Welche Farbe sollten Links in einer UI haben?
Den Akzent nur, wenn er als Text auf deiner Fläche besteht. Indigo tut das. Sky #248AE4 nicht, also stehen seine Links in Harbor Ink #021828, unterstrichen.
Welche Farbe sollte Sekundärtext haben?
Deine Tinte bei etwa 65 %, geprüft auf der Fläche, auf der sie sitzt. Bei einer starken Tönung wie Oh Pistachio #BCDBA4 kann sie durchfallen, und 70 % beheben das.
Warum ist grauer Text auf einer farbigen Karte schwer lesbar?
Eine getönte Karte ist dunkler als Weiß, also schrumpft der Abstand zwischen Grau und Karte. Weiß verbirgt das Problem, deshalb testest du auf der echten Fläche.
Kann ich ein Pastell als Akzentfarbe nutzen?
Als Füllung ja. Als Text nein. Herb Garden #BCD9A2 fällt als Text auf Sun Linen #FEFFD3 durch und funktioniert als Füllung mit Red Monarch #A82323 darauf.
Muss eine Button-Farbe auch als Linkfarbe funktionieren?
Sie muss, wenn du sie für beides nutzt. Ein Button muss sich von der Seite abheben und sein Label tragen. Ein Link ist Text, also braucht er auf derselben Seite eine höhere Hürde.
Quellen
- Farbnamen und Hex-Codes stammen aus den UX-Brainy-Farbsets auf Forge, Vol. 04, 08 und 12. Der Kontrast wurde mit der WCAG-2-Formel gegen die Fläche berechnet, auf der jede Farbe sitzt.
- Die Schwellenwerte für Text und Formen folgen W3C WCAG 2.2: Contrast (Minimum) und Non-text Contrast.
- Das Grau in jeder Kachel ist die Palettentinte, mit der Fläche zu 65 % gemischt, oder zu 70 %, wo angegeben. Der Hex-Code ist also aus der Palette abgeleitet.
- Zuerst veröffentlicht als drei Karussells auf UX Brainy: An accent color has two jobs, The same gray can pass on white and fail on your tinted card und Your pale accent can fill a shape.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
