Start generating

Elite Teal to Foundation White color palette

143234Elite Teal3B6265Mediterranea6E6E54Herbal WhispersA9A279Olive TreeE1B2B3SakuraF0EFFFFoundation White
Open in generator Export PNG, PDF, ASE…

About this palette

Elite Teal to Foundation White is a 6-color muted, vintage palette: #143234 (Elite Teal), #3B6265 (Mediterranea), #6E6E54 (Herbal Whispers), #A9A279 (Olive Tree), #E1B2B3 (Sakura), #F0EFFF (Foundation White). It mixes turquoise, brown, yellow, pink, white tones and feels warm overall. The strongest text pairing is #143234 on #F0EFFF with a contrast ratio of 12.04:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Elite Tealrgb(20, 50, 52)hsl(184, 44%, 14%)
Mediterraneargb(59, 98, 101)hsl(184, 26%, 31%)
Herbal Whispersrgb(110, 110, 84)hsl(60, 13%, 38%)
Olive Treergb(169, 162, 121)hsl(51, 22%, 57%)
Sakurargb(225, 178, 179)hsl(359, 44%, 79%)
Foundation Whitergb(240, 239, 255)hsl(244, 100%, 97%)

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.

  • Aa12.04:1 Super#143234 on #F0EFFF
  • Aa12.04:1 Super#F0EFFF on #143234
  • Aa7.31:1 Very good#143234 on #E1B2B3
  • Aa7.31:1 Very good#E1B2B3 on #143234
  • Aa5.93:1 Good#3B6265 on #F0EFFF
  • Aa5.93:1 Good#F0EFFF on #3B6265
  • Aa5.30:1 Good#143234 on #A9A279
  • Aa5.30:1 Good#A9A279 on #143234

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Elite Teal to Foundation White — https://swatchly.xyz/palette/143234-3b6265-6e6e54-a9a279-e1b2b3-f0efff */
:root {
  --elite-teal: #143234;
  --mediterranea: #3b6265;
  --herbal-whispers: #6e6e54;
  --olive-tree: #a9a279;
  --sakura: #e1b2b3;
  --foundation-white: #f0efff;
}

Tailwind CSS v4

/* Elite Teal to Foundation White — https://swatchly.xyz/palette/143234-3b6265-6e6e54-a9a279-e1b2b3-f0efff */
@theme {
  --color-elite-teal: #143234;
  --color-elite-teal-50: #e7f9fb;
  --color-elite-teal-100: #dbf0f1;
  --color-elite-teal-200: #c4dddf;
  --color-elite-teal-300: #abc7c9;
  --color-elite-teal-400: #88a7a9;
  --color-elite-teal-500: #6b8b8d;
  --color-elite-teal-600: #506f71;
  --color-elite-teal-700: #3b5658;
  --color-elite-teal-800: #2a4243;
  --color-elite-teal-900: #143234;
  --color-elite-teal-950: #101d1e;
  --color-mediterranea: #3b6265;
  --color-mediterranea-50: #e3fafc;
  --color-mediterranea-100: #d7f1f3;
  --color-mediterranea-200: #c1dfe2;
  --color-mediterranea-300: #a8cbcd;
  --color-mediterranea-400: #86adb0;
  --color-mediterranea-500: #6a9295;
  --color-mediterranea-600: #51787b;
  --color-mediterranea-700: #3b6265;
  --color-mediterranea-800: #2c4d4f;
  --color-mediterranea-900: #203b3d;
  --color-mediterranea-950: #112527;
  --color-herbal-whispers: #6e6e54;
  --color-herbal-whispers-50: #f6f6e6;
  --color-herbal-whispers-100: #eceddb;
  --color-herbal-whispers-200: #d9d9c4;
  --color-herbal-whispers-300: #c3c3ab;
  --color-herbal-whispers-400: #a4a489;
  --color-herbal-whispers-500: #88886e;
  --color-herbal-whispers-600: #6e6e54;
  --color-herbal-whispers-700: #575740;
  --color-herbal-whispers-800: #444430;
  --color-herbal-whispers-900: #343423;
  --color-herbal-whispers-950: #202014;
  --color-olive-tree: #a9a279;
  --color-olive-tree-50: #faf6de;
  --color-olive-tree-100: #f0ecd1;
  --color-olive-tree-200: #ddd8b9;
  --color-olive-tree-300: #c7c19e;
  --color-olive-tree-400: #a9a279;
  --color-olive-tree-500: #8e875f;
  --color-olive-tree-600: #736c46;
  --color-olive-tree-700: #5c5633;
  --color-olive-tree-800: #484324;
  --color-olive-tree-900: #383319;
  --color-olive-tree-950: #23200d;
  --color-sakura: #e1b2b3;
  --color-sakura-50: #fff0f1;
  --color-sakura-100: #ffe2e3;
  --color-sakura-200: #f0cccd;
  --color-sakura-300: #e1b2b3;
  --color-sakura-400: #bf9495;
  --color-sakura-500: #a4787a;
  --color-sakura-600: #885f60;
  --color-sakura-700: #6e494b;
  --color-sakura-800: #583839;
  --color-sakura-900: #452a2b;
  --color-sakura-950: #2d191a;
  --color-foundation-white: #f0efff;
  --color-foundation-white-50: #f0efff;
  --color-foundation-white-100: #e7e6f1;
  --color-foundation-white-200: #d4d3df;
  --color-foundation-white-300: #bebdca;
  --color-foundation-white-400: #9f9ead;
  --color-foundation-white-500: #858492;
  --color-foundation-white-600: #6b6a78;
  --color-foundation-white-700: #555460;
  --color-foundation-white-800: #42414c;
  --color-foundation-white-900: #32323b;
  --color-foundation-white-950: #1f1e25;
}

Similar palettes