Farbschemata für Websites: 40 Paletten auf echten Seitenlayouts

Ein gutes Farbschema für eine Website nutzt einen ruhigen Hintergrund für den Großteil der Seite, eine dunkle Textfarbe mit mindestens 4.5:1 Kontrast und einen Markenakzent nur für Buttons und Links. Hier findest du 40 eigene Schemata auf echten Seitenlayouts, jeweils mit Dark Mode, Kontrastwerten und kopierbarem CSS- und Tailwind-Code.

Unten findest du 40 Farbschemata, die wir für diese Seite erstellt haben. Jedes ist auf eine kleine Landingpage mit Hero, Button und Preiskarte angewendet, damit du es so beurteilen kannst, wie Besucher es sehen, statt als Reihe von Farbfeldern. Jedes Schema hat eine helle und eine dunkle Version, gemessene Kontrastverhältnisse und zwei kopierfertige Formate: einfache CSS-Variablen und ein Tailwind CSS v4 @theme-Block, dazu ein Hinweis, wie du daraus Design Tokens machst.

So nutzt du diese Sammlung

So wählst du ein Farbschema für deine Website

1. Starte bei der Markenfarbe, nicht bei einer Palette

Wenn das Unternehmen schon eine Logofarbe hat, ist das der Akzent. Baue alles andere darum herum: einen Hintergrund, eine Textfarbe, eine hellere Fläche für Karten, eine gedämpfte Textfarbe für Nebenzeilen und eine Textfarbe, die auf dem Akzent steht. Wer zuerst eine hübsche Palette wählt und das Logo dann hineinzwängt, landet bei zwei konkurrierenden Blautönen.

Gibt es noch keine Markenfarbe, wähle sie danach, was Besucher als Erstes fühlen sollen. Tiefe Blau- und Grüntöne wirken sorgfältig und etabliert, warme Rot- und Orangetöne energisch und appetitlich, gedämpfte Erdtöne natürlich und ruhig. Das sind Konventionen, keine Regeln; ein Installateur in Petrol kann gerade deshalb auffallen, weil die ganze Konkurrenz blau ist.

2. Nutze die 60-30-10-Aufteilung als Ausgangspunkt

Die 60-30-10-Regel stammt aus der Innenarchitektur: Etwa 60 Prozent eines Raums sind die dominante Farbe, 30 Prozent eine Sekundärfarbe und 10 Prozent ein Akzent. Auf eine Website übertragen sieht das so aus:

AnteilRolle auf einer WebseiteVariable in diesen Schemata
Etwa 60%Seitenhintergrund und große leere Flächen--bg
Etwa 30%Text, Karten, Panels, der Footer, Rahmen--text, --surface, --muted
Etwa 10%Buttons, Links, aktive Zustände, ein Highlight pro Bildschirm--accent, --on-accent

Es geht um Zurückhaltung beim Akzent. Wenn alles in der Akzentfarbe ist, ist nichts ein Call to Action. Sieh die Zahlen als Kontrolle, nicht als Messung: Wenn du die Augen zusammenkneifst und der Akzent ein Viertel des Bildschirms bedeckt, ist es zu viel.

3. Prüfe den Kontrast, bevor du dich verliebst

Die Web Content Accessibility Guidelines (WCAG 2.2) legen die Kontrastschwellen fest, die die meisten Barrierefreiheitsgesetze und Audits verwenden:

WasMinimum (AA)Erweitert (AAA)WCAG-Kriterium
Fließtext4.5:17:11.4.3 und 1.4.6
Großer Text (mindestens 18pt oder 14pt fett)3:14.5:11.4.3 und 1.4.6
Buttons, Rahmen von Eingabefeldern, bedeutungstragende Icons3:1 gegenüber ihrer UmgebungKeine AAA-Stufe1.4.11

Jedes Schema auf dieser Seite erreicht 4.5:1 für Fließtext, für gedämpften Text und für die Button-Beschriftung auf dem Akzent, in der hellen wie in der dunklen Version. Die Regel für Button-Beschriftungen ist strenger, als WCAG es für große, fette Beschriftungen verlangt, aber Button-Text ist oft klein, deshalb haben wir dieselbe Messlatte wie für Fließtext angelegt.

Die Verhältnisse wurden mit der WCAG-Formel für relative Leuchtdichte berechnet, nicht nach Augenmaß geschätzt. Wenn du einen Hex-Wert änderst, prüfe ihn erneut mit dem Farbkontrast-Checker. Dies ist dieselbe Berechnung in JavaScript:

// WCAG 2.x contrast ratio between two hex colors
function luminance(hex) {
  const [r, g, b] = [0, 2, 4].map((i) => {
    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

contrast("#141a2e", "#f7f8fc"); // 16.26, AAA

4. Gestalte die dunkle Version bewusst

Eine helle Palette einfach umzukehren funktioniert selten. Die dunklen Versionen hier folgen vier Gewohnheiten:

5. Teste es an einem echten Layout

Farben, die als Farbfelder ausgewogen wirken, können auf einer ganzen Seite schwer wirken, deshalb zeigen wir jedes Schema unten auf einem Hero und einer Preiskarte. Bevor du dich festlegst, setze dein Schema auf deine eigene Startseite, sieh es dir draußen auf dem Handy an und prüfe, ob dein Blick zuerst auf den Haupt-Button fällt.

Alle 40 Schemata auf einen Blick

Die Kontrastspalten zeigen hell / dunkel. Klicke auf einen Namen, um zur Vorschau zu springen.

SchemaGruppeAkzentTextkontrastButton-Kontrast
Midnight LaunchSaaS und Tech#3b4fe016.3 / 16.06.2 / 4.6
Signal MintSaaS und Tech#0e7c6615.4 / 15.75.1 / 11.5
Graphite VoltSaaS und Tech#c43d1616.2 / 15.95.2 / 6.2
Cloud IrisSaaS und Tech#6a3fd115.8 / 16.16.5 / 4.7
Dev ConsoleSaaS und Tech#13795b16.7 / 15.75.4 / 11.2
Ledger NavyFinanzen und Recht#1d4f9115.8 / 15.98.1 / 6.0
Vault GreenFinanzen und Recht#1f6b3e15.0 / 15.76.5 / 9.5
Counsel OxbloodFinanzen und Recht#8a2a2b16.7 / 16.18.6 / 5.3
Steady SlateFinanzen und Recht#3e5f7d15.0 / 15.96.7 / 6.6
Brass AuditFinanzen und Recht#8a641416.1 / 15.75.4 / 9.6
Clinic AquaGesundheit und Wellness#0b728514.2 / 15.85.6 / 9.8
Calm SageGesundheit und Wellness#4f7a3a14.7 / 15.85.0 / 8.6
Soft LavenderGesundheit und Wellness#7445b015.2 / 16.16.5 / 5.1
Dental BrightGesundheit und Wellness#1769c215.1 / 16.05.5 / 6.3
Studio ClayGesundheit und Wellness#a4502a15.5 / 15.95.6 / 6.6
Tomato TableEssen und Gastronomie#c0381f16.5 / 16.05.5 / 5.8
Espresso BarEssen und Gastronomie#7a4a2a15.6 / 15.87.4 / 7.0
Citrus MarketEssen und Gastronomie#b45a0015.8 / 15.84.8 / 8.1
Bistro OliveEssen und Gastronomie#5c6b1f15.1 / 15.65.9 / 10.5
Berry BakeryEssen und Gastronomie#b0285a16.2 / 16.16.4 / 5.4
Gallery InkKreativ und Portfolio#e0301e18.1 / 16.04.5 / 5.6
Poster CobaltKreativ und Portfolio#2340d816.6 / 16.17.5 / 4.7
Neon StudioKreativ und Portfolio#c0129a17.1 / 16.05.5 / 5.8
Paper SketchKreativ und Portfolio#b5462a13.9 / 16.05.4 / 6.1
Film TealKreativ und Portfolio#00756e15.0 / 15.75.6 / 11.6
Hardhat OrangeLokales Handwerk und Hausdienste#c4520a16.1 / 15.94.6 / 7.3
Pipeline BlueLokales Handwerk und Hausdienste#0b5cad15.8 / 15.96.7 / 6.5
Roofline CharcoalLokales Handwerk und Hausdienste#b3261e15.6 / 16.06.5 / 5.4
Fresh LawnLokales Handwerk und Hausdienste#2f7a1f15.5 / 15.75.3 / 9.9
Spark ElectricLokales Handwerk und Hausdienste#a15c0016.7 / 15.85.2 / 8.7
Forest TrailNatur und Outdoor#2d6a4f14.8 / 15.86.4 / 8.7
Desert DuskNatur und Outdoor#b04a2815.1 / 15.95.5 / 6.3
Glacier LakeNatur und Outdoor#14708f15.0 / 15.85.6 / 8.8
Moss and StoneNatur und Outdoor#5a6b3a14.7 / 15.95.8 / 8.5
Coastal DuneNatur und Outdoor#1f6f8b14.6 / 15.85.7 / 8.3
Noir GoldLuxus und Mode#86651a17.3 / 15.75.4 / 9.4
Velvet PlumLuxus und Mode#6d216016.5 / 16.010.3 / 5.8
Ivory EmeraldLuxus und Mode#0f5f4615.7 / 15.77.7 / 11.2
Rose AtelierLuxus und Mode#9c3d4a15.9 / 16.16.6 / 5.6
Onyx SapphireLuxus und Mode#24409a17.2 / 16.09.2 / 4.9
Alle 40 werden angezeigt

Farbschemata für SaaS und Tech

Produktseiten brauchen einen klaren Akzent für die Hauptaktion und ruhige Neutraltöne für dichte Bildschirme. Diese fünf halten den Hintergrund nah an Weiß und setzen Farbe für Buttons und Links ein.

Midnight Launch

MidnightPreise · Kontakt

Release Notes, die dein Team wirklich liest

Gedämpfter Text in #586eb6.

Jetzt starten

Starter

$19

Tarif wählen
FarbeHellDunkel
Hintergrund#f7f8fc#10121b
Fläche#ffffff#1a1b29
Text#141a2e#ededf3
Gedämpft#586eb6#81859c
Akzent#3b4fe0#5869e5
Auf Akzent#ffffff#ffffff
Kontrast
Text16.26:1 AAA16.02:1 AAA
Gedämpft4.58:1 AA5.13:1 AA
Button6.21:1 AA4.60:1 AA

CSS-Variablen 

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --text: #141a2e;
  --muted: #586eb6;
  --accent: #3b4fe0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1b29;
    --text: #ededf3;
    --muted: #81859c;
    --accent: #5869e5;
    --on-accent: #ffffff;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Signal Mint

SignalPreise · Kontakt

Uptime-Alarme, die die richtige Person wecken

Gedämpfter Text in #357e70.

Jetzt starten

Team

$29

Tarif wählen
FarbeHellDunkel
Hintergrund#f4faf8#101b19
Fläche#ffffff#1a2926
Text#0f2420#edf3f2
Gedämpft#357e70#7e9a95
Akzent#0e7c66#55e7ca
Auf Akzent#ffffff#101b19
Kontrast
Text15.37:1 AAA15.68:1 AAA
Gedämpft4.55:1 AA5.82:1 AA
Button5.13:1 AA11.46:1 AAA

CSS-Variablen 

:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --text: #0f2420;
  --muted: #357e70;
  --accent: #0e7c66;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b19;
    --surface: #1a2926;
    --text: #edf3f2;
    --muted: #7e9a95;
    --accent: #55e7ca;
    --on-accent: #101b19;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Graphite Volt

GraphitePreise · Kontakt

Rechnungen verschickt, bevor der Kaffee kalt ist

Gedämpfter Text in #6e6e81.

Jetzt starten

Solo

$12

Tarif wählen
FarbeHellDunkel
Hintergrund#f5f5f2#1b1310
Fläche#ffffff#291d1a
Text#18181a#f3eeed
Gedämpft#6e6e81#9a857e
Akzent#c43d16#e77655
Auf Akzent#ffffff#1b1310
Kontrast
Text16.23:1 AAA15.92:1 AAA
Gedämpft4.57:1 AA5.26:1 AA
Button5.22:1 AA6.21:1 AA

CSS-Variablen 

:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #18181a;
  --muted: #6e6e81;
  --accent: #c43d16;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #e77655;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cloud Iris

CloudPreise · Kontakt

Ein Posteingang für jede Kundenfrage

Gedämpfter Text in #7367b2.

Jetzt starten

Wachstum

$49

Tarif wählen
FarbeHellDunkel
Hintergrund#f8f7fd#13101b
Fläche#ffffff#1e1a29
Text#1e1a33#eeedf3
Gedämpft#7367b2#89819c
Akzent#6a3fd1#8c6bdc
Auf Akzent#ffffff#13101b
Kontrast
Text15.76:1 AAA16.14:1 AAA
Gedämpft4.57:1 AA5.09:1 AA
Button6.47:1 AA4.70:1 AA

CSS-Variablen 

:root {
  --bg: #f8f7fd;
  --surface: #ffffff;
  --text: #1e1a33;
  --muted: #7367b2;
  --accent: #6a3fd1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101b;
    --surface: #1e1a29;
    --text: #eeedf3;
    --muted: #89819c;
    --accent: #8c6bdc;
    --on-accent: #13101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dev Console

DevPreise · Kontakt

Deploy-Vorschauen für jeden Pull Request

Gedämpfter Text in #537768.

Jetzt starten

Pro

$24

Tarif wählen
FarbeHellDunkel
Hintergrund#f3f6f4#101b18
Fläche#ffffff#1a2924
Text#101714#edf3f1
Gedämpft#537768#7e9a92
Akzent#13795b#58e5bb
Auf Akzent#ffffff#101b18
Kontrast
Text16.71:1 AAA15.68:1 AAA
Gedämpft4.59:1 AA5.81:1 AA
Button5.37:1 AA11.19:1 AAA

CSS-Variablen 

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --text: #101714;
  --muted: #537768;
  --accent: #13795b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a92;
    --accent: #58e5bb;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für Finanzen und Recht

Banken, Steuerberater und Kanzleien werden nach Vertrauen beurteilt, deshalb nutzen diese Schemata tiefe, wenig gesättigte Akzente und sehr wenig Dekoration. Der Akzent muss trotzdem als Button funktionieren, darum erreicht jeder mit seiner Beschriftung 4.5:1.

Ledger Navy

LedgerPreise · Kontakt

Buchhaltung für Firmen mit fünf bis fünfzig Leuten

Gedämpfter Text in #3a70c5.

Jetzt starten

Monatsabschluss

$240

Tarif wählen
FarbeHellDunkel
Hintergrund#f6f7f9#10151b
Fläche#ffffff#1a2029
Text#0f1d33#edeff3
Gedämpft#3a70c5#7e8a9a
Akzent#1d4f91#5e95df
Auf Akzent#ffffff#10151b
Kontrast
Text15.75:1 AAA15.93:1 AAA
Gedämpft4.55:1 AA5.23:1 AA
Button8.14:1 AAA5.97:1 AA

CSS-Variablen 

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f1d33;
  --muted: #3a70c5;
  --accent: #1d4f91;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2029;
    --text: #edeff3;
    --muted: #7e8a9a;
    --accent: #5e95df;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Vault Green

VaultPreise · Kontakt

Sparziele, die sich von selbst bewegen

Gedämpfter Text in #417b59.

Jetzt starten

Plus

$6

Tarif wählen
FarbeHellDunkel
Hintergrund#f5f7f3#101b15
Fläche#ffffff#1a2920
Text#13241a#edf3ef
Gedämpft#417b59#7e9a8a
Akzent#1f6b3e#69d394
Auf Akzent#ffffff#101b15
Kontrast
Text15.04:1 AAA15.69:1 AAA
Gedämpft4.64:1 AA5.78:1 AA
Button6.50:1 AA9.54:1 AAA

CSS-Variablen 

:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --text: #13241a;
  --muted: #417b59;
  --accent: #1f6b3e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b15;
    --surface: #1a2920;
    --text: #edf3ef;
    --muted: #7e9a8a;
    --accent: #69d394;
    --on-accent: #101b15;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Counsel Oxblood

CounselPreise · Kontakt

Arbeitsrechtsberatung in klaren Worten

Gedämpfter Text in #a65c45.

Jetzt starten

Erstberatung

$150

Tarif wählen
FarbeHellDunkel
Hintergrund#faf7f5#1b1010
Fläche#ffffff#291a1a
Text#24140f#f3eded
Gedämpft#a65c45#9a7e7f
Akzent#8a2a2b#d26a6b
Auf Akzent#ffffff#1b1010
Kontrast
Text16.66:1 AAA16.09:1 AAA
Gedämpft4.65:1 AA5.02:1 AA
Button8.58:1 AAA5.33:1 AA

CSS-Variablen 

:root {
  --bg: #faf7f5;
  --surface: #ffffff;
  --text: #24140f;
  --muted: #a65c45;
  --accent: #8a2a2b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1010;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a7e7f;
    --accent: #d26a6b;
    --on-accent: #1b1010;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Steady Slate

SteadyPreise · Kontakt

Lohnabrechnung, die jeden Monat am selben Tag läuft

Gedämpfter Text in #59718d.

Jetzt starten

Basis

$39

Tarif wählen
FarbeHellDunkel
Hintergrund#f4f6f8#12161a
Fläche#ffffff#1c2127
Text#1a2129#edf0f3
Gedämpft#59718d#7e8d9a
Akzent#3e5f7d#7da0bf
Auf Akzent#ffffff#12161a
Kontrast
Text14.99:1 AAA15.89:1 AAA
Gedämpft4.65:1 AA5.33:1 AA
Button6.69:1 AA6.62:1 AA

CSS-Variablen 

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2129;
  --muted: #59718d;
  --accent: #3e5f7d;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --surface: #1c2127;
    --text: #edf0f3;
    --muted: #7e8d9a;
    --accent: #7da0bf;
    --on-accent: #12161a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Brass Audit

BrassPreise · Kontakt

Steuererklärungen bis April erstellt und eingereicht

Gedämpfter Text in #847048.

Jetzt starten

Privat

$180

Tarif wählen
FarbeHellDunkel
Hintergrund#fbf9f4#1b1810
Fläche#ffffff#29241a
Text#211c12#f3f1ed
Gedämpft#847048#9a917e
Akzent#8a6414#e6b856
Auf Akzent#ffffff#1b1810
Kontrast
Text16.10:1 AAA15.71:1 AAA
Gedämpft4.54:1 AA5.68:1 AA
Button5.37:1 AA9.58:1 AAA

CSS-Variablen 

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --text: #211c12;
  --muted: #847048;
  --accent: #8a6414;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a917e;
    --accent: #e6b856;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für Gesundheit und Wellness

Kliniken, Therapeuten und Studios wollen sauber und beruhigend wirken. Kühle Blau- und Grüntöne dominieren, dazu eine warme Tonerde-Option für Spas und Physiopraxen, die weniger klinisch aussehen wollen.

Clinic Aqua

ClinicPreise · Kontakt

Termine beim Hausarzt noch in derselben Woche

Gedämpfter Text in #267c8b.

Jetzt starten

Ohne Termin

$0

Tarif wählen
FarbeHellDunkel
Hintergrund#f3f9fa#10191b
Fläche#ffffff#1a2629
Text#0d2a2f#edf2f3
Gedämpft#267c8b#7e969a
Akzent#0b7285#55d0e7
Auf Akzent#ffffff#10191b
Kontrast
Text14.21:1 AAA15.80:1 AAA
Gedämpft4.55:1 AA5.71:1 AA
Button5.59:1 AA9.82:1 AAA

CSS-Variablen 

:root {
  --bg: #f3f9fa;
  --surface: #ffffff;
  --text: #0d2a2f;
  --muted: #267c8b;
  --accent: #0b7285;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191b;
    --surface: #1a2629;
    --text: #edf2f3;
    --muted: #7e969a;
    --accent: #55d0e7;
    --on-accent: #10191b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Calm Sage

CalmPreise · Kontakt

Angeleitete Atemkurse, morgens und abends

Gedämpfter Text in #5a7a4d.

Jetzt starten

Einzelstunde

$15

Tarif wählen
FarbeHellDunkel
Hintergrund#f6f8f3#141a11
Fläche#ffffff#1f271b
Text#1c2618#eff3ed
Gedämpft#5a7a4d#889a7e
Akzent#4f7a3a#92c17c
Auf Akzent#ffffff#141a11
Kontrast
Text14.66:1 AAA15.78:1 AAA
Gedämpft4.54:1 AA5.88:1 AA
Button5.03:1 AA8.55:1 AAA

CSS-Variablen 

:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #1c2618;
  --muted: #5a7a4d;
  --accent: #4f7a3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f271b;
    --text: #eff3ed;
    --muted: #889a7e;
    --accent: #92c17c;
    --on-accent: #141a11;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Soft Lavender

SoftPreise · Kontakt

Beratungssitzungen aus einem ruhigen Raum zu Hause

Gedämpfter Text in #7d65a8.

Jetzt starten

Einzelsitzung

$90

Tarif wählen
FarbeHellDunkel
Hintergrund#f9f7fc#15101b
Fläche#ffffff#201a28
Text#251d33#efedf3
Gedämpft#7d65a8#8d819c
Akzent#7445b0#9974c8
Auf Akzent#ffffff#15101b
Kontrast
Text15.16:1 AAA16.11:1 AAA
Gedämpft4.59:1 AA5.13:1 AA
Button6.52:1 AA5.07:1 AA

CSS-Variablen 

:root {
  --bg: #f9f7fc;
  --surface: #ffffff;
  --text: #251d33;
  --muted: #7d65a8;
  --accent: #7445b0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101b;
    --surface: #201a28;
    --text: #efedf3;
    --muted: #8d819c;
    --accent: #9974c8;
    --on-accent: #15101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dental Bright

DentalPreise · Kontakt

Zahnreinigung, Kontrolle und Abendsprechstunden

Gedämpfter Text in #3373bd.

Jetzt starten

Erstuntersuchung

$79

Tarif wählen
FarbeHellDunkel
Hintergrund#f4f8fd#10151b
Fläche#ffffff#1a2129
Text#0f2238#edf0f3
Gedämpft#3373bd#7e8c9a
Akzent#1769c2#559be7
Auf Akzent#ffffff#10151b
Kontrast
Text15.08:1 AAA16.03:1 AAA
Gedämpft4.55:1 AA5.33:1 AA
Button5.47:1 AA6.31:1 AA

CSS-Variablen 

:root {
  --bg: #f4f8fd;
  --surface: #ffffff;
  --text: #0f2238;
  --muted: #3373bd;
  --accent: #1769c2;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559be7;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Studio Clay

StudioPreise · Kontakt

Massage und Physio unter einem Dach

Gedämpfter Text in #9e6042.

Jetzt starten

60 Minuten

$95

Tarif wählen
FarbeHellDunkel
Hintergrund#fbf6f2#1b1410
Fläche#ffffff#291e1a
Text#2b1a12#f3efed
Gedämpft#9e6042#9a877e
Akzent#a4502a#d78865
Auf Akzent#ffffff#1b1410
Kontrast
Text15.54:1 AAA15.93:1 AAA
Gedämpft4.65:1 AA5.32:1 AA
Button5.59:1 AA6.58:1 AA

CSS-Variablen 

:root {
  --bg: #fbf6f2;
  --surface: #ffffff;
  --text: #2b1a12;
  --muted: #9e6042;
  --accent: #a4502a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291e1a;
    --text: #f3efed;
    --muted: #9a877e;
    --accent: #d78865;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für Essen und Gastronomie

Restaurants und Lebensmittelläden können sich wärmere, lautere Akzente leisten, weil Appetit auf Wärme reagiert. Die Hintergründe sind leicht cremefarben, damit Food-Fotos vor reinem Weiß nicht kalt wirken.

Tomato Table

TomatoPreise · Kontakt

Pizza aus dem Holzofen und ein langer Tisch für Freunde

Gedämpfter Text in #b35944.

Jetzt starten

Familienessen

$58

Tarif wählen
FarbeHellDunkel
Hintergrund#fff8f3#1b1210
Fläche#ffffff#291c1a
Text#2a1510#f3eeed
Gedämpft#b35944#9a837e
Akzent#c0381f#e46e58
Auf Akzent#ffffff#1b1210
Kontrast
Text16.46:1 AAA16.01:1 AAA
Gedämpft4.51:1 AA5.19:1 AA
Button5.49:1 AA5.85:1 AA

CSS-Variablen 

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --text: #2a1510;
  --muted: #b35944;
  --accent: #c0381f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291c1a;
    --text: #f3eeed;
    --muted: #9a837e;
    --accent: #e46e58;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Espresso Bar

EspressoPreise · Kontakt

Single-Origin-Bohnen, jeden Dienstag geröstet

Gedämpfter Text in #916548.

Jetzt starten

Beutel mit 340 g

$18

Tarif wählen
FarbeHellDunkel
Hintergrund#f8f3ee#1b1510
Fläche#fffdfa#29201a
Text#241912#f3efed
Gedämpft#916548#9a897e
Akzent#7a4a2a#cd956f
Auf Akzent#ffffff#1b1510
Kontrast
Text15.58:1 AAA15.83:1 AAA
Gedämpft4.58:1 AA5.38:1 AA
Button7.39:1 AAA7.00:1 AAA

CSS-Variablen 

:root {
  --bg: #f8f3ee;
  --surface: #fffdfa;
  --text: #241912;
  --muted: #916548;
  --accent: #7a4a2a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1510;
    --surface: #29201a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #cd956f;
    --on-accent: #1b1510;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Citrus Market

CitrusPreise · Kontakt

Obstkisten, freitagmorgens geliefert

Gedämpfter Text in #82732f.

Jetzt starten

Kleine Kiste

$32

Tarif wählen
FarbeHellDunkel
Hintergrund#fffbef#1b1610
Fläche#ffffff#29211a
Text#24200d#f3f0ed
Gedämpft#82732f#9a8c7e
Akzent#b45a00#e79e55
Auf Akzent#ffffff#1b1610
Kontrast
Text15.77:1 AAA15.83:1 AAA
Gedämpft4.57:1 AA5.50:1 AA
Button4.77:1 AA8.06:1 AAA

CSS-Variablen 

:root {
  --bg: #fffbef;
  --surface: #ffffff;
  --text: #24200d;
  --muted: #82732f;
  --accent: #b45a00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29211a;
    --text: #f3f0ed;
    --muted: #9a8c7e;
    --accent: #e79e55;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Bistro Olive

BistroPreise · Kontakt

Eine kurze Karte, die mit der Saison wechselt

Gedämpfter Text in #6c743f.

Jetzt starten

Degustationsmenü

$65

Tarif wählen
FarbeHellDunkel
Hintergrund#f7f6ee#191b10
Fläche#ffffff#26291a
Text#1f2112#f2f3ed
Gedämpft#6c743f#959a7e
Akzent#5c6b1f#bed369
Auf Akzent#ffffff#191b10
Kontrast
Text15.08:1 AAA15.61:1 AAA
Gedämpft4.60:1 AA5.97:1 AA
Button5.87:1 AA10.54:1 AAA

CSS-Variablen 

:root {
  --bg: #f7f6ee;
  --surface: #ffffff;
  --text: #1f2112;
  --muted: #6c743f;
  --accent: #5c6b1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191b10;
    --surface: #26291a;
    --text: #f2f3ed;
    --muted: #959a7e;
    --accent: #bed369;
    --on-accent: #191b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Berry Bakery

BerryPreise · Kontakt

Schichttorten, zwei Tage im Voraus bestellt

Gedämpfter Text in #b74e6a.

Jetzt starten

Six-inch-Torte

$42

Tarif wählen
FarbeHellDunkel
Hintergrund#fdf5f7#1b1014
Fläche#ffffff#291a1f
Text#2c1219#f3edef
Gedämpft#b74e6a#9a7e89
Akzent#b0285a#db618e
Auf Akzent#ffffff#1b1014
Kontrast
Text16.21:1 AAA16.07:1 AAA
Gedämpft4.54:1 AA5.06:1 AA
Button6.37:1 AA5.41:1 AA

CSS-Variablen 

:root {
  --bg: #fdf5f7;
  --surface: #ffffff;
  --text: #2c1219;
  --muted: #b74e6a;
  --accent: #b0285a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1014;
    --surface: #291a1f;
    --text: #f3edef;
    --muted: #9a7e89;
    --accent: #db618e;
    --on-accent: #1b1014;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für Kreative und Portfolios

Portfolios und Studios können mehr wagen. Diese Schemata kombinieren fast schwarzen Text mit einem starken Akzent, wie ein gedrucktes Plakat, und überlassen den Rest der Farbe den Arbeiten selbst.

Poster Cobalt

PosterPreise · Kontakt

Siebdrucke in Auflagen von fünfzig

Gedämpfter Text in #7d6a6a.

Jetzt starten

A2-Druck

$70

Tarif wählen
FarbeHellDunkel
Hintergrund#f6f4ef#10121b
Fläche#ffffff#1a1c29
Text#151515#edeef3
Gedämpft#7d6a6a#7e839a
Akzent#2340d8#6077e6
Auf Akzent#ffffff#10121b
Kontrast
Text16.61:1 AAA16.12:1 AAA
Gedämpft4.61:1 AA4.98:1 AA
Button7.51:1 AAA4.69:1 AA

CSS-Variablen 

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #151515;
  --muted: #7d6a6a;
  --accent: #2340d8;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1c29;
    --text: #edeef3;
    --muted: #7e839a;
    --accent: #6077e6;
    --on-accent: #10121b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Neon Studio

NeonPreise · Kontakt

Motion Graphics für Musik-Releases

Gedämpfter Text in #785ec7.

Jetzt starten

Lyric-Video

$900

Tarif wählen
FarbeHellDunkel
Hintergrund#f7f5ff#1b1019
Fläche#ffffff#291a25
Text#160f2b#f3edf1
Gedämpft#785ec7#9a7e94
Akzent#c0129a#e755c7
Auf Akzent#ffffff#1b1019
Kontrast
Text17.11:1 AAA16.03:1 AAA
Gedämpft4.61:1 AA5.10:1 AA
Button5.53:1 AA5.75:1 AA

CSS-Variablen 

:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --text: #160f2b;
  --muted: #785ec7;
  --accent: #c0129a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a25;
    --text: #f3edf1;
    --muted: #9a7e94;
    --accent: #e755c7;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Paper Sketch

PaperPreise · Kontakt

Illustrierte Karten für Orte und Wanderwege

Gedämpfter Text in #7b6f5e.

Jetzt starten

Individuelle Karte

$650

Tarif wählen
FarbeHellDunkel
Hintergrund#f9f6ef#1b1210
Fläche#fffdf8#291d1a
Text#2a2620#f3eeed
Gedämpft#7b6f5e#9a847e
Akzent#b5462a#da7a62
Auf Akzent#ffffff#1b1210
Kontrast
Text13.93:1 AAA16.01:1 AAA
Gedämpft4.55:1 AA5.24:1 AA
Button5.42:1 AA6.09:1 AA

CSS-Variablen 

:root {
  --bg: #f9f6ef;
  --surface: #fffdf8;
  --text: #2a2620;
  --muted: #7b6f5e;
  --accent: #b5462a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a847e;
    --accent: #da7a62;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Film Teal

FilmPreise · Kontakt

Kurzdokus für gemeinnützige Organisationen

Gedämpfter Text in #45767d.

Jetzt starten

Dreiminütiger Film

$3,200

Tarif wählen
FarbeHellDunkel
Hintergrund#f2f6f6#101b1a
Fläche#ffffff#1a2928
Text#142224#edf3f2
Gedämpft#45767d#7e9a98
Akzent#00756e#55e7de
Auf Akzent#ffffff#101b1a
Kontrast
Text15.02:1 AAA15.67:1 AAA
Gedämpft4.66:1 AA5.83:1 AA
Button5.57:1 AA11.62:1 AAA

CSS-Variablen 

:root {
  --bg: #f2f6f6;
  --surface: #ffffff;
  --text: #142224;
  --muted: #45767d;
  --accent: #00756e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b1a;
    --surface: #1a2928;
    --text: #edf3f2;
    --muted: #7e9a98;
    --accent: #55e7de;
    --on-accent: #101b1a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für lokales Handwerk und Hausdienste

Installateure, Dachdecker, Elektriker und Gartenbauer brauchen einen Anruf-Button, der auf dem Handy bei Tageslicht auffällt. Jeder Akzent hier ist eine gut sichtbare Farbe mit einer Beschriftung, die lesbar bleibt.

Hardhat Orange

HardhatPreise · Kontakt

Küchen- und Badsanierung, von Anfang bis Ende

Gedämpfter Text in #736f62.

Jetzt starten

Vor-Ort-Termin

Kostenlos

Tarif wählen
FarbeHellDunkel
Hintergrund#f8f6f2#1b1410
Fläche#ffffff#291f1a
Text#1b1a17#f3efed
Gedämpft#736f62#9a897e
Akzent#c4520a#e78e55
Auf Akzent#ffffff#1b1410
Kontrast
Text16.12:1 AAA15.93:1 AAA
Gedämpft4.66:1 AA5.42:1 AA
Button4.61:1 AA7.28:1 AAA

CSS-Variablen 

:root {
  --bg: #f8f6f2;
  --surface: #ffffff;
  --text: #1b1a17;
  --muted: #736f62;
  --accent: #c4520a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291f1a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #e78e55;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Pipeline Blue

PipelinePreise · Kontakt

Rohrbruch? Heute Abend steht ein Installateur vor deiner Tür

Gedämpfter Text in #3c71b1.

Jetzt starten

Anfahrt

$89

Tarif wählen
FarbeHellDunkel
Hintergrund#f3f6fa#10161b
Fläche#ffffff#1a2129
Text#0f1c2c#edf0f3
Gedämpft#3c71b1#7e8c9a
Akzent#0b5cad#559ee7
Auf Akzent#ffffff#10161b
Kontrast
Text15.84:1 AAA15.93:1 AAA
Gedämpft4.62:1 AA5.30:1 AA
Button6.67:1 AA6.45:1 AA

CSS-Variablen 

:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --text: #0f1c2c;
  --muted: #3c71b1;
  --accent: #0b5cad;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559ee7;
    --on-accent: #10161b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Roofline Charcoal

RooflinePreise · Kontakt

Dachreparaturen mit Fotos von jeder Schindel

Gedämpfter Text in #7f6c6c.

Jetzt starten

Inspektion

$120

Tarif wählen
FarbeHellDunkel
Hintergrund#f5f5f5#1b1110
Fläche#ffffff#291a1a
Text#1c1c1c#f3eded
Gedämpft#7f6c6c#9a807e
Akzent#b3261e#e36059
Auf Akzent#ffffff#1b1110
Kontrast
Text15.63:1 AAA16.00:1 AAA
Gedämpft4.52:1 AA5.08:1 AA
Button6.54:1 AA5.36:1 AA

CSS-Variablen 

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #7f6c6c;
  --accent: #b3261e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a807e;
    --accent: #e36059;
    --on-accent: #1b1110;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Fresh Lawn

FreshPreise · Kontakt

Wöchentliches Mähen und Frühjahrsputz im Garten

Gedämpfter Text in #4f7c47.

Jetzt starten

Wöchentlicher Besuch

$45

Tarif wählen
FarbeHellDunkel
Hintergrund#f4f8f1#121b10
Fläche#ffffff#1c291a
Text#152113#eef3ed
Gedämpft#4f7c47#839a7e
Akzent#2f7a1f#79d864
Auf Akzent#ffffff#121b10
Kontrast
Text15.53:1 AAA15.70:1 AAA
Gedämpft4.54:1 AA5.79:1 AA
Button5.35:1 AA9.93:1 AAA

CSS-Variablen 

:root {
  --bg: #f4f8f1;
  --surface: #ffffff;
  --text: #152113;
  --muted: #4f7c47;
  --accent: #2f7a1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b10;
    --surface: #1c291a;
    --text: #eef3ed;
    --muted: #839a7e;
    --accent: #79d864;
    --on-accent: #121b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Spark Electric

SparkPreise · Kontakt

Verteiler-Upgrades und Installation von E-Auto-Ladern

Gedämpfter Text in #737359.

Jetzt starten

Ladegerät-Installation

$650

Tarif wählen
FarbeHellDunkel
Hintergrund#fbfaf2#1b1610
Fläche#ffffff#29221a
Text#1a1a14#f3f0ed
Gedämpft#737359#9a8e7e
Akzent#a15c00#e7a855
Auf Akzent#ffffff#1b1610
Kontrast
Text16.69:1 AAA15.83:1 AAA
Gedämpft4.64:1 AA5.60:1 AA
Button5.19:1 AA8.67:1 AAA

CSS-Variablen 

:root {
  --bg: #fbfaf2;
  --surface: #ffffff;
  --text: #1a1a14;
  --muted: #737359;
  --accent: #a15c00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29221a;
    --text: #f3f0ed;
    --muted: #9a8e7e;
    --accent: #e7a855;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für Natur und Outdoor

Outdoor-Marken, Höfe, Reiseveranstalter und Öko-Produkte. Erdige Akzente auf gebrochenem Weiß, mit Dark Modes, die eher an Abenddämmerung erinnern als an einen Code-Editor.

Forest Trail

ForestPreise · Kontakt

Geführte Wanderungen für kleine Gruppen

Gedämpfter Text in #4a7958.

Jetzt starten

Halber Tag

$55

Tarif wählen
FarbeHellDunkel
Hintergrund#f3f6f2#111a16
Fläche#ffffff#1a2822
Text#16241a#edf3f0
Gedämpft#4a7958#7e9a8e
Akzent#2d6a4f#77c5a3
Auf Akzent#ffffff#111a16
Kontrast
Text14.81:1 AAA15.79:1 AAA
Gedämpft4.63:1 AA5.83:1 AA
Button6.39:1 AA8.71:1 AAA

CSS-Variablen 

:root {
  --bg: #f3f6f2;
  --surface: #ffffff;
  --text: #16241a;
  --muted: #4a7958;
  --accent: #2d6a4f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --surface: #1a2822;
    --text: #edf3f0;
    --muted: #7e9a8e;
    --accent: #77c5a3;
    --on-accent: #111a16;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Desert Dusk

DesertPreise · Kontakt

Canyon-Touren bei Sonnenaufgang und Sonnenuntergang

Gedämpfter Text in #976646.

Jetzt starten

Sonnenuntergangstour

$75

Tarif wählen
FarbeHellDunkel
Hintergrund#fbf5ee#1b1310
Fläche#ffffff#291d1a
Text#2b1d14#f3eeed
Gedämpft#976646#9a857e
Akzent#b04a28#db8061
Auf Akzent#ffffff#1b1310
Kontrast
Text15.05:1 AAA15.92:1 AAA
Gedämpft4.51:1 AA5.26:1 AA
Button5.45:1 AA6.34:1 AA

CSS-Variablen 

:root {
  --bg: #fbf5ee;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #976646;
  --accent: #b04a28;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #db8061;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Glacier Lake

GlacierPreise · Kontakt

Kajakverleih pro Stunde

Gedämpfter Text in #37749a.

Jetzt starten

Zwei Stunden

$40

Tarif wählen
FarbeHellDunkel
Hintergrund#f1f6f9#10181b
Fläche#ffffff#1a2529
Text#10222d#edf1f3
Gedämpft#37749a#7e939a
Akzent#14708f#55c2e7
Auf Akzent#ffffff#10181b
Kontrast
Text14.97:1 AAA15.81:1 AAA
Gedämpft4.67:1 AA5.59:1 AA
Button5.61:1 AA8.78:1 AAA

CSS-Variablen 

:root {
  --bg: #f1f6f9;
  --surface: #ffffff;
  --text: #10222d;
  --muted: #37749a;
  --accent: #14708f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #55c2e7;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Moss and Stone

MossPreise · Kontakt

Gärten mit heimischen Pflanzen, die wenig Wasser brauchen

Gedämpfter Text in #68725a.

Jetzt starten

Gartenplan

$300

Tarif wählen
FarbeHellDunkel
Hintergrund#f4f5f0#171912
Fläche#ffffff#23261c
Text#1f221b#f1f3ed
Gedämpft#68725a#909a7e
Akzent#5a6b3a#a7bb81
Auf Akzent#ffffff#171912
Kontrast
Text14.71:1 AAA15.86:1 AAA
Gedämpft4.63:1 AA6.00:1 AA
Button5.84:1 AA8.50:1 AAA

CSS-Variablen 

:root {
  --bg: #f4f5f0;
  --surface: #ffffff;
  --text: #1f221b;
  --muted: #68725a;
  --accent: #5a6b3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171912;
    --surface: #23261c;
    --text: #f1f3ed;
    --muted: #909a7e;
    --accent: #a7bb81;
    --on-accent: #171912;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Coastal Dune

CoastalPreise · Kontakt

Strandhäuser, nur ein paar Schritte vom Wasser

Gedämpfter Text in #5c727c.

Jetzt starten

Pro Nacht

$210

Tarif wählen
FarbeHellDunkel
Hintergrund#f9f6ef#10181b
Fläche#ffffff#1a2529
Text#1d2427#edf1f3
Gedämpft#5c727c#7e939a
Akzent#1f6f8b#61bcdc
Auf Akzent#ffffff#10181b
Kontrast
Text14.59:1 AAA15.81:1 AAA
Gedämpft4.68:1 AA5.59:1 AA
Button5.67:1 AA8.33:1 AAA

CSS-Variablen 

:root {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --text: #1d2427;
  --muted: #5c727c;
  --accent: #1f6f8b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #61bcdc;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Farbschemata für Luxus und Mode

Juweliere, Boutique-Hotels und Modelabels wollen meist Zurückhaltung: einen ruhigen Hintergrund, dunklen Text und einen satten Akzent, sparsam eingesetzt.

Noir Gold

NoirPreise · Kontakt

Handgefasste Ringe auf Bestellung

Gedämpfter Text in #7a6e62.

Jetzt starten

Beratung

Kostenlos

Tarif wählen
FarbeHellDunkel
Hintergrund#f8f6f1#1b1810
Fläche#ffffff#29241a
Text#141210#f3f1ed
Gedämpft#7a6e62#9a927e
Akzent#86651a#e0b85d
Auf Akzent#ffffff#1b1810
Kontrast
Text17.30:1 AAA15.71:1 AAA
Gedämpft4.59:1 AA5.73:1 AA
Button5.40:1 AA9.44:1 AAA

CSS-Variablen 

:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --text: #141210;
  --muted: #7a6e62;
  --accent: #86651a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a927e;
    --accent: #e0b85d;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Velvet Plum

VelvetPreise · Kontakt

Abendmode zum Mieten fürs Wochenende

Gedämpfter Text in #a5538e.

Jetzt starten

Wochenendmiete

$120

Tarif wählen
FarbeHellDunkel
Hintergrund#f9f5f8#1b1019
Fläche#ffffff#291a26
Text#24121f#f3edf2
Gedämpft#a5538e#9a7e95
Akzent#6d2160#d26ac0
Auf Akzent#ffffff#1b1019
Kontrast
Text16.46:1 AAA16.04:1 AAA
Gedämpft4.60:1 AA5.10:1 AA
Button10.31:1 AAA5.78:1 AA

CSS-Variablen 

:root {
  --bg: #f9f5f8;
  --surface: #ffffff;
  --text: #24121f;
  --muted: #a5538e;
  --accent: #6d2160;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a26;
    --text: #f3edf2;
    --muted: #9a7e95;
    --accent: #d26ac0;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Ivory Emerald

IvoryPreise · Kontakt

Ein Hotel mit zwölf Zimmern über dem alten Hafen

Gedämpfter Text in #3e7c65.

Jetzt starten

Gartenzimmer

$340

Tarif wählen
FarbeHellDunkel
Hintergrund#f8f7f2#101b18
Fläche#ffffff#1a2924
Text#10201a#edf3f1
Gedämpft#3e7c65#7e9a91
Akzent#0f5f46#58e5b9
Auf Akzent#ffffff#101b18
Kontrast
Text15.74:1 AAA15.68:1 AAA
Gedämpft4.58:1 AA5.80:1 AA
Button7.65:1 AAA11.18:1 AAA

CSS-Variablen 

:root {
  --bg: #f8f7f2;
  --surface: #ffffff;
  --text: #10201a;
  --muted: #3e7c65;
  --accent: #0f5f46;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a91;
    --accent: #58e5b9;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Rose Atelier

RosePreise · Kontakt

Brautkleid-Änderungen mit zwei Anproben inklusive

Gedämpfter Text in #a65b57.

Jetzt starten

Anprobe-Paket

$280

Tarif wählen
FarbeHellDunkel
Hintergrund#fcf6f5#1b1012
Fläche#ffffff#281a1c
Text#2a1716#f3eded
Gedämpft#a65b57#9a7e82
Akzent#9c3d4a#c9747f
Auf Akzent#ffffff#1b1012
Kontrast
Text15.93:1 AAA16.07:1 AAA
Gedämpft4.62:1 AA5.03:1 AA
Button6.60:1 AA5.57:1 AA

CSS-Variablen 

:root {
  --bg: #fcf6f5;
  --surface: #ffffff;
  --text: #2a1716;
  --muted: #a65b57;
  --accent: #9c3d4a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1012;
    --surface: #281a1c;
    --text: #f3eded;
    --muted: #9a7e82;
    --accent: #c9747f;
    --on-accent: #1b1012;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Onyx Sapphire

OnyxPreise · Kontakt

Uhrenservice durch einen zertifizierten Uhrmacher

Gedämpfter Text in #586db6.

Jetzt starten

Komplettservice

$450

Tarif wählen
FarbeHellDunkel
Hintergrund#f5f6f8#10131b
Fläche#ffffff#1a1d29
Text#0e1220#edeef3
Gedämpft#586db6#7e859a
Akzent#24409a#627eda
Auf Akzent#ffffff#10131b
Kontrast
Text17.25:1 AAA16.03:1 AAA
Gedämpft4.54:1 AA5.05:1 AA
Button9.23:1 AAA4.88:1 AA

CSS-Variablen 

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #0e1220;
  --muted: #586db6;
  --accent: #24409a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131b;
    --surface: #1a1d29;
    --text: #edeef3;
    --muted: #7e859a;
    --accent: #627eda;
    --on-accent: #10131b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

So nutzt du die Codeblöcke

Einfache CSS-Variablen

Der CSS-Block definiert sechs Variablen auf :root und definiert sie innerhalb von @media (prefers-color-scheme: dark) neu, sodass die Seite ohne JavaScript der Systemeinstellung der Besucher folgt. Verwende sie überall:

body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }
.small { color: var(--muted); }
.button { background: var(--accent); color: var(--on-accent); }

Wenn du zusätzlich einen manuellen Schalter möchtest, kopiere die dunklen Werte in eine zweite Regel wie :root[data-theme="dark"] { ... } und setze dieses Attribut über deinen Umschalter.

Tailwind CSS v4

In Tailwind v4 stehen Theme-Werte im CSS innerhalb eines @theme-Blocks, und jede Variable namens --color-* wird zu einer Farb-Utility, --color-accent liefert dir also bg-accent, text-accent und border-accent. Der Tailwind-Block jedes Schemas ordnet diese Namen mit @theme inline den CSS-Variablen darüber zu, der Option, die Tailwind für Theme-Werte dokumentiert, die auf andere Variablen verweisen. Füge zuerst die CSS-Variablen ein, dann den @theme-Block, und zwar nach @import "tailwindcss";. Der Dark Mode funktioniert weiterhin, weil die Utilities auf dieselben Variablen zeigen, die die Media Query ändert:

<section class="bg-bg text-text">
  <div class="bg-surface rounded-xl p-6">
    <p class="text-muted">Starter plan</p>
    <a class="bg-accent text-on-accent rounded-lg px-4 py-2">Get started</a>
  </div>
</section>

Du nutzt Tailwind v3? Dann trage dieselben hellen Hex-Werte stattdessen unter theme.extend.colors in tailwind.config.js ein. Wenn du lieber aus einem Akzent eine komplette Abstufung von 50 bis 950 erzeugen willst, erledigt das der Tailwind-Farbpaletten-Generator.

Design Tokens

Um ein Schema in ein Design-Token-Tool zu übernehmen, bildest du die sechs Rollen als Tokens im JSON-Format der Design Tokens Community Group ab, mit $type color und dem Hex-Wert als $value, in einer Gruppe light und einer Gruppe dark:

{
  "color": {
    "light": { "accent": { "$type": "color", "$value": "#3b4fe0" } },
    "dark":  { "accent": { "$type": "color", "$value": "#5869e5" } }
  }
}

Tools, die dieses Format lesen, etwa Style Dictionary, können daraus CSS-, iOS- oder Android-Werte machen.

Häufige Fehler bei Farbschemata

Tools, um dein eigenes zu erstellen

Layouts zum Ausprobieren deines Schemas findest du bei den Hero-Sektionen und Preis-Komponenten, und kombiniere die Farben mit Schriften aus den besten Schriftarten für Websites.

Häufige Fragen

Was ist ein gutes Farbschema für eine Website?

Eines mit einem ruhigen Hintergrund, der den Großteil der Seite bedeckt, einer dunklen Textfarbe, die damit mindestens 4.5:1 Kontrast erreicht, und einer Akzentfarbe, die für Buttons und Links reserviert ist. Der Akzent sollte zur Marke passen, und die Button-Beschriftung darauf sollte ebenfalls 4.5:1 erreichen.

Wie viele Farben sollte eine Website haben?

Die meisten Websites kommen mit fünf oder sechs Rollen aus: Hintergrund, Fläche für Karten, Haupttext, gedämpfter Text, ein Akzent und die Textfarbe auf dem Akzent. Rot, Bernstein und Grün kommen nur für Fehler-, Warn- und Erfolgsmeldungen dazu.

Was ist die 60-30-10-Regel im Webdesign?

Eine Proportionsregel aus der Innenarchitektur: etwa 60 Prozent dominante Farbe (der Seitenhintergrund), 30 Prozent Sekundärfarbe (Text, Karten und Panels) und 10 Prozent Akzent (Buttons, Links und Highlights). So bleibt der Akzent selten genug, um Aufmerksamkeit zu erzeugen.

Welches Kontrastverhältnis verlangt WCAG für Text?

WCAG 2.2 Stufe AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text, also mindestens 18 Punkt oder 14 Punkt fett. Stufe AAA hebt das auf 7:1 und 4.5:1 an. Buttons, Rahmen von Eingabefeldern und bedeutungstragende Icons brauchen 3:1 gegenüber ihrer Umgebung.

Darf ich diese Farbschemata auf einer kommerziellen Website verwenden?

Ja. Wir haben diese Paletten für diese Seite erstellt, und du kannst sie ohne Namensnennung in jedem privaten oder kommerziellen Projekt verwenden.

Wie erstelle ich eine Dark-Mode-Version eines Farbschemas?

Kehre es nicht einfach um. Nutze einen sehr dunklen Hintergrund, der mit dem Markenfarbton getönt ist, eine gebrochen weiße Textfarbe und eine hellere Version des Akzents, damit er sichtbar bleibt. Prüfe dann erneut den Kontrast für Text und für die Button-Beschriftung, die eventuell von Weiß auf Dunkel wechseln muss.

Vorschauen

Helle oder dunkle Vorschauen

Hell

Dunkel

Nach Stimmung filtern

Alle

SaaS

Finanzen

Gesundheit

Essen

Kreativ

Handwerk

Natur

Luxus

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap