Sugar Coated to Naval Blue Color Palette

About this palette

Sugar Coated to Naval Blue is a 5-color cool palette: #FFEDF4 (Sugar Coated), #8AD4BF (Cabbage), #728DB0 (Heavenly Sky), #7E5B00 (Coffee Adept), #3B4B6E (Naval Blue). It mixes white, turquoise, blue, brown tones and feels cool overall. The strongest text pairing is #FFEDF4 on #3B4B6E with a contrast ratio of 7.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Coated	rgb(255, 237, 244)	hsl(337, 100%, 96%)
Cabbage	rgb(138, 212, 191)	hsl(163, 46%, 69%)
Heavenly Sky	rgb(114, 141, 176)	hsl(214, 28%, 57%)
Coffee Adept	rgb(126, 91, 0)	hsl(43, 100%, 25%)
Naval Blue	rgb(59, 75, 110)	hsl(221, 30%, 33%)

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.72:1 Very good#FFEDF4 on #3B4B6E
Aa7.72:1 Very good#3B4B6E on #FFEDF4
Aa5.52:1 Good#FFEDF4 on #7E5B00
Aa5.52:1 Good#7E5B00 on #FFEDF4
Aa5.07:1 Good#8AD4BF on #3B4B6E
Aa5.07:1 Good#3B4B6E on #8AD4BF
Aa3.62:1 Poor#8AD4BF on #7E5B00
Aa3.62:1 Poor#7E5B00 on #8AD4BF

Color blindness preview

CSS variables

/* Sugar Coated to Naval Blue — https://swatchly.xyz/palette/ffedf4-8ad4bf-728db0-7e5b00-3b4b6e */
:root {
  --sugar-coated: #ffedf4;
  --cabbage: #8ad4bf;
  --heavenly-sky: #728db0;
  --coffee-adept: #7e5b00;
  --naval-blue: #3b4b6e;
}

Tailwind CSS v4

/* Sugar Coated to Naval Blue — https://swatchly.xyz/palette/ffedf4-8ad4bf-728db0-7e5b00-3b4b6e */
@theme {
  --color-sugar-coated: #ffedf4;
  --color-sugar-coated-50: #ffedf4;
  --color-sugar-coated-100: #f1e6ea;
  --color-sugar-coated-200: #dfd2d7;
  --color-sugar-coated-300: #cabbc1;
  --color-sugar-coated-400: #ac9ca2;
  --color-sugar-coated-500: #918187;
  --color-sugar-coated-600: #76676d;
  --color-sugar-coated-700: #5f5156;
  --color-sugar-coated-800: #4a3f43;
  --color-sugar-coated-900: #3a3034;
  --color-sugar-coated-950: #241d20;
  --color-cabbage: #8ad4bf;
  --color-cabbage-50: #ddfff4;
  --color-cabbage-100: #ccf8ea;
  --color-cabbage-200: #b1e6d6;
  --color-cabbage-300: #8ad4bf;
  --color-cabbage-400: #6db3a0;
  --color-cabbage-500: #4e9784;
  --color-cabbage-600: #327b69;
  --color-cabbage-700: #1c6353;
  --color-cabbage-800: #0c4e40;
  --color-cabbage-900: #023c31;
  --color-cabbage-950: #00261e;
  --color-heavenly-sky: #728db0;
  --color-heavenly-sky-50: #f0f7ff;
  --color-heavenly-sky-100: #e1eeff;
  --color-heavenly-sky-200: #c7dcf8;
  --color-heavenly-sky-300: #aec7e6;
  --color-heavenly-sky-400: #8da8ca;
  --color-heavenly-sky-500: #728db0;
  --color-heavenly-sky-600: #587193;
  --color-heavenly-sky-700: #425a78;
  --color-heavenly-sky-800: #314660;
  --color-heavenly-sky-900: #24354b;
  --color-heavenly-sky-950: #142131;
  --color-coffee-adept: #7e5b00;
  --color-coffee-adept-50: #fff4e0;
  --color-coffee-adept-100: #ffe6b9;
  --color-coffee-adept-200: #edd099;
  --color-coffee-adept-300: #d8b678;
  --color-coffee-adept-400: #b9944e;
  --color-coffee-adept-500: #9b772c;
  --color-coffee-adept-600: #7e5b00;
  --color-coffee-adept-700: #644800;
  --color-coffee-adept-800: #4f3800;
  --color-coffee-adept-900: #3e2b00;
  --color-coffee-adept-950: #271a00;
  --color-naval-blue: #3b4b6e;
  --color-naval-blue-50: #f0f5ff;
  --color-naval-blue-100: #e2ebff;
  --color-naval-blue-200: #c7d6f5;
  --color-naval-blue-300: #acbde1;
  --color-naval-blue-400: #8a9cc3;
  --color-naval-blue-500: #6d7fa5;
  --color-naval-blue-600: #536386;
  --color-naval-blue-700: #3b4b6e;
  --color-naval-blue-800: #2e3a55;
  --color-naval-blue-900: #222d43;
  --color-naval-blue-950: #141b2b;
}