Start generating

Glazed Sugar to Café Noir color palette

FFDDCEGlazed Sugar9FCED1Wave7DA2C6Shipmate416B98Queen Blue31615FVerdant Forest4C3324Café Noir
Open in generator Export PNG, PDF, ASE…

About this palette

Glazed Sugar to Café Noir is a 6-color muted, cool palette: #FFDDCE (Glazed Sugar), #9FCED1 (Wave), #7DA2C6 (Shipmate), #416B98 (Queen Blue), #31615F (Verdant Forest), #4C3324 (Café Noir). It mixes orange, turquoise, blue, brown tones and feels cool overall. The strongest text pairing is #FFDDCE on #4C3324 with a contrast ratio of 9.13:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Glazed Sugarrgb(255, 221, 206)hsl(18, 100%, 90%)
Wavergb(159, 206, 209)hsl(184, 35%, 72%)
Shipmatergb(125, 162, 198)hsl(210, 39%, 63%)
Queen Bluergb(65, 107, 152)hsl(211, 40%, 43%)
Verdant Forestrgb(49, 97, 95)hsl(178, 33%, 29%)
Café Noirrgb(76, 51, 36)hsl(23, 36%, 22%)

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.13:1 Very good#FFDDCE on #4C3324
  • Aa9.13:1 Very good#4C3324 on #FFDDCE
  • Aa6.77:1 Good#9FCED1 on #4C3324
  • Aa6.77:1 Good#4C3324 on #9FCED1
  • Aa5.48:1 Good#FFDDCE on #31615F
  • Aa5.48:1 Good#31615F on #FFDDCE
  • Aa4.36:1 Poor#FFDDCE on #416B98
  • Aa4.36:1 Poor#416B98 on #FFDDCE

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Glazed Sugar to Café Noir — https://swatchly.xyz/palette/ffddce-9fced1-7da2c6-416b98-31615f-4c3324 */
:root {
  --glazed-sugar: #ffddce;
  --wave: #9fced1;
  --shipmate: #7da2c6;
  --queen-blue: #416b98;
  --verdant-forest: #31615f;
  --caf-noir: #4c3324;
}

Tailwind CSS v4

/* Glazed Sugar to Café Noir — https://swatchly.xyz/palette/ffddce-9fced1-7da2c6-416b98-31615f-4c3324 */
@theme {
  --color-glazed-sugar: #ffddce;
  --color-glazed-sugar-50: #ffece3;
  --color-glazed-sugar-100: #ffddce;
  --color-glazed-sugar-200: #e6ccc1;
  --color-glazed-sugar-300: #d3b6aa;
  --color-glazed-sugar-400: #b6978a;
  --color-glazed-sugar-500: #9b7d6f;
  --color-glazed-sugar-600: #806457;
  --color-glazed-sugar-700: #694f43;
  --color-glazed-sugar-800: #533c32;
  --color-glazed-sugar-900: #412e25;
  --color-glazed-sugar-950: #291c15;
  --color-wave: #9fced1;
  --color-wave-50: #e3fcfe;
  --color-wave-100: #d7f4f5;
  --color-wave-200: #c0e2e4;
  --color-wave-300: #9fced1;
  --color-wave-400: #81adb0;
  --color-wave-500: #649194;
  --color-wave-600: #4a7679;
  --color-wave-700: #355e61;
  --color-wave-800: #264a4c;
  --color-wave-900: #1a383a;
  --color-wave-950: #0d2325;
  --color-shipmate: #7da2c6;
  --color-shipmate-50: #ebf5ff;
  --color-shipmate-100: #d9ecff;
  --color-shipmate-200: #bcd9f5;
  --color-shipmate-300: #a1c2e2;
  --color-shipmate-400: #7da2c6;
  --color-shipmate-500: #6387aa;
  --color-shipmate-600: #4b6d8e;
  --color-shipmate-700: #375774;
  --color-shipmate-800: #28445e;
  --color-shipmate-900: #1d344a;
  --color-shipmate-950: #102131;
  --color-queen-blue: #416b98;
  --color-queen-blue-50: #eef6ff;
  --color-queen-blue-100: #dcecff;
  --color-queen-blue-200: #b8daff;
  --color-queen-blue-300: #9cc3ee;
  --color-queen-blue-400: #78a3d1;
  --color-queen-blue-500: #5b86b5;
  --color-queen-blue-600: #416b98;
  --color-queen-blue-700: #2f557c;
  --color-queen-blue-800: #214264;
  --color-queen-blue-900: #173350;
  --color-queen-blue-950: #0b1f34;
  --color-verdant-forest: #31615f;
  --color-verdant-forest-50: #e0fcfa;
  --color-verdant-forest-100: #d4f3f1;
  --color-verdant-forest-200: #bce1de;
  --color-verdant-forest-300: #a1cbc9;
  --color-verdant-forest-400: #7eadab;
  --color-verdant-forest-500: #629290;
  --color-verdant-forest-600: #487875;
  --color-verdant-forest-700: #31615f;
  --color-verdant-forest-800: #254c4a;
  --color-verdant-forest-900: #193b39;
  --color-verdant-forest-950: #0c2524;
  --color-caf-noir: #4c3324;
  --color-caf-noir-50: #fff2eb;
  --color-caf-noir-100: #fbe7db;
  --color-caf-noir-200: #ead2c4;
  --color-caf-noir-300: #d6bbab;
  --color-caf-noir-400: #b99c8b;
  --color-caf-noir-500: #9f8271;
  --color-caf-noir-600: #856959;
  --color-caf-noir-700: #6d5445;
  --color-caf-noir-800: #594335;
  --color-caf-noir-900: #4c3324;
  --color-caf-noir-950: #2f2118;
}

Similar palettes