Skip to content

Rainbow Pastel Palette

CSS variables
:root {
  --color-1: #FFADAD;
  --color-2: #FFD6A5;
  --color-3: #FDFFB6;
  --color-4: #CAFFBF;
  --color-5: #9BF6FF;
  --color-6: #A0C4FF;
}
Tailwind config
// tailwind.config.js
colors: {
  "rainbow-pastel-1": "#FFADAD",
  "rainbow-pastel-2": "#FFD6A5",
  "rainbow-pastel-3": "#FDFFB6",
  "rainbow-pastel-4": "#CAFFBF",
  "rainbow-pastel-5": "#9BF6FF",
  "rainbow-pastel-6": "#A0C4FF",
}
About this palette

The Rainbow Pastel palette is a curated set of 6 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.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

Aa
#FFADADNear-black10.65:1AA
Aa
#FFD6A5Near-black13.87:1AA
Aa
#FDFFB6Near-black18.13:1AA
Aa
#CAFFBFNear-black16.71:1AA
Aa
#9BF6FFNear-black15.31:1AA
Aa
#A0C4FFNear-black10.65:1AA
These colours on each other

None of the 30 combinations inside this palette reach 4.5:1, so pair its colours with white or near-black rather than with each other.

text \\ background#FFADAD#FFD6A5#FDFFB6#CAFFBF#9BF6FF#A0C4FF
#FFADAD1.30Fails1.70Fails1.57Fails1.44Fails1.00Fails
#FFD6A51.30Fails1.31Fails1.20Fails1.10Fails1.30Fails
#FDFFB61.70Fails1.31Fails1.09Fails1.18Fails1.70Fails
#CAFFBF1.57Fails1.20Fails1.09Fails1.09Fails1.57Fails
#9BF6FF1.44Fails1.10Fails1.18Fails1.09Fails1.44Fails
#A0C4FF1.00Fails1.30Fails1.70Fails1.57Fails1.44Fails
More palettes

Related

Gradients in the same range

✓ Copied