Start generating

Glazed Sugar to Hazelnut Chocolate color palette

FFD9C6Glazed Sugar93D6FFBaby BlueDF8648Touch of Glamour4690AEEnchanted Well0074B2Brilliant Blue7E3B0AHazelnut Chocolate
Open in generator Export PNG, PDF, ASE…

About this palette

Glazed Sugar to Hazelnut Chocolate is a 6-color vintage palette: #FFD9C6 (Glazed Sugar), #93D6FF (Baby Blue), #DF8648 (Touch of Glamour), #4690AE (Enchanted Well), #0074B2 (Brilliant Blue), #7E3B0A (Hazelnut Chocolate). It mixes orange, blue, brown tones and feels balanced overall. The strongest text pairing is #FFD9C6 on #7E3B0A with a contrast ratio of 6.35:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Glazed Sugarrgb(255, 217, 198)hsl(20, 100%, 89%)
Baby Bluergb(147, 214, 255)hsl(203, 100%, 79%)
Touch of Glamourrgb(223, 134, 72)hsl(25, 70%, 58%)
Enchanted Wellrgb(70, 144, 174)hsl(197, 43%, 48%)
Brilliant Bluergb(0, 116, 178)hsl(201, 100%, 35%)
Hazelnut Chocolatergb(126, 59, 10)hsl(25, 85%, 27%)

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.

  • Aa6.35:1 Good#FFD9C6 on #7E3B0A
  • Aa6.35:1 Good#7E3B0A on #FFD9C6
  • Aa5.29:1 Good#93D6FF on #7E3B0A
  • Aa5.29:1 Good#7E3B0A on #93D6FF
  • Aa3.86:1 Poor#FFD9C6 on #0074B2
  • Aa3.86:1 Poor#0074B2 on #FFD9C6
  • Aa3.21:1 Poor#93D6FF on #0074B2
  • Aa3.21:1 Poor#0074B2 on #93D6FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Glazed Sugar to Hazelnut Chocolate — https://swatchly.xyz/palette/ffd9c6-93d6ff-df8648-4690ae-0074b2-7e3b0a */
:root {
  --glazed-sugar: #ffd9c6;
  --baby-blue: #93d6ff;
  --touch-of-glamour: #df8648;
  --enchanted-well: #4690ae;
  --brilliant-blue: #0074b2;
  --hazelnut-chocolate: #7e3b0a;
}

Tailwind CSS v4

/* Glazed Sugar to Hazelnut Chocolate — https://swatchly.xyz/palette/ffd9c6-93d6ff-df8648-4690ae-0074b2-7e3b0a */
@theme {
  --color-glazed-sugar: #ffd9c6;
  --color-glazed-sugar-50: #ffe8dd;
  --color-glazed-sugar-100: #ffd9c6;
  --color-glazed-sugar-200: #e6c9ba;
  --color-glazed-sugar-300: #d4b3a3;
  --color-glazed-sugar-400: #b79584;
  --color-glazed-sugar-500: #9d7b6a;
  --color-glazed-sugar-600: #826252;
  --color-glazed-sugar-700: #6b4e3f;
  --color-glazed-sugar-800: #553c2f;
  --color-glazed-sugar-900: #432d22;
  --color-glazed-sugar-950: #2a1b13;
  --color-baby-blue: #93d6ff;
  --color-baby-blue-50: #dcf1ff;
  --color-baby-blue-100: #c3e8ff;
  --color-baby-blue-200: #93d6ff;
  --color-baby-blue-300: #86c0e4;
  --color-baby-blue-400: #63a3c9;
  --color-baby-blue-500: #4789af;
  --color-baby-blue-600: #2f7094;
  --color-baby-blue-700: #1c5a7b;
  --color-baby-blue-800: #0e4864;
  --color-baby-blue-900: #043750;
  --color-baby-blue-950: #012234;
  --color-touch-of-glamour: #df8648;
  --color-touch-of-glamour-50: #fff1e9;
  --color-touch-of-glamour-100: #ffe4d4;
  --color-touch-of-glamour-200: #ffc9a7;
  --color-touch-of-glamour-300: #f9aa76;
  --color-touch-of-glamour-400: #df8648;
  --color-touch-of-glamour-500: #c16b2a;
  --color-touch-of-glamour-600: #a35103;
  --color-touch-of-glamour-700: #833f00;
  --color-touch-of-glamour-800: #673000;
  --color-touch-of-glamour-900: #512400;
  --color-touch-of-glamour-950: #351500;
  --color-enchanted-well: #4690ae;
  --color-enchanted-well-50: #e9f8ff;
  --color-enchanted-well-100: #d2f1ff;
  --color-enchanted-well-200: #abe0f8;
  --color-enchanted-well-300: #8dcbe6;
  --color-enchanted-well-400: #66acc9;
  --color-enchanted-well-500: #4690ae;
  --color-enchanted-well-600: #2a7591;
  --color-enchanted-well-700: #145d77;
  --color-enchanted-well-800: #024960;
  --color-enchanted-well-900: #00384b;
  --color-enchanted-well-950: #002330;
  --color-brilliant-blue: #0074b2;
  --color-brilliant-blue-50: #edf7ff;
  --color-brilliant-blue-100: #dbefff;
  --color-brilliant-blue-200: #b5deff;
  --color-brilliant-blue-300: #86caff;
  --color-brilliant-blue-400: #55abea;
  --color-brilliant-blue-500: #318fcf;
  --color-brilliant-blue-600: #0074b2;
  --color-brilliant-blue-700: #005c8f;
  --color-brilliant-blue-800: #004871;
  --color-brilliant-blue-900: #003758;
  --color-brilliant-blue-950: #002239;
  --color-hazelnut-chocolate: #7e3b0a;
  --color-hazelnut-chocolate-50: #fff2eb;
  --color-hazelnut-chocolate-100: #ffe5d8;
  --color-hazelnut-chocolate-200: #ffc9ac;
  --color-hazelnut-chocolate-300: #f1ae89;
  --color-hazelnut-chocolate-400: #d38b62;
  --color-hazelnut-chocolate-500: #b66e44;
  --color-hazelnut-chocolate-600: #97532a;
  --color-hazelnut-chocolate-700: #7e3b0a;
  --color-hazelnut-chocolate-800: #622e09;
  --color-hazelnut-chocolate-900: #4e2203;
  --color-hazelnut-chocolate-950: #331301;
}

Similar palettes