Cookie Dough to Feverish Color Palette

About this palette

Cookie Dough to Feverish is a 5-color warm palette: #A46D00 (Cookie Dough), #044266 (Poseidon), #0C797A (Prismarine), #FF9DBA (Pastel Magenta), #DE6278 (Feverish). It mixes brown, blue, turquoise, pink, red tones and feels warm overall. The strongest text pairing is #044266 on #FF9DBA with a contrast ratio of 5.46:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cookie Dough	rgb(164, 109, 0)	hsl(40, 100%, 32%)
Poseidon	rgb(4, 66, 102)	hsl(202, 92%, 21%)
Prismarine	rgb(12, 121, 122)	hsl(181, 82%, 26%)
Pastel Magenta	rgb(255, 157, 186)	hsl(342, 100%, 81%)
Feverish	rgb(222, 98, 120)	hsl(349, 65%, 63%)

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.

Aa5.46:1 Good#044266 on #FF9DBA
Aa5.46:1 Good#FF9DBA on #044266
Aa3.10:1 Poor#044266 on #DE6278
Aa3.10:1 Poor#DE6278 on #044266

Color blindness preview

CSS variables

/* Cookie Dough to Feverish — https://swatchly.xyz/palette/a46d00-044266-0c797a-ff9dba-de6278 */
:root {
  --cookie-dough: #a46d00;
  --poseidon: #044266;
  --prismarine: #0c797a;
  --pastel-magenta: #ff9dba;
  --feverish: #de6278;
}

Tailwind CSS v4

/* Cookie Dough to Feverish — https://swatchly.xyz/palette/a46d00-044266-0c797a-ff9dba-de6278 */
@theme {
  --color-cookie-dough: #a46d00;
  --color-cookie-dough-50: #fff0de;
  --color-cookie-dough-100: #ffe2bb;
  --color-cookie-dough-200: #f6c889;
  --color-cookie-dough-300: #e2ae65;
  --color-cookie-dough-400: #c28b36;
  --color-cookie-dough-500: #a46d00;
  --color-cookie-dough-600: #855700;
  --color-cookie-dough-700: #6a4500;
  --color-cookie-dough-800: #543600;
  --color-cookie-dough-900: #422900;
  --color-cookie-dough-950: #2b1900;
  --color-poseidon: #044266;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #daeeff;
  --color-poseidon-200: #b4ddfe;
  --color-poseidon-300: #97c6eb;
  --color-poseidon-400: #72a6ce;
  --color-poseidon-500: #548ab2;
  --color-poseidon-600: #3a6e94;
  --color-poseidon-700: #265678;
  --color-poseidon-800: #044266;
  --color-poseidon-900: #0e324b;
  --color-poseidon-950: #061f30;
  --color-prismarine: #0c797a;
  --color-prismarine-50: #d4ffff;
  --color-prismarine-100: #c2f7f6;
  --color-prismarine-200: #a4e5e4;
  --color-prismarine-300: #84cfcf;
  --color-prismarine-400: #5ab0b1;
  --color-prismarine-500: #379595;
  --color-prismarine-600: #0c797a;
  --color-prismarine-700: #006061;
  --color-prismarine-800: #004b4c;
  --color-prismarine-900: #003a3b;
  --color-prismarine-950: #002525;
  --color-pastel-magenta: #ff9dba;
  --color-pastel-magenta-50: #ffeff3;
  --color-pastel-magenta-100: #ffe1e8;
  --color-pastel-magenta-200: #ffc3d3;
  --color-pastel-magenta-300: #ff9dba;
  --color-pastel-magenta-400: #db809b;
  --color-pastel-magenta-500: #bf6380;
  --color-pastel-magenta-600: #a14a67;
  --color-pastel-magenta-700: #843651;
  --color-pastel-magenta-800: #6b263f;
  --color-pastel-magenta-900: #551b30;
  --color-pastel-magenta-950: #380e1d;
  --color-feverish: #de6278;
  --color-feverish-50: #fff4f5;
  --color-feverish-100: #ffe9eb;
  --color-feverish-200: #ffcfd4;
  --color-feverish-300: #ffafb9;
  --color-feverish-400: #f78093;
  --color-feverish-500: #de6278;
  --color-feverish-600: #bc445d;
  --color-feverish-700: #9c2c46;
  --color-feverish-800: #7f1a34;
  --color-feverish-900: #640e26;
  --color-feverish-950: #420415;
}