Start generating

Whale’s Tale to Sugar Chic color palette

005B85Whale’s Tale4A709CNaval7884B3KimonoA598CAEnchanted LilacD2ACE2Blushing SkyFFC0FASugar Chic
Open in generator Export PNG, PDF, ASE…

About this palette

Whale’s Tale to Sugar Chic is a 6-color cool, gradient palette: #005B85 (Whale’s Tale), #4A709C (Naval), #7884B3 (Kimono), #A598CA (Enchanted Lilac), #D2ACE2 (Blushing Sky), #FFC0FA (Sugar Chic). It mixes blue, purple, pink tones and feels cool overall. The strongest text pairing is #005B85 on #FFC0FA with a contrast ratio of 5.00:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Whale’s Talergb(0, 91, 133)hsl(199, 100%, 26%)
Navalrgb(74, 112, 156)hsl(212, 36%, 45%)
Kimonorgb(120, 132, 179)hsl(228, 28%, 59%)
Enchanted Lilacrgb(165, 152, 202)hsl(256, 32%, 69%)
Blushing Skyrgb(210, 172, 226)hsl(282, 48%, 78%)
Sugar Chicrgb(255, 192, 250)hsl(305, 100%, 88%)

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.00:1 Good#005B85 on #FFC0FA
  • Aa5.00:1 Good#FFC0FA on #005B85
  • Aa3.79:1 Poor#005B85 on #D2ACE2
  • Aa3.79:1 Poor#D2ACE2 on #005B85
  • Aa3.47:1 Poor#4A709C on #FFC0FA
  • Aa3.47:1 Poor#FFC0FA on #4A709C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Whale’s Tale to Sugar Chic — https://swatchly.xyz/palette/005b85-4a709c-7884b3-a598ca-d2ace2-ffc0fa */
:root {
  --whale-s-tale: #005b85;
  --naval: #4a709c;
  --kimono: #7884b3;
  --enchanted-lilac: #a598ca;
  --blushing-sky: #d2ace2;
  --sugar-chic: #ffc0fa;
}

Tailwind CSS v4

/* Whale’s Tale to Sugar Chic — https://swatchly.xyz/palette/005b85-4a709c-7884b3-a598ca-d2ace2-ffc0fa */
@theme {
  --color-whale-s-tale: #005b85;
  --color-whale-s-tale-50: #ecf7ff;
  --color-whale-s-tale-100: #d8efff;
  --color-whale-s-tale-200: #afdfff;
  --color-whale-s-tale-300: #8cc9f2;
  --color-whale-s-tale-400: #64aad6;
  --color-whale-s-tale-500: #458ebb;
  --color-whale-s-tale-600: #29729d;
  --color-whale-s-tale-700: #005b85;
  --color-whale-s-tale-800: #014769;
  --color-whale-s-tale-900: #003752;
  --color-whale-s-tale-950: #002235;
  --color-naval: #4a709c;
  --color-naval-50: #eef6ff;
  --color-naval-100: #deedff;
  --color-naval-200: #bddbff;
  --color-naval-300: #a2c5ee;
  --color-naval-400: #80a6d3;
  --color-naval-500: #648bb8;
  --color-naval-600: #4a709c;
  --color-naval-700: #365980;
  --color-naval-800: #274567;
  --color-naval-900: #1b3552;
  --color-naval-950: #0e2135;
  --color-kimono: #7884b3;
  --color-kimono-50: #f2f5ff;
  --color-kimono-100: #e5ebff;
  --color-kimono-200: #ccd6fc;
  --color-kimono-300: #b4bfea;
  --color-kimono-400: #93a0ce;
  --color-kimono-500: #7884b3;
  --color-kimono-600: #5e6996;
  --color-kimono-700: #49537b;
  --color-kimono-800: #384063;
  --color-kimono-900: #2a314e;
  --color-kimono-950: #191e33;
  --color-enchanted-lilac: #a598ca;
  --color-enchanted-lilac-50: #f6f3ff;
  --color-enchanted-lilac-100: #ede7ff;
  --color-enchanted-lilac-200: #dad0f8;
  --color-enchanted-lilac-300: #c4b9e5;
  --color-enchanted-lilac-400: #a598ca;
  --color-enchanted-lilac-500: #8a7dad;
  --color-enchanted-lilac-600: #6f6391;
  --color-enchanted-lilac-700: #594d76;
  --color-enchanted-lilac-800: #453b5f;
  --color-enchanted-lilac-900: #352d4b;
  --color-enchanted-lilac-950: #211b31;
  --color-blushing-sky: #d2ace2;
  --color-blushing-sky-50: #faeeff;
  --color-blushing-sky-100: #f5dfff;
  --color-blushing-sky-200: #e5c7f1;
  --color-blushing-sky-300: #d2ace2;
  --color-blushing-sky-400: #b28ec1;
  --color-blushing-sky-500: #9773a6;
  --color-blushing-sky-600: #7c5a8b;
  --color-blushing-sky-700: #654671;
  --color-blushing-sky-800: #50355b;
  --color-blushing-sky-900: #3f2849;
  --color-blushing-sky-950: #28172f;
  --color-sugar-chic: #ffc0fa;
  --color-sugar-chic-50: #fff0fd;
  --color-sugar-chic-100: #ffe1fc;
  --color-sugar-chic-200: #ffc0fa;
  --color-sugar-chic-300: #e2adde;
  --color-sugar-chic-400: #c58bc0;
  --color-sugar-chic-500: #a96fa5;
  --color-sugar-chic-600: #8c5589;
  --color-sugar-chic-700: #72406f;
  --color-sugar-chic-800: #5b3059;
  --color-sugar-chic-900: #482346;
  --color-sugar-chic-950: #2e142d;
}

Similar palettes