Foundation White to Elite Teal Color Palette

About this palette

Foundation White to Elite Teal is a 4-color muted, vintage, gradient palette: #EDF0FF (Foundation White), #BBA37B (Taupe), #7C565F (Royal Fig), #14332F (Elite Teal). It mixes white, yellow, red, turquoise tones and feels warm overall. The strongest text pairing is #EDF0FF on #14332F with a contrast ratio of 11.99:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foundation White	rgb(237, 240, 255)	hsl(230, 100%, 96%)
Taupe	rgb(187, 163, 123)	hsl(37, 32%, 61%)
Royal Fig	rgb(124, 86, 95)	hsl(346, 18%, 41%)
Elite Teal	rgb(20, 51, 47)	hsl(172, 44%, 14%)

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.

Aa11.99:1 Very good#EDF0FF on #14332F
Aa11.99:1 Very good#14332F on #EDF0FF
Aa5.59:1 Good#BBA37B on #14332F
Aa5.59:1 Good#14332F on #BBA37B
Aa5.52:1 Good#EDF0FF on #7C565F
Aa5.52:1 Good#7C565F on #EDF0FF

Color blindness preview

CSS variables

/* Foundation White to Elite Teal — https://swatchly.xyz/palette/edf0ff-bba37b-7c565f-14332f */
:root {
  --foundation-white: #edf0ff;
  --taupe: #bba37b;
  --royal-fig: #7c565f;
  --elite-teal: #14332f;
}

Tailwind CSS v4

/* Foundation White to Elite Teal — https://swatchly.xyz/palette/edf0ff-bba37b-7c565f-14332f */
@theme {
  --color-foundation-white: #edf0ff;
  --color-foundation-white-50: #edf0ff;
  --color-foundation-white-100: #e5e7f1;
  --color-foundation-white-200: #d2d4df;
  --color-foundation-white-300: #bcbeca;
  --color-foundation-white-400: #9d9fad;
  --color-foundation-white-500: #828592;
  --color-foundation-white-600: #696b78;
  --color-foundation-white-700: #525560;
  --color-foundation-white-800: #40424c;
  --color-foundation-white-900: #31323b;
  --color-foundation-white-950: #1e1f25;
  --color-taupe: #bba37b;
  --color-taupe-50: #fff6e7;
  --color-taupe-100: #fbecd3;
  --color-taupe-200: #ebd9bb;
  --color-taupe-300: #d7c2a1;
  --color-taupe-400: #bba37b;
  --color-taupe-500: #9e8760;
  --color-taupe-600: #826b46;
  --color-taupe-700: #685431;
  --color-taupe-800: #524122;
  --color-taupe-900: #403117;
  --color-taupe-950: #281d0b;
  --color-royal-fig: #7c565f;
  --color-royal-fig-50: #fff1f4;
  --color-royal-fig-100: #fee1e7;
  --color-royal-fig-200: #eccad1;
  --color-royal-fig-300: #d6b0b8;
  --color-royal-fig-400: #b78e97;
  --color-royal-fig-500: #99717a;
  --color-royal-fig-600: #7c565f;
  --color-royal-fig-700: #64434b;
  --color-royal-fig-800: #4f333a;
  --color-royal-fig-900: #3e272d;
  --color-royal-fig-950: #28171b;
  --color-elite-teal: #14332f;
  --color-elite-teal-50: #e7faf7;
  --color-elite-teal-100: #dbf1ed;
  --color-elite-teal-200: #c4ded9;
  --color-elite-teal-300: #abc8c3;
  --color-elite-teal-400: #88a8a3;
  --color-elite-teal-500: #6b8c86;
  --color-elite-teal-600: #50706b;
  --color-elite-teal-700: #3b5753;
  --color-elite-teal-800: #2b433f;
  --color-elite-teal-900: #14332f;
  --color-elite-teal-950: #101e1c;
}