Skip to content
Musterli

Pastel

Gelato color palette

Vanilla, peach, raspberry, pistachio and caramel.

Open in the palette generator

Lock colors, roll new variations with the space bar and export as image or code.

Colors

Click a value to copy it. Each swatch shows its value in the text color that reads best on it.

  1. Color 1

    Text in black, contrast 18.7:1

  2. Color 2

    Text in black, contrast 15.3:1

  3. Color 3

    Text in black, contrast 12.8:1

  4. Color 4

    Text in black, contrast 14.9:1

  5. Color 5

    Text in black, contrast 5.1:1

Code

The palette as CSS variables for any project and as a theme for Tailwind CSS v4.

CSS variables

:root {
  --palette-1: #fef2cc;
  --palette-2: #fed3c3;
  --palette-3: #fbb8ca;
  --palette-4: #b7e5bf;
  --palette-5: #a9705a;
}

Tailwind theme

@theme {
  --color-gelato-1: oklch(96.1% 0.051 92.6);
  --color-gelato-2: oklch(89.9% 0.053 41.4);
  --color-gelato-3: oklch(84.9% 0.081 1.3);
  --color-gelato-4: oklch(87.9% 0.071 149.9);
  --color-gelato-5: oklch(60% 0.08 41.9);
}

Gradients from this palette

The same colors as a gradient. Each card opens the editor with these colors.

Keep working with the palette

Edit the palette or build a full scale from its most colorful entry.

How to use this palette

Use the lightest color as the background and the darkest for text. The strong colors in between work for buttons, links and highlights. Always check the contrast for text; the notes on the swatches show whether black or white reads better.

Similar palettes

All color palettes

  • Watercolor

    Translucent washes of blue, green, yellow and pink.

  • Peony

    Pink in three steps and a soft leaf green.

  • Sorbet

    Five pastel scoops: strawberry, apricot, lemon, mint and blueberry.

  • Cloud Castle

    Pale lilac, sky blue and pink with a deeper violet.

  • Pop Art

    Yellow, red and blue with black and white, loud and graphic.