Cherry Blossom Palette

CSS variables

:root {
  --color-1: #FFB7C5;
  --color-2: #FFD9E1;
  --color-3: #F78DA7;
  --color-4: #C9184A;
  --color-5: #FFF0F3;
}

Tailwind config

// tailwind.config.js
colors: {
  "cherry-blossom-1": "#FFB7C5",
  "cherry-blossom-2": "#FFD9E1",
  "cherry-blossom-3": "#F78DA7",
  "cherry-blossom-4": "#C9184A",
  "cherry-blossom-5": "#FFF0F3",
}

About this palette

The Cherry Blossom 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.

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.

#FFB7C5Near-black11.54:1AA

#FFD9E1Near-black14.63:1AA

#F78DA7Near-black8.39:1AA

#C9184AWhite5.66:1AA

#FFF0F3Near-black17.10:1AA

These colours on each other

2 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#FFB7C5	#FFD9E1	#F78DA7	#C9184A	#FFF0F3
#FFB7C5	·	1.27Fails	1.38Fails	3.46Large only	1.48Fails
#FFD9E1	1.27Fails	·	1.74Fails	4.38Large only	1.17Fails
#F78DA7	1.38Fails	1.74Fails	·	2.51Fails	2.04Fails
#C9184A	3.46Large only	4.38Large only	2.51Fails	·	5.12AA
#FFF0F3	1.48Fails	1.17Fails	2.04Fails	5.12AA	·

More palettes

Gradients in the same range

Aurora Slate Fade Blush

Cherry Blossom Palette

Related

Gradients in the same range