Foundation White to Siren Color Palette

About this palette

Foundation White to Siren is a 5-color muted, cool palette: #F4EDFF (Foundation White), #8DC1AA (Seaborn), #A381AA (Heart Potion), #40614E (Ethereal Woods), #622836 (Siren). It mixes white, turquoise, purple, green, red tones and feels cool overall. The strongest text pairing is #F4EDFF on #622836 with a contrast ratio of 9.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foundation White	rgb(244, 237, 255)	hsl(263, 100%, 96%)
Seaborn	rgb(141, 193, 170)	hsl(153, 30%, 65%)
Heart Potion	rgb(163, 129, 170)	hsl(290, 19%, 59%)
Ethereal Woods	rgb(64, 97, 78)	hsl(145, 20%, 32%)
Siren	rgb(98, 40, 54)	hsl(346, 42%, 27%)

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.

Aa9.81:1 Very good#F4EDFF on #622836
Aa9.81:1 Very good#622836 on #F4EDFF
Aa6.06:1 Good#F4EDFF on #40614E
Aa6.06:1 Good#40614E on #F4EDFF
Aa5.51:1 Good#8DC1AA on #622836
Aa5.51:1 Good#622836 on #8DC1AA
Aa3.40:1 Poor#8DC1AA on #40614E
Aa3.40:1 Poor#40614E on #8DC1AA

Color blindness preview

CSS variables

/* Foundation White to Siren — https://swatchly.xyz/palette/f4edff-8dc1aa-a381aa-40614e-622836 */
:root {
  --foundation-white: #f4edff;
  --seaborn: #8dc1aa;
  --heart-potion: #a381aa;
  --ethereal-woods: #40614e;
  --siren: #622836;
}

Tailwind CSS v4

/* Foundation White to Siren — https://swatchly.xyz/palette/f4edff-8dc1aa-a381aa-40614e-622836 */
@theme {
  --color-foundation-white: #f4edff;
  --color-foundation-white-50: #f4edff;
  --color-foundation-white-100: #eae5f1;
  --color-foundation-white-200: #d7d2df;
  --color-foundation-white-300: #c1bccb;
  --color-foundation-white-400: #a39dad;
  --color-foundation-white-500: #888292;
  --color-foundation-white-600: #6f6978;
  --color-foundation-white-700: #585260;
  --color-foundation-white-800: #45404c;
  --color-foundation-white-900: #35313b;
  --color-foundation-white-950: #211e25;
  --color-seaborn: #8dc1aa;
  --color-seaborn-50: #d7f7e8;
  --color-seaborn-100: #c8ecdb;
  --color-seaborn-200: #aed7c4;
  --color-seaborn-300: #8dc1aa;
  --color-seaborn-400: #71a38e;
  --color-seaborn-500: #588a75;
  --color-seaborn-600: #41715d;
  --color-seaborn-700: #2f5c4a;
  --color-seaborn-800: #22493a;
  --color-seaborn-900: #183a2d;
  --color-seaborn-950: #0c251b;
  --color-heart-potion: #a381aa;
  --color-heart-potion-50: #fdf3ff;
  --color-heart-potion-100: #fbe6ff;
  --color-heart-potion-200: #ecd2f1;
  --color-heart-potion-300: #d9bbdf;
  --color-heart-potion-400: #bd9cc3;
  --color-heart-potion-500: #a381aa;
  --color-heart-potion-600: #86658d;
  --color-heart-potion-700: #6c4e72;
  --color-heart-potion-800: #553b5b;
  --color-heart-potion-900: #422c46;
  --color-heart-potion-950: #291a2d;
  --color-ethereal-woods: #40614e;
  --color-ethereal-woods-50: #e7fbee;
  --color-ethereal-woods-100: #dbf2e4;
  --color-ethereal-woods-200: #c5e0cf;
  --color-ethereal-woods-300: #accbb8;
  --color-ethereal-woods-400: #8bad98;
  --color-ethereal-woods-500: #6f927d;
  --color-ethereal-woods-600: #567764;
  --color-ethereal-woods-700: #40614e;
  --color-ethereal-woods-800: #314c3c;
  --color-ethereal-woods-900: #243b2e;
  --color-ethereal-woods-950: #14251b;
  --color-siren: #622836;
  --color-siren-50: #fff1f3;
  --color-siren-100: #ffe3e7;
  --color-siren-200: #fdc7d0;
  --color-siren-300: #eaadb8;
  --color-siren-400: #cd8a97;
  --color-siren-500: #b06e7b;
  --color-siren-600: #915360;
  --color-siren-700: #753e4a;
  --color-siren-800: #622836;
  --color-siren-900: #49212a;
  --color-siren-950: #2e1219;
}