Animal Kingdom to Honey Do Color Palette

About this palette

Animal Kingdom to Honey Do is a 5-color pastel, light, warm palette: #BEC3A4 (Animal Kingdom), #A8E0BC (Big Spender), #F8C8E0 (Sugarwinkle), #BAF2FF (Pale Sky), #ECEEC3 (Honey Do). It mixes green, pink, turquoise, yellow tones and feels warm overall. The strongest text pairing is #BEC3A4 on #ECEEC3 with a contrast ratio of 1.52:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Animal Kingdom	rgb(190, 195, 164)	hsl(70, 21%, 70%)
Big Spender	rgb(168, 224, 188)	hsl(141, 47%, 77%)
Sugarwinkle	rgb(248, 200, 224)	hsl(330, 77%, 88%)
Pale Sky	rgb(186, 242, 255)	hsl(191, 100%, 86%)
Honey Do	rgb(236, 238, 195)	hsl(63, 56%, 85%)

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

/* Animal Kingdom to Honey Do — https://swatchly.xyz/palette/bec3a4-a8e0bc-f8c8e0-baf2ff-eceec3 */
:root {
  --animal-kingdom: #bec3a4;
  --big-spender: #a8e0bc;
  --sugarwinkle: #f8c8e0;
  --pale-sky: #baf2ff;
  --honey-do: #eceec3;
}

Tailwind CSS v4

/* Animal Kingdom to Honey Do — https://swatchly.xyz/palette/bec3a4-a8e0bc-f8c8e0-baf2ff-eceec3 */
@theme {
  --color-animal-kingdom: #bec3a4;
  --color-animal-kingdom-50: #f3f6e5;
  --color-animal-kingdom-100: #e9edd9;
  --color-animal-kingdom-200: #d5d9c1;
  --color-animal-kingdom-300: #bec3a4;
  --color-animal-kingdom-400: #9fa487;
  --color-animal-kingdom-500: #84896b;
  --color-animal-kingdom-600: #6a6e52;
  --color-animal-kingdom-700: #54583e;
  --color-animal-kingdom-800: #41452e;
  --color-animal-kingdom-900: #323522;
  --color-animal-kingdom-950: #1f2113;
  --color-big-spender: #a8e0bc;
  --color-big-spender-50: #d9fae4;
  --color-big-spender-100: #cbf0d8;
  --color-big-spender-200: #a8e0bc;
  --color-big-spender-300: #99c9aa;
  --color-big-spender-400: #77ab8a;
  --color-big-spender-500: #5b9170;
  --color-big-spender-600: #437758;
  --color-big-spender-700: #306044;
  --color-big-spender-800: #224c34;
  --color-big-spender-900: #173b27;
  --color-big-spender-950: #0b2516;
  --color-sugarwinkle: #f8c8e0;
  --color-sugarwinkle-50: #fff1f8;
  --color-sugarwinkle-100: #ffe2f0;
  --color-sugarwinkle-200: #f8c8e0;
  --color-sugarwinkle-300: #dcb4c8;
  --color-sugarwinkle-400: #bf93a9;
  --color-sugarwinkle-500: #a3778e;
  --color-sugarwinkle-600: #875e73;
  --color-sugarwinkle-700: #6d485c;
  --color-sugarwinkle-800: #573748;
  --color-sugarwinkle-900: #442937;
  --color-sugarwinkle-950: #2c1823;
  --color-pale-sky: #baf2ff;
  --color-pale-sky-50: #daf8ff;
  --color-pale-sky-100: #baf2ff;
  --color-pale-sky-200: #b3dce6;
  --color-pale-sky-300: #99c7d2;
  --color-pale-sky-400: #76a9b5;
  --color-pale-sky-500: #598f9a;
  --color-pale-sky-600: #407480;
  --color-pale-sky-700: #2d5d68;
  --color-pale-sky-800: #1e4952;
  --color-pale-sky-900: #133940;
  --color-pale-sky-950: #082329;
  --color-honey-do: #eceec3;
  --color-honey-do-50: #f5f6df;
  --color-honey-do-100: #eceec3;
  --color-honey-do-200: #d8d9ba;
  --color-honey-do-300: #c2c3a0;
  --color-honey-do-400: #a3a47d;
  --color-honey-do-500: #888962;
  --color-honey-do-600: #6d6f49;
  --color-honey-do-700: #575835;
  --color-honey-do-800: #444526;
  --color-honey-do-900: #34351b;
  --color-honey-do-950: #20210e;
}