Coffee Whip to Crown Jewels color palette

DD9E52Coffee Whip 36668CMississippi River CBDFBCAmbrosia 163147Sea of Stars 8C6DA7Crown Jewels

About this palette

Coffee Whip to Crown Jewels is a 5-color cool palette: #DD9E52 (Coffee Whip), #36668C (Mississippi River), #CBDFBC (Ambrosia), #163147 (Sea of Stars), #8C6DA7 (Crown Jewels). It mixes orange, blue, green, purple tones and feels cool overall. The strongest text pairing is #CBDFBC on #163147 with a contrast ratio of 9.47:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coffee Whip	rgb(221, 158, 82)	hsl(33, 67%, 59%)
Mississippi River	rgb(54, 102, 140)	hsl(207, 44%, 38%)
Ambrosia	rgb(203, 223, 188)	hsl(94, 35%, 81%)
Sea of Stars	rgb(22, 49, 71)	hsl(207, 53%, 18%)
Crown Jewels	rgb(140, 109, 167)	hsl(272, 25%, 54%)

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.

Aa9.47:1 Very good#CBDFBC on #163147
Aa9.47:1 Very good#163147 on #CBDFBC
Aa5.81:1 Good#DD9E52 on #163147
Aa5.81:1 Good#163147 on #DD9E52
Aa4.31:1 Poor#36668C on #CBDFBC
Aa4.31:1 Poor#CBDFBC on #36668C
Aa3.11:1 Poor#163147 on #8C6DA7
Aa3.11:1 Poor#8C6DA7 on #163147

Color blindness preview

CSS variables

/* Coffee Whip to Crown Jewels — https://swatchly.xyz/palette/dd9e52-36668c-cbdfbc-163147-8c6da7 */
:root {
  --coffee-whip: #dd9e52;
  --mississippi-river: #36668c;
  --ambrosia: #cbdfbc;
  --sea-of-stars: #163147;
  --crown-jewels: #8c6da7;
}

Tailwind CSS v4

/* Coffee Whip to Crown Jewels — https://swatchly.xyz/palette/dd9e52-36668c-cbdfbc-163147-8c6da7 */
@theme {
  --color-coffee-whip: #dd9e52;
  --color-coffee-whip-50: #fff8f0;
  --color-coffee-whip-100: #ffeedc;
  --color-coffee-whip-200: #ffd7ac;
  --color-coffee-whip-300: #f4bf84;
  --color-coffee-whip-400: #dd9e52;
  --color-coffee-whip-500: #bd8033;
  --color-coffee-whip-600: #9e6407;
  --color-coffee-whip-700: #7e4e00;
  --color-coffee-whip-800: #623c00;
  --color-coffee-whip-900: #4b2c00;
  --color-coffee-whip-950: #2f1a00;
  --color-mississippi-river: #36668c;
  --color-mississippi-river-50: #edf7ff;
  --color-mississippi-river-100: #d7ecff;
  --color-mississippi-river-200: #b2d9fa;
  --color-mississippi-river-300: #95c1e6;
  --color-mississippi-river-400: #70a0c8;
  --color-mississippi-river-500: #5282aa;
  --color-mississippi-river-600: #36668c;
  --color-mississippi-river-700: #275171;
  --color-mississippi-river-800: #1b3f5b;
  --color-mississippi-river-900: #123149;
  --color-mississippi-river-950: #081e2f;
  --color-ambrosia: #cbdfbc;
  --color-ambrosia-50: #eef9e6;
  --color-ambrosia-100: #e3f0da;
  --color-ambrosia-200: #cbdfbc;
  --color-ambrosia-300: #b6c7aa;
  --color-ambrosia-400: #96a888;
  --color-ambrosia-500: #7b8d6d;
  --color-ambrosia-600: #617253;
  --color-ambrosia-700: #4b5b3f;
  --color-ambrosia-800: #3a472f;
  --color-ambrosia-900: #2c3722;
  --color-ambrosia-950: #1a2213;
  --color-sea-of-stars: #163147;
  --color-sea-of-stars-50: #edf6ff;
  --color-sea-of-stars-100: #dbeeff;
  --color-sea-of-stars-200: #c3dbf0;
  --color-sea-of-stars-300: #aac5dc;
  --color-sea-of-stars-400: #87a4be;
  --color-sea-of-stars-500: #6b88a2;
  --color-sea-of-stars-600: #516d85;
  --color-sea-of-stars-700: #3c556b;
  --color-sea-of-stars-800: #2b4154;
  --color-sea-of-stars-900: #163147;
  --color-sea-of-stars-950: #111d28;
  --color-crown-jewels: #8c6da7;
  --color-crown-jewels-50: #f7f0ff;
  --color-crown-jewels-100: #f0e0ff;
  --color-crown-jewels-200: #dfc6f7;
  --color-crown-jewels-300: #c9ace3;
  --color-crown-jewels-400: #a98ac5;
  --color-crown-jewels-500: #8c6da7;
  --color-crown-jewels-600: #72558b;
  --color-crown-jewels-700: #5c4272;
  --color-crown-jewels-800: #49325c;
  --color-crown-jewels-900: #3a264a;
  --color-crown-jewels-950: #251631;
}