Beige and Sage to Seashell Color Palette

About this palette

Beige and Sage to Seashell is a 4-color pastel, light palette: #BFC29B (Beige and Sage), #ACDBDA (Catch the Wave), #FDE0FF (Bunny Tail), #FFF3ED (Seashell). It mixes yellow, turquoise, pink, white tones and feels cool overall. The strongest text pairing is #BFC29B on #FFF3ED with a contrast ratio of 1.69:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beige and Sage	rgb(191, 194, 155)	hsl(65, 24%, 68%)
Catch the Wave	rgb(172, 219, 218)	hsl(179, 39%, 77%)
Bunny Tail	rgb(253, 224, 255)	hsl(296, 100%, 94%)
Seashell	rgb(255, 243, 237)	hsl(20, 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

/* Beige and Sage to Seashell — https://swatchly.xyz/palette/bfc29b-acdbda-fde0ff-fff3ed */
:root {
  --beige-and-sage: #bfc29b;
  --catch-the-wave: #acdbda;
  --bunny-tail: #fde0ff;
  --seashell: #fff3ed;
}

Tailwind CSS v4

/* Beige and Sage to Seashell — https://swatchly.xyz/palette/bfc29b-acdbda-fde0ff-fff3ed */
@theme {
  --color-beige-and-sage: #bfc29b;
  --color-beige-and-sage-50: #f4f6e0;
  --color-beige-and-sage-100: #eaecd3;
  --color-beige-and-sage-200: #d6d8ba;
  --color-beige-and-sage-300: #bfc29b;
  --color-beige-and-sage-400: #a0a37e;
  --color-beige-and-sage-500: #858863;
  --color-beige-and-sage-600: #6b6e4a;
  --color-beige-and-sage-700: #555737;
  --color-beige-and-sage-800: #434428;
  --color-beige-and-sage-900: #33351d;
  --color-beige-and-sage-950: #20210f;
  --color-catch-the-wave: #acdbda;
  --color-catch-the-wave-50: #dcf7f6;
  --color-catch-the-wave-100: #ceecec;
  --color-catch-the-wave-200: #acdbda;
  --color-catch-the-wave-300: #9cc4c3;
  --color-catch-the-wave-400: #7ba7a6;
  --color-catch-the-wave-500: #608c8c;
  --color-catch-the-wave-600: #487372;
  --color-catch-the-wave-700: #355c5c;
  --color-catch-the-wave-800: #264949;
  --color-catch-the-wave-900: #1a3938;
  --color-catch-the-wave-950: #0e2323;
  --color-bunny-tail: #fde0ff;
  --color-bunny-tail-50: #fef0ff;
  --color-bunny-tail-100: #fde0ff;
  --color-bunny-tail-200: #e5cfe6;
  --color-bunny-tail-300: #d0b8d1;
  --color-bunny-tail-400: #b197b3;
  --color-bunny-tail-500: #967c98;
  --color-bunny-tail-600: #7b627d;
  --color-bunny-tail-700: #634c64;
  --color-bunny-tail-800: #4e3b50;
  --color-bunny-tail-900: #3d2c3e;
  --color-bunny-tail-950: #261a27;
  --color-seashell: #fff3ed;
  --color-seashell-50: #fff3ed;
  --color-seashell-100: #f1eae6;
  --color-seashell-200: #ded6d2;
  --color-seashell-300: #c9bfba;
  --color-seashell-400: #aa9f9a;
  --color-seashell-500: #8e847e;
  --color-seashell-600: #736964;
  --color-seashell-700: #5c534f;
  --color-seashell-800: #48403c;
  --color-seashell-900: #38312e;
  --color-seashell-950: #231e1c;
}