Sugar Milk to Chestnut color palette

FFF6F4Sugar Milk 91DCFAOver the Sky FE7D4ACoral 008DAAMediterranean Sea 007487Waterworld 742500Chestnut

Open in generator Export PNG, PDF, ASE…

About this palette

Sugar Milk to Chestnut is a 6-color palette: #FFF6F4 (Sugar Milk), #91DCFA (Over the Sky), #FE7D4A (Coral), #008DAA (Mediterranean Sea), #007487 (Waterworld), #742500 (Chestnut). It mixes white, blue, orange, turquoise, brown tones and feels cool overall. The strongest text pairing is #FFF6F4 on #742500 with a contrast ratio of 9.83:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Milk	rgb(255, 246, 244)	hsl(11, 100%, 98%)
Over the Sky	rgb(145, 220, 250)	hsl(197, 91%, 77%)
Coral	rgb(254, 125, 74)	hsl(17, 99%, 64%)
Mediterranean Sea	rgb(0, 141, 170)	hsl(190, 100%, 33%)
Waterworld	rgb(0, 116, 135)	hsl(188, 100%, 26%)
Chestnut	rgb(116, 37, 0)	hsl(19, 100%, 23%)

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.83:1 Very good#FFF6F4 on #742500
Aa9.83:1 Very good#742500 on #FFF6F4
Aa6.89:1 Good#91DCFA on #742500
Aa6.89:1 Good#742500 on #91DCFA
Aa5.13:1 Good#FFF6F4 on #007487
Aa5.13:1 Good#007487 on #FFF6F4
Aa4.11:1 Poor#FE7D4A on #742500
Aa4.11:1 Poor#742500 on #FE7D4A

Color blindness preview

CSS variables

/* Sugar Milk to Chestnut — https://swatchly.xyz/palette/fff6f4-91dcfa-fe7d4a-008daa-007487-742500 */
:root {
  --sugar-milk: #fff6f4;
  --over-the-sky: #91dcfa;
  --coral: #fe7d4a;
  --mediterranean-sea: #008daa;
  --waterworld: #007487;
  --chestnut: #742500;
}

Tailwind CSS v4

/* Sugar Milk to Chestnut — https://swatchly.xyz/palette/fff6f4-91dcfa-fe7d4a-008daa-007487-742500 */
@theme {
  --color-sugar-milk: #fff6f4;
  --color-sugar-milk-50: #fff6f4;
  --color-sugar-milk-100: #f2eceb;
  --color-sugar-milk-200: #ded8d6;
  --color-sugar-milk-300: #c8c0bf;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8d8583;
  --color-sugar-milk-600: #716a68;
  --color-sugar-milk-700: #5a5352;
  --color-sugar-milk-800: #47413f;
  --color-sugar-milk-900: #363230;
  --color-sugar-milk-950: #221e1d;
  --color-over-the-sky: #91dcfa;
  --color-over-the-sky-50: #dcf5ff;
  --color-over-the-sky-100: #c1edff;
  --color-over-the-sky-200: #91dcfa;
  --color-over-the-sky-300: #85c5df;
  --color-over-the-sky-400: #60a8c3;
  --color-over-the-sky-500: #428da9;
  --color-over-the-sky-600: #27738e;
  --color-over-the-sky-700: #125d75;
  --color-over-the-sky-800: #024a5f;
  --color-over-the-sky-900: #00394a;
  --color-over-the-sky-950: #002330;
  --color-coral: #fe7d4a;
  --color-coral-50: #fff5f1;
  --color-coral-100: #ffe9e1;
  --color-coral-200: #ffd0be;
  --color-coral-300: #ffb093;
  --color-coral-400: #fe7d4a;
  --color-coral-500: #dd5f2a;
  --color-coral-600: #bb4300;
  --color-coral-700: #953400;
  --color-coral-800: #752700;
  --color-coral-900: #5b1c00;
  --color-coral-950: #3b0f00;
  --color-mediterranean-sea: #008daa;
  --color-mediterranean-sea-50: #e3f8ff;
  --color-mediterranean-sea-100: #c5f1ff;
  --color-mediterranean-sea-200: #94e1f8;
  --color-mediterranean-sea-300: #70cae5;
  --color-mediterranean-sea-400: #3eaac7;
  --color-mediterranean-sea-500: #008daa;
  --color-mediterranean-sea-600: #007289;
  --color-mediterranean-sea-700: #005a6e;
  --color-mediterranean-sea-800: #004757;
  --color-mediterranean-sea-900: #003744;
  --color-mediterranean-sea-950: #00232c;
  --color-waterworld: #007487;
  --color-waterworld-50: #e4faff;
  --color-waterworld-100: #c5f4ff;
  --color-waterworld-200: #a2e2f1;
  --color-waterworld-300: #81ccdd;
  --color-waterworld-400: #56acc0;
  --color-waterworld-500: #3290a3;
  --color-waterworld-600: #007487;
  --color-waterworld-700: #005c6c;
  --color-waterworld-800: #004855;
  --color-waterworld-900: #003842;
  --color-waterworld-950: #00232a;
  --color-chestnut: #742500;
  --color-chestnut-50: #fff2ed;
  --color-chestnut-100: #ffe5db;
  --color-chestnut-200: #ffcab7;
  --color-chestnut-300: #faab8f;
  --color-chestnut-400: #de886a;
  --color-chestnut-500: #c26c4c;
  --color-chestnut-600: #a35133;
  --color-chestnut-700: #873d20;
  --color-chestnut-800: #742500;
  --color-chestnut-900: #572009;
  --color-chestnut-950: #391103;
}