Amazon Queen to Animal Kingdom color palette

968E56Amazon Queen 92593DCoconut C4906CButterum 544970Haunted Candelabra 0D2B36Oceanic Noir BDC09CAnimal Kingdom

Open in generator Export PNG, PDF, ASE…

About this palette

Amazon Queen to Animal Kingdom is a 6-color warm, earthy, vintage palette: #968E56 (Amazon Queen), #92593D (Coconut), #C4906C (Butterum), #544970 (Haunted Candelabra), #0D2B36 (Oceanic Noir), #BDC09C (Animal Kingdom). It mixes yellow, brown, orange, purple, blue tones and feels warm overall. The strongest text pairing is #0D2B36 on #BDC09C with a contrast ratio of 7.90:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Amazon Queen	rgb(150, 142, 86)	hsl(52, 27%, 46%)
Coconut	rgb(146, 89, 61)	hsl(20, 41%, 41%)
Butterum	rgb(196, 144, 108)	hsl(25, 43%, 60%)
Haunted Candelabra	rgb(84, 73, 112)	hsl(257, 21%, 36%)
Oceanic Noir	rgb(13, 43, 54)	hsl(196, 61%, 13%)
Animal Kingdom	rgb(189, 192, 156)	hsl(65, 22%, 68%)

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.

Aa7.90:1 Very good#0D2B36 on #BDC09C
Aa7.90:1 Very good#BDC09C on #0D2B36
Aa5.33:1 Good#C4906C on #0D2B36
Aa5.33:1 Good#0D2B36 on #C4906C
Aa4.45:1 Poor#968E56 on #0D2B36
Aa4.45:1 Poor#0D2B36 on #968E56
Aa4.36:1 Poor#544970 on #BDC09C
Aa4.36:1 Poor#BDC09C on #544970

Color blindness preview

CSS variables

/* Amazon Queen to Animal Kingdom — https://swatchly.xyz/palette/968e56-92593d-c4906c-544970-0d2b36-bdc09c */
:root {
  --amazon-queen: #968e56;
  --coconut: #92593d;
  --butterum: #c4906c;
  --haunted-candelabra: #544970;
  --oceanic-noir: #0d2b36;
  --animal-kingdom: #bdc09c;
}

Tailwind CSS v4

/* Amazon Queen to Animal Kingdom — https://swatchly.xyz/palette/968e56-92593d-c4906c-544970-0d2b36-bdc09c */
@theme {
  --color-amazon-queen: #968e56;
  --color-amazon-queen-50: #fcf8d8;
  --color-amazon-queen-100: #f4efcc;
  --color-amazon-queen-200: #e2ddb3;
  --color-amazon-queen-300: #cec797;
  --color-amazon-queen-400: #b0a973;
  --color-amazon-queen-500: #968e56;
  --color-amazon-queen-600: #7a723b;
  --color-amazon-queen-700: #625a27;
  --color-amazon-queen-800: #4d4618;
  --color-amazon-queen-900: #3b350d;
  --color-amazon-queen-950: #252105;
  --color-coconut: #92593d;
  --color-coconut-50: #fff2ec;
  --color-coconut-100: #ffe4d8;
  --color-coconut-200: #fbcab3;
  --color-coconut-300: #e9b197;
  --color-coconut-400: #cb9074;
  --color-coconut-500: #af7457;
  --color-coconut-600: #92593d;
  --color-coconut-700: #77452c;
  --color-coconut-800: #5f341e;
  --color-coconut-900: #4b2714;
  --color-coconut-950: #311609;
  --color-butterum: #c4906c;
  --color-butterum-50: #fff0e7;
  --color-butterum-100: #ffe2cf;
  --color-butterum-200: #f5cbae;
  --color-butterum-300: #e1b292;
  --color-butterum-400: #c4906c;
  --color-butterum-500: #a87652;
  --color-butterum-600: #8c5c3b;
  --color-butterum-700: #724829;
  --color-butterum-800: #5c371b;
  --color-butterum-900: #492912;
  --color-butterum-950: #301908;
  --color-haunted-candelabra: #544970;
  --color-haunted-candelabra-50: #f6f3ff;
  --color-haunted-candelabra-100: #ede7ff;
  --color-haunted-candelabra-200: #d9d1f3;
  --color-haunted-candelabra-300: #c2b8df;
  --color-haunted-candelabra-400: #a297c2;
  --color-haunted-candelabra-500: #867ba5;
  --color-haunted-candelabra-600: #6b6088;
  --color-haunted-candelabra-700: #544970;
  --color-haunted-candelabra-800: #413957;
  --color-haunted-candelabra-900: #322b45;
  --color-haunted-candelabra-950: #1f1a2c;
  --color-oceanic-noir: #0d2b36;
  --color-oceanic-noir-50: #e8f8ff;
  --color-oceanic-noir-100: #daeff8;
  --color-oceanic-noir-200: #c4dce7;
  --color-oceanic-noir-300: #aac6d2;
  --color-oceanic-noir-400: #88a7b4;
  --color-oceanic-noir-500: #6e8d9b;
  --color-oceanic-noir-600: #567481;
  --color-oceanic-noir-700: #425f6a;
  --color-oceanic-noir-800: #334c57;
  --color-oceanic-noir-900: #273d46;
  --color-oceanic-noir-950: #0d2b36;
  --color-animal-kingdom: #bdc09c;
  --color-animal-kingdom-50: #f3f5e0;
  --color-animal-kingdom-100: #e8ebd3;
  --color-animal-kingdom-200: #d4d7bb;
  --color-animal-kingdom-300: #bdc09c;
  --color-animal-kingdom-400: #9ea17f;
  --color-animal-kingdom-500: #848765;
  --color-animal-kingdom-600: #6a6d4c;
  --color-animal-kingdom-700: #555739;
  --color-animal-kingdom-800: #42442a;
  --color-animal-kingdom-900: #33351f;
  --color-animal-kingdom-950: #202111;
}