20 Portfolio Farbpaletten: Farbkombinationen mit Hex Codes

Eine starke Portfolio-Farbpalette tut weit mehr als nur „schön“ auszusehen – sie setzt subtil Erwartungen an Ihren Geschmack, Ihr Handwerk und wie professionell Ihre Arbeiten wirken. Die richtige Mischung aus neutralen Tönen und Akzenten macht Case Studies leichter erfassbar und Calls-to-Action vertrauenswürdiger.

Unten finden Sie über 20 Portfolio-Farbschema-Ideen (mit HEX-Farbcodes), die Sie kopieren, anpassen und für Websites, Lebensläufe, Präsentationen und persönliche Marken visualisieren können.

Warum funktionieren Portfolio-Paletten so gut?

Portfolio-Designfarben leisten viel: sie schaffen Hierarchien, lenken Aufmerksamkeit und helfen Besuchern, das Wichtigste zuerst zu erkennen (Rolle, Ergebnisse, Schlüsseldesigns). Ist Ihre Palette konsistent, wirkt Ihre Arbeit auch projektübergreifend harmonischer.

Die meisten guten Portfolio-Farbkombinationen setzen bei der Basis auf neutrale Töne (damit die Inhalte lesbar bleiben) und nutzen einen gezielten Akzent für Handlungen und Highlights. So bleibt das UI ruhig und trotzdem markentypisch.

Schließlich sorgt ein verlässliches Farbschema für weniger Barrieren: sauberer Kontrast verbessert die Zugänglichkeit und wiederholte Akzentnutzung trainiert das Auge, Links, Buttons und interaktive Felder sofort zu erkennen.

20+ Portfolio Farbpalette Ideen (mit HEX-Codes)

1) Mitternachtsleinen

HEX: #0b1320 #1f2a44 #f2efe8 #c7b8a6 #b46a55

Stimmung: edel, ruhig, redaktionell

Am besten geeignet für: 2D UI Portfolio Homepage Mockup

Edel und ruhig wie Leinen im Studio-Nachtlicht: Diese Töne balancieren tiefe Tintenblau-Nuancen mit warmen, haptischen Neutraltönen. Verwenden Sie die dunklen Töne für Kopfzeilen und Navigation, und lassen Sie Leinen und Sand die Flächen und den Weißraum tragen. Terrakotta eignet sich als zurückhaltender Akzent für Buttons, Tags oder wichtige Links. Tipp: Hoher Kontrast, indem Sie #0b1320 Text auf #f2efe8 setzen, erzeugt einen klaren, druckähnlichen Effekt.

Bildbeispiel für Mitternachtsleinen, erstellt mit media.io

Media.io

Media.io ist ein Online-KI-Studio zum Erstellen und Bearbeiten von Video, Bild und Audio direkt im Browser.

Jetzt kostenlos ausprobieren

2) Studio Beton

HEX: #2b2d31 #5a6068 #d8dadd #f7f7f5 #ff6b4a

Stimmung: industriell, modern, energisch

Am besten geeignet für: Grafikdesign-Poster auf einfachem Hintergrund

Industriell und modern, diese Palette erinnert an Betonwände, sanftes Tageslicht und einen auffälligen Neonmarker. Verwenden Sie die Grautöne für Typografie-Hierarchie und Struktur, dann öffnet das warme Weiß den Negativraum. Das orange-rot wirkt als zentrales Element bei Calls-to-Action oder einer einzelnen Überschrift. Tipp: Beschränken Sie den Akzent auf ein bis zwei Formen, damit das Schema edel statt sportlich bleibt.

Bildbeispiel für Studio Beton, erstellt mit media.io

3) Galerie Salbei

HEX: #1f2f2b #3f5f55 #a6b89a #e7e4d9 #c07a4b

Stimmung: erdig, kuratiert, ruhig

Am besten geeignet für: Layout Markenidentitätsset auf einfachem Hintergrund

Erdig und kuratiert: Diese Grüntöne und warme Nuancen erinnern an eine ruhige Galerie mit Holzrahmen. Das tiefe Grün-Schwarz eignet sich für Logos und Titel, Salbei und Hafer für Hintergründe und Panels. Der Kupferton passt für Siegel, Icons oder einen einzelnen Highlight-Strich im Brandkit. Tipp: Viel #e7e4d9-Fläche mit Kupfer kombiniert wirkt besonders hochwertig.

Bildbeispiel für Galerie Salbei, erstellt mit media.io

4) Tinte und Koralle

HEX: #0d1b2a #1b263b #415a77 #e0e1dd #ff5d5d

Stimmung: selbstbewusst, klar, kontrastreich

Am besten geeignet für: 2D UI Case Study Seitenmockup

Selbstbewusst und klar: Die Tintenblau-Töne wirken wie ein scharfer Blazer, Koralle bringt einen modernen, kreativen Akzent. Verwenden Sie die dunkelste Nuance für Haupttext und Navigation, hellgrau für großzügige Abschnittsflächen. Koralle ist perfekt als Aktionsfarbe im gesamten UI, etwa für Links und Fortschrittsanzeigen. Tipp: Große dunkle Blöcke mit #415a77 auflockern, um eine schwere Seitenoptik oben zu vermeiden.

Bildbeispiel für Tinte und Koralle, erstellt mit media.io

5) Terrakotta-Nachweis

HEX: #2a1f1a #6b3f2a #c56b45 #f3e9df #2f4f4f

Stimmung: handwerklich, warm, bodenständig

Am besten geeignet für: realistische Verpackungs-Mockup im Studio

Warm und bodenständig wie Ton, Espresso und gealtertes Papier – diese Mischung passt zu handwerksorientierten Marken. Cremetöne als Verpackungsbasis, Terrakotta für Etiketten und Illustrationsdetails. Das tiefe Grünblau bietet effizienten Kontrast für Zutatenlisten oder kleine Abzeichen. Tipp: Typografie in #2a1f1a für Lesbarkeit und edle, handgemachte Wirkung.

Bildbeispiel für Terrakotta-Nachweis, erstellt mit media.io

6) Sanftes Pfirsichraster

HEX: #2b2f3a #5d6472 #f6d6c9 #f8f4f0 #d0a37f

Stimmung: freundlich, luftig, subtil

Am besten geeignet für: Event-Flyerdesign auf einfachem Hintergrund

Freundlich und luftig, diese Töne erinnern an Blush-Papier, Graphit und sanftes Studio-Licht. Fastweiß übernimmt die Hauptfläche, mit Schiefergrau für Typografie und Rasterlinien. Pfirsich und warme sandige Töne sorgen für Sympathie bei Terminen, Hinweisen oder Icons. Tipp: Pfirsich hinter Schlüsselfeldern einsetzen, um das Auge zu führen ohne zu schreien.

Bildbeispiel für Sanftes Pfirsichraster, erstellt mit media.io

7) Meerglas-Lebenslauf

HEX: #0f1f2b #1f4d5a #5ea3a3 #d9f1ef #f4fbfa

Stimmung: frisch, vertrauensvoll, gelassen

Am besten geeignet für: Redaktionelles Lebenslaufseite-Layout

Frisch und gelassen, diese Meerglas-Blautöne erinnern an Küstenlicht und klaren Wasser. Die tiefe Navy eignet sich für Überschriften und Lauftext, Teal für Abschnittstrenner und kleine Icons. Hellblau und fastweiß sorgen für Offenheit und Lesbarkeit bei langen Inhalten. Tipp: #5ea3a3 für Skillbalken oder Timelines reservieren, damit das Layout ruhig und professionell bleibt.

Bildbeispiel für Meerglas-Lebenslauf, erstellt mit media.io

8) Bronzeblaupause

HEX: #0a1a2a #17324a #2b556e #b08d57 #f2ede3

Stimmung: hochwertig, technisch, strukturiert

Am besten geeignet für: 2D UI Dashboard-Mockup

Premium und strukturiert, diese Palette wirkt wie eine Blaupause, gezeichnet mit Tinte und einem Bronzelineal auf elfenbeinfarbenem Papier. Die abgestuften Blautöne schaffen Hierarchie für Panels, Charts und Seitenleisten, ohne laut zu werden. Bronze setzt einen klaren Akzent für aktive Zustände, Schlüsselkennzahlen oder kleine Embleme in einer Portfolio-Farbpalette, die Glaubwürdigkeit ausstrahlt. Tipp: Bronze auf dunklem Hintergrund für maximalen Effekt und edle Optik.

Bildbeispiel für Bronzeblaupause, erstellt mit media.io

9) Pflaumen-Notebook

HEX: #1d1024 #40214e #7a3b74 #e4d3ea #f0b7a6

Stimmung: kreativ, stimmungsvoll, verspielt

Am besten geeignet für: Social Media Karussell-Grafik auf einfachem Hintergrund

Stimmungsvoll und verspielt – diese Pflaumentöne wirken wie ein Skizzenbuchrand voller Tinte und Pastellmarker. Verwenden Sie das dunkelste Violett für auffällige Überschriften und lassen Sie Lavendel sekundäre Panels und Untertitel sanft wirken. Der Pfirsich-Akzent eignet sich ideal für ein wiederkehrendes Element, zum Beispiel Foliennummern oder ein einfaches Icon-Set. Tipp: vermeiden Sie lange Absätze auf dem dunkelsten Violett; verwenden Sie es für kurze, pointierte Texte.

Beispielbild eines Pflaumen-Notizbuchs, erzeugt mit media.io

10) Forest Paper

HEX: #101d18 #244b3a #5f8c6d #dfe8d9 #f7f4ea

Stimmung: natürlich, beständig, erholsam

Am besten geeignet für: botanische Aquarellillustration

Natürlich und erholsam – diese Grüntöne erinnern an schattige Blätter auf handgemachtem Papier. Verwenden Sie das tiefe Waldgrün für Umrandungen und Titel, bauen Sie das mittlere Laub mit #244b3a und #5f8c6d auf. Die blassen Grüntöne und das warme Creme schaffen sanfte Hintergründe für Karten, Folien oder Illustrationsränder. Tipp: behalten Sie das dunkelste Grün für kleine Bereiche, um die luftige, botanische Stimmung zu bewahren.

Beispielbild von Forest Paper, erzeugt mit media.io

11) Cobalt Accent

HEX: #0b1020 #142a6e #2e5fff #d9e2ff #f2f4f8

Stimmung: prägnant, digital, energiegeladen

Am besten geeignet für: 2D UI Hero-Bereich Mockup

Prägnant und digital – diese Palette wirkt wie der Nachtmodus mit dem Glühen eines Laserblauen Cursors. Halten Sie die meisten Flächen in den weichen Grautönen und blassem Periwinkle für eine übersichtliche Oberfläche. Verwenden Sie Kobalt für Hauptaktionen, ausgewählte Tabs und Links, während das dunklere Navy Überschriften verankert. Tipp: probieren Sie Farbverläufe von #142a6e bis #2e5fff für ein modernes Hero-Banner ohne zusätzliche Farben.

Beispielbild von Cobalt Accent, erzeugt mit media.io

12) Sandstone Mono

HEX: #1b1b1b #4a4a4a #8a8a8a #d6d2c4 #faf7f0

Stimmung: minimalistisch, zeitlos, galerie-artig

Am besten geeignet für: Magazinlayout-Aufschlag

Minimalistisch und galerieartig wecken diese Grau- und Sandtöne Assoziationen zu Stein, Bleistiftmine und Archivpapier. Verwenden Sie Schwarz und Anthrazit für Typografie und setzen Sie auf die warmen, hellen Neutralen für Ränder und Hintergrundblöcke. Das mittlere Grau funktioniert gut für Bildunterschriften, Fußnoten und feine Linien, die den Leser führen. Tipp: bringen Sie durch Papierstruktur oder leichtes Rauschen Textur ein, statt weitere Farben hinzuzufügen.

Beispielbild von Sandstone Mono, erzeugt mit media.io

13) Cherry on Slate

HEX: #1a2433 #334155 #64748b #f1f5f9 #e11d48

Stimmung: modern, selbstbewusst, klar

Am besten geeignet für: 2D UI Produkt-Landingpage-Mockup

Modern und klar sorgen Schieferblau für einen gleichmäßigen Rhythmus, während Kirschrot einen selbstbewussten Akzent setzt. Verwenden Sie den hellen Hintergrund für Freiraum und halten Sie Schiefertöne für Navigation, Karten und dezente Rahmen. Für Farb-Kombinationsideen im Portfolio, die trotzdem professionell wirken, eignet sich Kirschrot als einzelne Aktionsfarbe für Buttons und Links am besten. Tipp: halten Sie Rot fern von langen Textblöcken und verwenden Sie es für Mikro-Interaktionen und Highlights.

Beispielbild von Cherry on Slate, erzeugt mit media.io

14) Aurora Mint

HEX: #0e1b2a #224b46 #4fd1c5 #d9fff8 #fff7e6

Stimmung: frisch, optimistisch, leuchtend

Am besten geeignet für: 2D UI Onboarding-Bildschirme

Frisch und leuchtend – Mint und tiefes Petrol wirken wie Licht, das durch Glas fällt. Verwenden Sie Navy als basierende Textfarbe und lassen Sie Mint und blasses Aqua Panels, Karten und freundliche Illustrationsformen tragen. Die warme Creme sorgt als subtile Ausgleich für einen nicht zu kühlen Interface. Tipp: behalten Sie das hellste Mint für Fortschrittsanzeigen und Erfolgszustände, um das Onboarding belohnend zu gestalten.

Beispielbild von Aurora Mint, erzeugt mit media.io

15) Mocha Canvas

HEX: #231b16 #4b342a #8c6a4a #d8c3a5 #f2efe9

Stimmung: gemütlich, handwerklich, hochwertig

Am besten geeignet für: realistischer Studio-Shot eines Produktetikett-Designs

Gemütlich und handwerklich – diese Braun- und Cremetöne erinnern an gerösteten Kaffee, Lederjournale und unbehandeltes Canvas. Verwenden Sie die dunkelsten Töne für Schrift und Logo-Marken, schaffen Sie mit den mittleren Brauntönen Wärme für Etiketten und Muster. Die hellen Neutralen halten die Komposition sauber und edel, z.B. für Verpackungen oder Lookbooks. Tipp: fügen Sie dezente Prägungen oder Folieneffekte im mittleren Braun hinzu, um Tiefe ohne neue Farbtöne zu erzeugen.

Beispielbild von Mocha Canvas, erzeugt mit media.io

16) Sunset Type

HEX: #121826 #2a2f45 #ff8a5b #ffd2a6 #fff3e9

Stimmung: warm, modern, einladend

Am besten geeignet für: Typografieposter auf schlichter Fläche

Warm und einladend – diese Töne wirken wie Abendlicht, das auf eine dunkle Studiowand fällt. Verwenden Sie das tiefblaue Indigo-Paar für markante Schrift und starke Ausrichtung, dann schichten Sie Pfirsich und Apricot für Highlights und unterstützende Formen. Das blasse Rosa hält den Hintergrund weich und gut lesbar – besonders auf großen Postern oder Folientiteln. Tipp: probieren Sie Apricot (#ffd2a6) hinter Überschriften, um sofort Hierarchie zu schaffen – ganz ohne zusätzliche Grafiken.

Beispielbild von Sunset Type, erzeugt mit media.io

17) Icy Lavender

HEX: #131a2a #2f3a5f #a3a6ff #e8e9ff #f7f7ff

Stimmung: kühl, elegant, futuristisch

Am besten geeignet für: 2D UI Einstellungsseiten-Mockup

Kühl und elegant – diese lavendelbetonte Palette wirkt wie gefrostetes Glas und frische Winterluft. Verwenden Sie das dunkelste Navy für Titel und Schalter, lassen Sie sanftes Flieder für Hintergründe und Karten. Das hellere Periwinkle eignet sich ideal für ausgewählte Zustände und Slider, ohne Neonwirkung. Tipp: Halten Sie Rahmen subtil, z.B. mit #e8e9ff, damit das UI luftig und modern bleibt.

Beispielbild von Icy Lavender, erzeugt mit media.io

18) Vintage Cyanotype

HEX: #071a2a #0b3a53 #2c7da0 #a9d6e5 #eaf4f4

Stimmung: nostalgisch, akademisch, ozeanisch

Am besten geeignet für: Redaktionelles Magazincover-Layout

Nostalgisch und ozeanisch – diese Blautöne erinnern an Cyanotypie und alte Atlanten. Verwenden Sie das tiefe Navy für Kopfzeilen und kräftige Textblöcke, halten Sie Mittelblau für Untertitel und Hervorhebungen. Die blassen Aquatöne schaffen sauberen Negativraum, der dennoch farbig wirkt, nicht reines Weiß. Tipp: Setzen Sie feine Linien und kleine Icons in #2c7da0 für einen akademisch-gestalteten Eindruck.

Beispielbild von Vintage Cyanotype, erzeugt mit media.io

19) Olive Ledger

HEX: #161c12 #3b4a2a #7c8a5b #e6e2d3 #c9a66b

Stimmung: traditionell, erdig, verlässlich

Am besten geeignet für: Studio-Mockup für Papeterie-Set

Traditionell und verlässlich – Oliv- und Kakitöne erinnern an alte Kontenbücher, Wachssiegel und abgenutzten Buchstoff. Verwenden Sie das tiefe Oliv für Logos und Überschriften, greifen Sie auf das blasse Pergament für Hintergründe und Papier zurück. Für klassische Portfolio-Farbkombis eignet sich das gedämpfte Gold als eleganter Akzent auf Linien, Icons oder Siegeln. Tipp: halten Sie das Gold klein und gleichbleibend – je ein Highlight pro Abschnitt, um den Archiv-Charakter zu erhalten.

Beispielbild von Olive Ledger, erzeugt mit media.io

20) Rose Quartz Code

HEX: #1a1f2b #3b4252 #b48ead #e5d7e9 #f6f1f5

Stimmung: sanft, clever, zeitgemäß

Am besten geeignet für: 2D UI Entwicklerportfolio-Bereich Mockup

Sanft und clever – diese Töne wirken wie dämmergraue Code-Editoren, belebt durch Rosenquarz-Licht. Verwenden Sie das Anthrazit-Paar für Codeblöcke, Navigation und Überschriften, lassen Sie die Rosa-Neutralen als Seitenhintergrund wirken. Das Mauveton eignet sich ideal für Tags, Linkzustände und subtile Datenhighlights, ohne kindlich zu wirken. Tipp: Für eine gut lesbare Portfolio-Farbpalette setzen Sie Bodytext in #1a1f2b auf #f6f1f5 und behalten Sie Akzente als einen einzigen Mauveton.

Beispielbild von Rose Quartz Code, erzeugt mit media.io

21) Clay and Cloud

HEX: #1c2230 #3d4a5c #b7c3d0 #eef2f6 #c46a5a

Stimmung: ausgewogen, professionell, zugänglich

Am besten geeignet für: 2D UI Über-uns-Seite Mockup

Ausgewogen und zugänglich – diese Mischung erinnert an stürmisches Denim mit sonnengebrannter Tonerde. Verwenden Sie die tiefen Blau-Graus für Struktur und Typografie, lassen Sie die Wolkentöne große Bereiche und Karten aufhellen. Ton macht einen freundlichen Akzent für CTAs, Timeline-Markierungen oder kleine Illustrationen. Tipp: Halten Sie Schatten dezent und nutzen Sie #b7c3d0 für Linien, damit das Layout luftig bleibt.

Beispielbild von Clay and Cloud, erzeugt mit media.io

Welche Farben passen gut zum Portfolio?

Neutrale Töne bilden das Rückgrat der meisten Portfolio-Paletten, weil sie Ihre Arbeitsproben im Vordergrund lassen. Denken Sie an Tinte/Navy, Anthrazit, warmes Off-White und weiches Grau für Layouts, in denen Lesbarkeit und Hierarchie wichtig sind.

Fügen Sie dann eine Akzentfarbe hinzu, die Interaktivität und Hervorhebungen signalisiert – Buttons, Links, Chips und wichtige Kennzahlen. Koralle, Kobalt, Mint, Bronze oder gedämpftes Gold funktionieren gut, wenn sie konsequent verwendet werden.

Wenn Ihre Projekte optisch sehr unterschiedlich sind, halten Sie Ihr Portfolio-Farbschema zurückhaltend und lassen Sie Bilder für Vielfalt sorgen. Ein solider Hintergrund plus ein einzelner Akzent wirkt meist hochwertiger als viele konkurrierende Farbtöne.

Wie verwendet man eine Portfolio-Farbpalette in echten Designs?

Beginnen Sie damit, Rollen zu vergeben, nicht nur Farben auszuwählen: eine für primären Text, eine für sekundären Text, eine für Flächen (Karten/Bereiche), eine für Linien/Trennungen und eine für Akzentaktionen. So werden Portfolio-Farbkombinationen auf mehreren Seiten wiederholbar.

Setzen Sie Kontraste gezielt für Barrierefreiheit ein: Dunkler Text auf hellen Flächen ist immer noch der einfachste Gewinn für Case Studies und Lebensläufe. Bewahren Sie gesättigte Farben für kleine UI-Momente wie aktive Tabs, Hover-Zustände und Highlights auf.

Achten Sie schließlich auf Konsistenz bei Komponenten – Buttons, Tags, Icons, Diagramme und Hervorhebungen sollten dieselbe Akzentlogik teilen, damit die gesamte Seite gestaltet und nicht dekoriert wirkt.

Erstellen Sie Portfolio-Palettenbilder mit KI

Wenn Sie einen neuen Look für Ihre persönliche Website vorschlagen (oder ein Markenkit erstellen), helfen schnelle Mockups dabei, eine Palette zu validieren, bevor Sie sich zu einem Volldesign entschließen. Ein simples Hero, eine Case Study-Seite oder ein Lebenslauf-Layout reichen meist aus, um das Gesamtgefühl zu testen.

Mit Media.io können Sie Farbideen blitzschnell in Visuals verwandeln – und dann Prompts, Komposition und Beleuchtung so lange iterieren, bis die Farben für Ihre Nische und Zielgruppe richtig wirken.

Erstellen Sie ein „Light Mode“- und ein „Dark Mode“-Konzept unter Verwendung derselben Akzentfarbe, damit Ihr Branding auf allen Geräten konsistent bleibt.

Weiter: Oxford-Blau Farbpalette