Pastel Palette

CSS variables

:root {
  --color-1: #F9C5D1;
  --color-2: #A2E1DB;
  --color-3: #FFE5A0;
  --color-4: #C5A3FF;
  --color-5: #B5EAD7;
}

Tailwind config

// tailwind.config.js
colors: {
  "pastel-1": "#F9C5D1",
  "pastel-2": "#A2E1DB",
  "pastel-3": "#FFE5A0",
  "pastel-4": "#C5A3FF",
  "pastel-5": "#B5EAD7",
}

About this palette

The Pastel palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

More palettes