Sugar Milk to Pastel Orange Color Palette

About this palette

Sugar Milk to Pastel Orange is a 5-color warm, earthy palette: #FFF6F6 (Sugar Milk), #CE6304 (Solar Ash), #8A5800 (Grizzly), #550811 (Burned), #FF9248 (Pastel Orange). It mixes white, orange, brown tones and feels warm overall. The strongest text pairing is #FFF6F6 on #550811 with a contrast ratio of 13.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Milk	rgb(255, 246, 246)	hsl(0, 100%, 98%)
Solar Ash	rgb(206, 99, 4)	hsl(28, 96%, 41%)
Grizzly	rgb(138, 88, 0)	hsl(38, 100%, 27%)
Burned	rgb(85, 8, 17)	hsl(353, 83%, 18%)
Pastel Orange	rgb(255, 146, 72)	hsl(24, 100%, 64%)

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.

Aa13.83:1 Super#FFF6F6 on #550811
Aa13.83:1 Super#550811 on #FFF6F6
Aa6.62:1 Good#550811 on #FF9248
Aa6.62:1 Good#FF9248 on #550811
Aa5.69:1 Good#FFF6F6 on #8A5800
Aa5.69:1 Good#8A5800 on #FFF6F6
Aa3.79:1 Poor#CE6304 on #550811
Aa3.79:1 Poor#550811 on #CE6304

Color blindness preview

CSS variables

/* Sugar Milk to Pastel Orange — https://swatchly.xyz/palette/fff6f6-ce6304-8a5800-550811-ff9248 */
:root {
  --sugar-milk: #fff6f6;
  --solar-ash: #ce6304;
  --grizzly: #8a5800;
  --burned: #550811;
  --pastel-orange: #ff9248;
}

Tailwind CSS v4

/* Sugar Milk to Pastel Orange — https://swatchly.xyz/palette/fff6f6-ce6304-8a5800-550811-ff9248 */
@theme {
  --color-sugar-milk: #fff6f6;
  --color-sugar-milk-50: #fff6f6;
  --color-sugar-milk-100: #f2ecec;
  --color-sugar-milk-200: #ded8d8;
  --color-sugar-milk-300: #c8c0c0;
  --color-sugar-milk-400: #a8a0a0;
  --color-sugar-milk-500: #8c8484;
  --color-sugar-milk-600: #716a6a;
  --color-sugar-milk-700: #5a5353;
  --color-sugar-milk-800: #474141;
  --color-sugar-milk-900: #363131;
  --color-sugar-milk-950: #221e1e;
  --color-solar-ash: #ce6304;
  --color-solar-ash-50: #fff2eb;
  --color-solar-ash-100: #ffe5d7;
  --color-solar-ash-200: #ffcaac;
  --color-solar-ash-300: #ffa976;
  --color-solar-ash-400: #eb813b;
  --color-solar-ash-500: #ce6304;
  --color-solar-ash-600: #a74f00;
  --color-solar-ash-700: #863d00;
  --color-solar-ash-800: #6a2f00;
  --color-solar-ash-900: #532300;
  --color-solar-ash-950: #361400;
  --color-grizzly: #8a5800;
  --color-grizzly-50: #fff3e5;
  --color-grizzly-100: #ffe5c7;
  --color-grizzly-200: #f7cc99;
  --color-grizzly-300: #e3b378;
  --color-grizzly-400: #c5914e;
  --color-grizzly-500: #a8742c;
  --color-grizzly-600: #8a5800;
  --color-grizzly-700: #6e4500;
  --color-grizzly-800: #573600;
  --color-grizzly-900: #442900;
  --color-grizzly-950: #2c1800;
  --color-burned: #550811;
  --color-burned-50: #fff2f1;
  --color-burned-100: #ffe4e2;
  --color-burned-200: #ffc8c5;
  --color-burned-300: #f7aaa6;
  --color-burned-400: #d98583;
  --color-burned-500: #bb6866;
  --color-burned-600: #9b4d4c;
  --color-burned-700: #7d3737;
  --color-burned-800: #612627;
  --color-burned-900: #550811;
  --color-burned-950: #2f0d0e;
  --color-pastel-orange: #ff9248;
  --color-pastel-orange-50: #ffe8db;
  --color-pastel-orange-100: #ffd8c1;
  --color-pastel-orange-200: #ffb98f;
  --color-pastel-orange-300: #ff9248;
  --color-pastel-orange-400: #de7629;
  --color-pastel-orange-500: #c05d00;
  --color-pastel-orange-600: #9d4b00;
  --color-pastel-orange-700: #7f3b00;
  --color-pastel-orange-800: #662e00;
  --color-pastel-orange-900: #522400;
  --color-pastel-orange-950: #351500;
}