Beurre Blanc to Foundation White color palette

EDE2BCBeurre Blanc E5B680Cane Sugar AEECD0Seafoam Splashes B8DAA1Fizz EDEBFFFoundation White

About this palette

Beurre Blanc to Foundation White is a 5-color pastel, light palette: #EDE2BC (Beurre Blanc), #E5B680 (Cane Sugar), #AEECD0 (Seafoam Splashes), #B8DAA1 (Fizz), #EDEBFF (Foundation White). It mixes yellow, orange, turquoise, green, white tones and feels balanced overall. The strongest text pairing is #E5B680 on #EDEBFF with a contrast ratio of 1.58:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beurre Blanc	rgb(237, 226, 188)	hsl(47, 58%, 83%)
Cane Sugar	rgb(229, 182, 128)	hsl(32, 66%, 70%)
Seafoam Splashes	rgb(174, 236, 208)	hsl(153, 62%, 80%)
Fizz	rgb(184, 218, 161)	hsl(96, 44%, 74%)
Foundation White	rgb(237, 235, 255)	hsl(246, 100%, 96%)

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.

Color blindness preview

CSS variables

/* Beurre Blanc to Foundation White — https://swatchly.xyz/palette/ede2bc-e5b680-aeecd0-b8daa1-edebff */
:root {
  --beurre-blanc: #ede2bc;
  --cane-sugar: #e5b680;
  --seafoam-splashes: #aeecd0;
  --fizz: #b8daa1;
  --foundation-white: #edebff;
}

Tailwind CSS v4

/* Beurre Blanc to Foundation White — https://swatchly.xyz/palette/ede2bc-e5b680-aeecd0-b8daa1-edebff */
@theme {
  --color-beurre-blanc: #ede2bc;
  --color-beurre-blanc-50: #f4edd7;
  --color-beurre-blanc-100: #ede2bc;
  --color-beurre-blanc-200: #d8d0b3;
  --color-beurre-blanc-300: #c4bb9b;
  --color-beurre-blanc-400: #a79d7a;
  --color-beurre-blanc-500: #8d8360;
  --color-beurre-blanc-600: #746a49;
  --color-beurre-blanc-700: #5e5536;
  --color-beurre-blanc-800: #4a4227;
  --color-beurre-blanc-900: #39331c;
  --color-beurre-blanc-950: #241f0e;
  --color-cane-sugar: #e5b680;
  --color-cane-sugar-50: #fff2e4;
  --color-cane-sugar-100: #ffe6ca;
  --color-cane-sugar-200: #f3d0a8;
  --color-cane-sugar-300: #e5b680;
  --color-cane-sugar-400: #c39764;
  --color-cane-sugar-500: #a87c47;
  --color-cane-sugar-600: #8b622d;
  --color-cane-sugar-700: #724c1a;
  --color-cane-sugar-800: #5b3a0c;
  --color-cane-sugar-900: #482c04;
  --color-cane-sugar-950: #2e1a01;
  --color-seafoam-splashes: #aeecd0;
  --color-seafoam-splashes-50: #e6fff3;
  --color-seafoam-splashes-100: #d5f9e8;
  --color-seafoam-splashes-200: #aeecd0;
  --color-seafoam-splashes-300: #9fd2bb;
  --color-seafoam-splashes-400: #7ab39a;
  --color-seafoam-splashes-500: #5b977d;
  --color-seafoam-splashes-600: #407b63;
  --color-seafoam-splashes-700: #2c624c;
  --color-seafoam-splashes-800: #1c4d3a;
  --color-seafoam-splashes-900: #123c2c;
  --color-seafoam-splashes-950: #07251a;
  --color-fizz: #b8daa1;
  --color-fizz-50: #e1f6d4;
  --color-fizz-100: #d4ecc5;
  --color-fizz-200: #b8daa1;
  --color-fizz-300: #a6c492;
  --color-fizz-400: #87a771;
  --color-fizz-500: #6d8d57;
  --color-fizz-600: #567340;
  --color-fizz-700: #425d2e;
  --color-fizz-800: #334a21;
  --color-fizz-900: #263a16;
  --color-fizz-950: #16240a;
  --color-foundation-white: #edebff;
  --color-foundation-white-50: #f7f6ff;
  --color-foundation-white-100: #edebff;
  --color-foundation-white-200: #d9d8e6;
  --color-foundation-white-300: #c2c0d1;
  --color-foundation-white-400: #a2a0b2;
  --color-foundation-white-500: #868496;
  --color-foundation-white-600: #6c6a7b;
  --color-foundation-white-700: #555362;
  --color-foundation-white-800: #42404e;
  --color-foundation-white-900: #33313c;
  --color-foundation-white-950: #1f1e26;
}