Zum Inhalt springen
Musterli

Neutral

Farbpalette Beton

Fünf neutrale Grautöne ohne Farbstich, die Basis für jedes Interface.

Im Palettengenerator öffnen

Farben sperren, mit der Leertaste neue Varianten würfeln und als Bild oder Code exportieren.

Farben

Ein Klick auf einen Wert kopiert ihn. Auf jedem Farbfeld steht der Wert in der Schriftfarbe, die darauf am besten lesbar ist.

  1. Farbe 1

    Text in Schwarz, Kontrast 18.7:1

  2. Farbe 2

    Text in Schwarz, Kontrast 13.3:1

  3. Farbe 3

    Text in Schwarz, Kontrast 7.8:1

  4. Farbe 4

    Text in Weiss, Kontrast 5.9:1

  5. Farbe 5

    Text in Weiss, Kontrast 13.5:1

Code

Die Palette als CSS-Variablen für jedes Projekt und als Theme für Tailwind CSS v4.

CSS-Variablen

:root {
  --palette-1: #f2f2ef;
  --palette-2: #cfceca;
  --palette-3: #a09e9a;
  --palette-4: #65635f;
  --palette-5: #2f2e2b;
}

Tailwind-Theme

@theme {
  --color-concrete-1: oklch(96% 0.004 106.5);
  --color-concrete-2: oklch(85.1% 0.006 95.1);
  --color-concrete-3: oklch(70% 0.006 84.6);
  --color-concrete-4: oklch(50% 0.007 84.6);
  --color-concrete-5: oklch(30.1% 0.005 91.6);
}

Verläufe aus dieser Palette

Dieselben Farben als Verlauf. Jede Karte öffnet den Editor mit diesen Farben.

Mit der Palette weiterarbeiten

Bearbeite die Palette oder baue aus ihrer kräftigsten Farbe eine ganze Skala.

So verwendest du die Palette

Lege die hellste Farbe als Hintergrund fest und nutze die dunkelste für Text. Die kräftigen Farben dazwischen eignen sich für Buttons, Links und Hervorhebungen. Prüfe bei Text immer den Kontrast; die Angaben auf den Farbfeldern zeigen, ob Schwarz oder Weiss besser lesbar ist.

Ähnliche Paletten

Alle Farbpaletten

  • Wollpullover

    Warme Grau- und Brauntöne wie ungefärbte Schafwolle.

  • Granit

    Kühle Grautöne mit einem leichten Blaustich.

  • Druckerei

    Papier, Tinte und ein einziges Signalrot.

  • Holzhaus

    Helles Holz, Naturtöne und ein dunkles Tannengrün.

  • Winterhimmel

    Fünf kühle Blaugraustufen von Schneeweiss bis Schiefer.

  • Lehmofen

    Sand, Ocker, gebrannter Ton und dunkles Braun für warme, handgemachte Marken.