Baba Ganoush to Cotton Ball Color Palette

About this palette

Baba Ganoush to Cotton Ball is a 5-color pastel, light palette: #EABC88 (Baba Ganoush), #C3E1A6 (Basil Smash), #B6E0FF (Broad Daylight), #FDEDC7 (Biscuit), #EEFAFF (Cotton Ball). It mixes orange, green, blue, white tones and feels balanced overall. The strongest text pairing is #EABC88 on #EEFAFF with a contrast ratio of 1.64:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baba Ganoush	rgb(234, 188, 136)	hsl(32, 70%, 73%)
Basil Smash	rgb(195, 225, 166)	hsl(91, 50%, 77%)
Broad Daylight	rgb(182, 224, 255)	hsl(205, 100%, 86%)
Biscuit	rgb(253, 237, 199)	hsl(42, 93%, 89%)
Cotton Ball	rgb(238, 250, 255)	hsl(198, 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.

Color blindness preview

CSS variables

/* Baba Ganoush to Cotton Ball — https://swatchly.xyz/palette/eabc88-c3e1a6-b6e0ff-fdedc7-eefaff */
:root {
  --baba-ganoush: #eabc88;
  --basil-smash: #c3e1a6;
  --broad-daylight: #b6e0ff;
  --biscuit: #fdedc7;
  --cotton-ball: #eefaff;
}

Tailwind CSS v4

/* Baba Ganoush to Cotton Ball — https://swatchly.xyz/palette/eabc88-c3e1a6-b6e0ff-fdedc7-eefaff */
@theme {
  --color-baba-ganoush: #eabc88;
  --color-baba-ganoush-50: #fff6ec;
  --color-baba-ganoush-100: #ffebd4;
  --color-baba-ganoush-200: #f7d5b0;
  --color-baba-ganoush-300: #eabc88;
  --color-baba-ganoush-400: #c79c6c;
  --color-baba-ganoush-500: #ab804d;
  --color-baba-ganoush-600: #8d6433;
  --color-baba-ganoush-700: #734e1f;
  --color-baba-ganoush-800: #5b3b10;
  --color-baba-ganoush-900: #472c07;
  --color-baba-ganoush-950: #2e1a02;
  --color-basil-smash: #c3e1a6;
  --color-basil-smash-50: #e9fbd9;
  --color-basil-smash-100: #def1cc;
  --color-basil-smash-200: #c3e1a6;
  --color-basil-smash-300: #b0c997;
  --color-basil-smash-400: #8fab74;
  --color-basil-smash-500: #749058;
  --color-basil-smash-600: #5b7540;
  --color-basil-smash-700: #465e2d;
  --color-basil-smash-800: #364a1f;
  --color-basil-smash-900: #283914;
  --color-basil-smash-950: #172409;
  --color-broad-daylight: #b6e0ff;
  --color-broad-daylight-50: #eff8ff;
  --color-broad-daylight-100: #ddf0ff;
  --color-broad-daylight-200: #b6e0ff;
  --color-broad-daylight-300: #a5c8e2;
  --color-broad-daylight-400: #82a8c5;
  --color-broad-daylight-500: #658da9;
  --color-broad-daylight-600: #4b718c;
  --color-broad-daylight-700: #375a72;
  --color-broad-daylight-800: #27465b;
  --color-broad-daylight-900: #1c3648;
  --color-broad-daylight-950: #0f212e;
  --color-biscuit: #fdedc7;
  --color-biscuit-50: #fff7e4;
  --color-biscuit-100: #fdedc7;
  --color-biscuit-200: #e4d9be;
  --color-biscuit-300: #cfc2a3;
  --color-biscuit-400: #b0a27f;
  --color-biscuit-500: #948663;
  --color-biscuit-600: #796b49;
  --color-biscuit-700: #615435;
  --color-biscuit-800: #4c4126;
  --color-biscuit-900: #3b321b;
  --color-biscuit-950: #251e0e;
  --color-cotton-ball: #eefaff;
  --color-cotton-ball-50: #eefaff;
  --color-cotton-ball-100: #e7eff2;
  --color-cotton-ball-200: #d2dbde;
  --color-cotton-ball-300: #bac4c8;
  --color-cotton-ball-400: #9aa4a9;
  --color-cotton-ball-500: #7e898d;
  --color-cotton-ball-600: #636e72;
  --color-cotton-ball-700: #4e575b;
  --color-cotton-ball-800: #3c4447;
  --color-cotton-ball-900: #2d3437;
  --color-cotton-ball-950: #1b2022;
}