Whale’s Tale to Hot Fudge color palette

005B82Whale’s Tale C5B2ECPurple Illusion 079EE1Homeworld F4EFADSailor Moonlight 61260BHot Fudge

About this palette

Whale’s Tale to Hot Fudge is a 5-color cool palette: #005B82 (Whale’s Tale), #C5B2EC (Purple Illusion), #079EE1 (Homeworld), #F4EFAD (Sailor Moonlight), #61260B (Hot Fudge). It mixes blue, purple, yellow, brown tones and feels cool overall. The strongest text pairing is #F4EFAD on #61260B with a contrast ratio of 9.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Whale’s Tale	rgb(0, 91, 130)	hsl(198, 100%, 25%)
Purple Illusion	rgb(197, 178, 236)	hsl(260, 60%, 81%)
Homeworld	rgb(7, 158, 225)	hsl(198, 94%, 45%)
Sailor Moonlight	rgb(244, 239, 173)	hsl(56, 76%, 82%)
Hot Fudge	rgb(97, 38, 11)	hsl(19, 80%, 21%)

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.94:1 Very good#F4EFAD on #61260B
Aa9.94:1 Very good#61260B on #F4EFAD
Aa6.31:1 Good#005B82 on #F4EFAD
Aa6.31:1 Good#F4EFAD on #005B82
Aa6.12:1 Good#C5B2EC on #61260B
Aa6.12:1 Good#61260B on #C5B2EC
Aa3.90:1 Poor#079EE1 on #61260B
Aa3.90:1 Poor#61260B on #079EE1

Color blindness preview

CSS variables

/* Whale’s Tale to Hot Fudge — https://swatchly.xyz/palette/005b82-c5b2ec-079ee1-f4efad-61260b */
:root {
  --whale-s-tale: #005b82;
  --purple-illusion: #c5b2ec;
  --homeworld: #079ee1;
  --sailor-moonlight: #f4efad;
  --hot-fudge: #61260b;
}

Tailwind CSS v4

/* Whale’s Tale to Hot Fudge — https://swatchly.xyz/palette/005b82-c5b2ec-079ee1-f4efad-61260b */
@theme {
  --color-whale-s-tale: #005b82;
  --color-whale-s-tale-50: #ebf7ff;
  --color-whale-s-tale-100: #d7efff;
  --color-whale-s-tale-200: #acdfff;
  --color-whale-s-tale-300: #8cc9ef;
  --color-whale-s-tale-400: #65aad3;
  --color-whale-s-tale-500: #458eb8;
  --color-whale-s-tale-600: #29729a;
  --color-whale-s-tale-700: #005b82;
  --color-whale-s-tale-800: #024766;
  --color-whale-s-tale-900: #003750;
  --color-whale-s-tale-950: #002234;
  --color-purple-illusion: #c5b2ec;
  --color-purple-illusion-50: #f5f1ff;
  --color-purple-illusion-100: #ece4ff;
  --color-purple-illusion-200: #daccf9;
  --color-purple-illusion-300: #c5b2ec;
  --color-purple-illusion-400: #a694ca;
  --color-purple-illusion-500: #8b79af;
  --color-purple-illusion-600: #715f93;
  --color-purple-illusion-700: #5b4a79;
  --color-purple-illusion-800: #473962;
  --color-purple-illusion-900: #382b4e;
  --color-purple-illusion-950: #231a32;
  --color-homeworld: #079ee1;
  --color-homeworld-50: #f0f9ff;
  --color-homeworld-100: #e1f3ff;
  --color-homeworld-200: #bee5ff;
  --color-homeworld-300: #90d3ff;
  --color-homeworld-400: #49b8f8;
  --color-homeworld-500: #079ee1;
  --color-homeworld-600: #007fb7;
  --color-homeworld-700: #006492;
  --color-homeworld-800: #004e72;
  --color-homeworld-900: #003b58;
  --color-homeworld-950: #002438;
  --color-sailor-moonlight: #f4efad;
  --color-sailor-moonlight-50: #faf8d4;
  --color-sailor-moonlight-100: #f4efad;
  --color-sailor-moonlight-200: #dedaab;
  --color-sailor-moonlight-300: #c8c48e;
  --color-sailor-moonlight-400: #a9a568;
  --color-sailor-moonlight-500: #8e894a;
  --color-sailor-moonlight-600: #746e31;
  --color-sailor-moonlight-700: #5c571d;
  --color-sailor-moonlight-800: #49440f;
  --color-sailor-moonlight-900: #383406;
  --color-sailor-moonlight-950: #232002;
  --color-hot-fudge: #61260b;
  --color-hot-fudge-50: #fff2ed;
  --color-hot-fudge-100: #ffe5db;
  --color-hot-fudge-200: #ffcab5;
  --color-hot-fudge-300: #edaf97;
  --color-hot-fudge-400: #cf8c71;
  --color-hot-fudge-500: #b16e54;
  --color-hot-fudge-600: #91533a;
  --color-hot-fudge-700: #743d27;
  --color-hot-fudge-800: #61260b;
  --color-hot-fudge-900: #472010;
  --color-hot-fudge-950: #2d1207;
}