Peach Beach to Avocado Stone Color Palette

About this palette

Peach Beach to Avocado Stone is a 5-color warm, earthy, vintage palette: #FCCF97 (Peach Beach), #506190 (Sea of Galilee), #D2AE66 (Desert), #518CCE (Marina), #4B3D1D (Avocado Stone). It mixes orange, blue, yellow, brown tones and feels warm overall. The strongest text pairing is #FCCF97 on #4B3D1D with a contrast ratio of 7.31:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peach Beach	rgb(252, 207, 151)	hsl(33, 94%, 79%)
Sea of Galilee	rgb(80, 97, 144)	hsl(224, 29%, 44%)
Desert	rgb(210, 174, 102)	hsl(40, 55%, 61%)
Marina	rgb(81, 140, 206)	hsl(212, 56%, 56%)
Avocado Stone	rgb(75, 61, 29)	hsl(42, 44%, 20%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa7.31:1 Very good#FCCF97 on #4B3D1D
Aa7.31:1 Very good#4B3D1D on #FCCF97
Aa5.03:1 Good#D2AE66 on #4B3D1D
Aa5.03:1 Good#4B3D1D on #D2AE66
Aa4.20:1 Poor#FCCF97 on #506190
Aa4.20:1 Poor#506190 on #FCCF97
Aa3.02:1 Poor#518CCE on #4B3D1D
Aa3.02:1 Poor#4B3D1D on #518CCE

Color blindness preview

CSS variables

/* Peach Beach to Avocado Stone — https://swatchly.xyz/palette/fccf97-506190-d2ae66-518cce-4b3d1d */
:root {
  --peach-beach: #fccf97;
  --sea-of-galilee: #506190;
  --desert: #d2ae66;
  --marina: #518cce;
  --avocado-stone: #4b3d1d;
}

Tailwind CSS v4

/* Peach Beach to Avocado Stone — https://swatchly.xyz/palette/fccf97-506190-d2ae66-518cce-4b3d1d */
@theme {
  --color-peach-beach: #fccf97;
  --color-peach-beach-50: #fff3e5;
  --color-peach-beach-100: #ffe7cb;
  --color-peach-beach-200: #fccf97;
  --color-peach-beach-300: #e0ba8b;
  --color-peach-beach-400: #c29965;
  --color-peach-beach-500: #a77e47;
  --color-peach-beach-600: #8a632e;
  --color-peach-beach-700: #714d1a;
  --color-peach-beach-800: #5a3b0c;
  --color-peach-beach-900: #472d04;
  --color-peach-beach-950: #2e1b01;
  --color-sea-of-galilee: #506190;
  --color-sea-of-galilee-50: #f1f5ff;
  --color-sea-of-galilee-100: #e1e9ff;
  --color-sea-of-galilee-200: #c3d3fc;
  --color-sea-of-galilee-300: #a9bbe9;
  --color-sea-of-galilee-400: #879acb;
  --color-sea-of-galilee-500: #6b7dae;
  --color-sea-of-galilee-600: #506190;
  --color-sea-of-galilee-700: #3e4c75;
  --color-sea-of-galilee-800: #2f3b5e;
  --color-sea-of-galilee-900: #232d4b;
  --color-sea-of-galilee-950: #141c31;
  --color-desert: #d2ae66;
  --color-desert-50: #ffecc7;
  --color-desert-100: #f8dfaf;
  --color-desert-200: #e5c88f;
  --color-desert-300: #d2ae66;
  --color-desert-400: #b4914b;
  --color-desert-500: #9a782e;
  --color-desert-600: #806013;
  --color-desert-700: #694c00;
  --color-desert-800: #543c00;
  --color-desert-900: #432f00;
  --color-desert-950: #2a1d00;
  --color-marina: #518cce;
  --color-marina-50: #eff6ff;
  --color-marina-100: #dfeeff;
  --color-marina-200: #bedcff;
  --color-marina-300: #97c7ff;
  --color-marina-400: #6fa8e8;
  --color-marina-500: #518cce;
  --color-marina-600: #3770af;
  --color-marina-700: #225892;
  --color-marina-800: #134577;
  --color-marina-900: #09345f;
  --color-marina-950: #03203e;
  --color-avocado-stone: #4b3d1d;
  --color-avocado-stone-50: #fef4e0;
  --color-avocado-stone-100: #f5ead4;
  --color-avocado-stone-200: #e3d6bc;
  --color-avocado-stone-300: #cdbfa0;
  --color-avocado-stone-400: #ae9f7d;
  --color-avocado-stone-500: #928261;
  --color-avocado-stone-600: #766847;
  --color-avocado-stone-700: #5e5134;
  --color-avocado-stone-800: #4b3d1d;
  --color-avocado-stone-900: #382f19;
  --color-avocado-stone-950: #231c0d;
}