Zum Inhalt springen
Musterli

Pastell

Farbpalette Aquarell

Lasierende Töne in Blau, Grün, Gelb und Rosa.

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 17.7:1

  2. Farbe 2

    Text in Schwarz, Kontrast 14.9:1

  3. Farbe 3

    Text in Schwarz, Kontrast 15.8:1

  4. Farbe 4

    Text in Schwarz, Kontrast 16.9:1

  5. Farbe 5

    Text in Schwarz, Kontrast 12.4:1

Code

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

CSS-Variablen

:root {
  --palette-1: #cff2ff;
  --palette-2: #a9e4e7;
  --palette-3: #cae8c3;
  --palette-4: #fee2cb;
  --palette-5: #e7badf;
}

Tailwind-Theme

@theme {
  --color-watercolor-1: oklch(94% 0.04 222.3);
  --color-watercolor-2: oklch(88% 0.06 200.1);
  --color-watercolor-3: oklch(89.9% 0.059 139.8);
  --color-watercolor-4: oklch(93% 0.043 61.7);
  --color-watercolor-5: oklch(84% 0.071 332.3);
}

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.

Alle Farbpaletten
  • Pfingstrose

    Rosa in drei Stufen und ein zartes Blattgrün.

  • Sorbet

    Fünf Pastellkugeln: Erdbeere, Aprikose, Zitrone, Minze und Heidelbeere.

  • Wolkenschloss

    Helles Flieder, Himmelblau und Rosa mit einem tieferen Violett.

  • Glace

    Vanille, Pfirsich, Himbeer, Pistazie und Karamell.

  • Pop-Art

    Gelb, Rot und Blau mit Schwarz und Weiss, laut und grafisch.