App Navigation UX Tokens

Route Indigo
#4f46e5
Breadcrumb Cream
#fefce8
Tab Coral
#fb7185
Drawer Mint
#6ee7b7
Hover Slate
#64748b
Page Fog
#f3f4f6
Redirect Jet
#0a0a0a

Die Palette besteht aus Halbdunkel, Licht, Dunkel-Farben. Akzentfarben Tab Coral #fb7185 und Drawer Mint #6ee7b7. Palette hat Farbtemperatur Kalt, Neutral, Warm.

Nach Helligkeit reicht diese Palette von #0A0A0A (dunkelstes) bis #F3F4F6 (hellstes). Die Helligkeitsspanne ist groß.

Die Sättigung wirkt insgesamt lebhaft (höhere Chroma).

Manche Farbton-Paare liegen nahe Komplementärpositionen — kann wie Komplementärkontrast wirken (heuristisch).

In der Gesamttemperatur neigen die Felder zur kalten Seite.

HEX-Codes (sortiert): #0A0A0A, #4F46E5, #64748B, #6EE7B7, #F3F4F6, #FB7185, #FEFCE8

Die Palette App Navigation UX Tokens enthält eine Kombination aus 7-Codefarben:

VERHEXEN: #4f46e5, RGB: (79, 70, 229); VERHEXEN: #fefce8, RGB: (254, 252, 232); VERHEXEN: #fb7185, RGB: (251, 113, 133)

VERHEXEN: #6ee7b7, RGB: (110, 231, 183); VERHEXEN: #64748b, RGB: (100, 116, 139); VERHEXEN: #f3f4f6, RGB: (243, 244, 246)

VERHEXEN: #0a0a0a, RGB: (10, 10, 10)

Vereinfachte Version der Palettenfarben

Farbton von slateblue, Farbton von ivory, Farbton von lightcoral, Farbton von aquamarine, Farbton von slategrey, Farbton von whitesmoke, Schatten von Schwarz

Farbschema wurde erstellt von colorday

Mehr Paletten mit:

Farbcodes in der Palette

App Navigation UX Tokens Farbcodes HEX, RGB-Informationen in der Tabelle

Farbe	VERHEXEN	RGB	Name	alternativer Name
#4f46e5	#4f46e5	RGB(79, 70, 229)	Route Indigo	—
#fefce8	#fefce8	RGB(254, 252, 232)	Breadcrumb Cream	—
#fb7185	#fb7185	RGB(251, 113, 133)	Tab Coral	—
#6ee7b7	#6ee7b7	RGB(110, 231, 183)	Drawer Mint	—
#64748b	#64748b	RGB(100, 116, 139)	Hover Slate	—
#f3f4f6	#f3f4f6	RGB(243, 244, 246)	Page Fog	—
#0a0a0a	#0a0a0a	RGB(10, 10, 10)	Redirect Jet	Existential Angst

Farbpalette Kontrast

6 Farbpaare haben einen niedrigen Kontrast und müssen verbessert werden, was die Lesbarkeit beeinträchtigen kann.

Tekst kleur	Achtergrond kleur	contrast ratio
#4f46e5	#64748b	1.32
#fefce8	#6ee7b7	1.47
#fefce8	#f3f4f6	1.06
#fb7185	#6ee7b7	1.76
#fb7185	#64748b	1.76
#6ee7b7	#f3f4f6	1.38

Bildpalette App Navigation UX Tokens png

--color-route-indigo:	#4f46e5;
--color-breadcrumb-cream:	#fefce8;
--color-tab-coral:	#fb7185;
--color-drawer-mint:	#6ee7b7;
--color-hover-slate:	#64748b;
--color-page-fog:	#f3f4f6;
--color-redirect-jet:	#0a0a0a;

$color-route-indigo:	#4f46e5;
$color-breadcrumb-cream:	#fefce8;
$color-tab-coral:	#fb7185;
$color-drawer-mint:	#6ee7b7;
$color-hover-slate:	#64748b;
$color-page-fog:	#f3f4f6;
$color-redirect-jet:	#0a0a0a;

@color-route-indigo:	#4f46e5;
@color-breadcrumb-cream:	#fefce8;
@color-tab-coral:	#fb7185;
@color-drawer-mint:	#6ee7b7;
@color-hover-slate:	#64748b;
@color-page-fog:	#f3f4f6;
@color-redirect-jet:	#0a0a0a;