Beach Palette

CSS variables

:root {
  --color-1: #F6E4C8;
  --color-2: #EAC8A0;
  --color-3: #63C7D6;
  --color-4: #1D7A8A;
  --color-5: #FFFDF7;
}

Tailwind config

// tailwind.config.js
colors: {
  "beach-1": "#F6E4C8",
  "beach-2": "#EAC8A0",
  "beach-3": "#63C7D6",
  "beach-4": "#1D7A8A",
  "beach-5": "#FFFDF7",
}

About this palette

The Beach 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.

#F6E4C8Near-black15.16:1AA

#EAC8A0Near-black11.94:1AA

#63C7D6Near-black9.60:1AA

#1D7A8AWhite5.00:1AA

#FFFDF7Near-black18.57: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	#F6E4C8	#EAC8A0	#63C7D6	#1D7A8A	#FFFDF7
#F6E4C8	·	1.27Fails	1.58Fails	4.01Large only	1.23Fails
#EAC8A0	1.27Fails	·	1.24Fails	3.16Large only	1.56Fails
#63C7D6	1.58Fails	1.24Fails	·	2.54Fails	1.93Fails
#1D7A8A	4.01Large only	3.16Large only	2.54Fails	·	4.91AA
#FFFDF7	1.23Fails	1.56Fails	1.93Fails	4.91AA	·

More palettes

Gradients in the same range

Sky Halo Spotlight

Beach Palette

Related

Gradients in the same range