Sugar Milk to Hellbound Color Palette

About this palette

Sugar Milk to Hellbound is a 5-color warm, monochromatic, gradient palette: #FFF6F5 (Sugar Milk), #FFAC9F (Discreet Orange), #C56751 (Barbecue), #9C302C (Ketchup), #6F0003 (Hellbound). It mixes white, pink, red tones and feels warm overall. The strongest text pairing is #FFF6F5 on #6F0003 with a contrast ratio of 11.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Milk	rgb(255, 246, 245)	hsl(6, 100%, 98%)
Discreet Orange	rgb(255, 172, 159)	hsl(8, 100%, 81%)
Barbecue	rgb(197, 103, 81)	hsl(11, 50%, 55%)
Ketchup	rgb(156, 48, 44)	hsl(2, 56%, 39%)
Hellbound	rgb(111, 0, 3)	hsl(358, 100%, 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.

Aa11.78:1 Very good#FFF6F5 on #6F0003
Aa11.78:1 Very good#6F0003 on #FFF6F5
Aa6.95:1 Good#FFAC9F on #6F0003
Aa6.95:1 Good#6F0003 on #FFAC9F
Aa6.88:1 Good#FFF6F5 on #9C302C
Aa6.88:1 Good#9C302C on #FFF6F5
Aa4.06:1 Poor#FFAC9F on #9C302C
Aa4.06:1 Poor#9C302C on #FFAC9F

Color blindness preview

CSS variables

/* Sugar Milk to Hellbound — https://swatchly.xyz/palette/fff6f5-ffac9f-c56751-9c302c-6f0003 */
:root {
  --sugar-milk: #fff6f5;
  --discreet-orange: #ffac9f;
  --barbecue: #c56751;
  --ketchup: #9c302c;
  --hellbound: #6f0003;
}

Tailwind CSS v4

/* Sugar Milk to Hellbound — https://swatchly.xyz/palette/fff6f5-ffac9f-c56751-9c302c-6f0003 */
@theme {
  --color-sugar-milk: #fff6f5;
  --color-sugar-milk-50: #fff6f5;
  --color-sugar-milk-100: #f2ecec;
  --color-sugar-milk-200: #ded8d7;
  --color-sugar-milk-300: #c8c0c0;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8c8484;
  --color-sugar-milk-600: #716a69;
  --color-sugar-milk-700: #5a5353;
  --color-sugar-milk-800: #474140;
  --color-sugar-milk-900: #363131;
  --color-sugar-milk-950: #221e1e;
  --color-discreet-orange: #ffac9f;
  --color-discreet-orange-50: #fff4f2;
  --color-discreet-orange-100: #ffe8e4;
  --color-discreet-orange-200: #ffcdc5;
  --color-discreet-orange-300: #ffac9f;
  --color-discreet-orange-400: #da8d82;
  --color-discreet-orange-500: #bd7065;
  --color-discreet-orange-600: #9f564b;
  --color-discreet-orange-700: #824037;
  --color-discreet-orange-800: #692f27;
  --color-discreet-orange-900: #52221c;
  --color-discreet-orange-950: #36130e;
  --color-barbecue: #c56751;
  --color-barbecue-50: #fff2ee;
  --color-barbecue-100: #ffe4de;
  --color-barbecue-200: #ffc9bb;
  --color-barbecue-300: #fda792;
  --color-barbecue-400: #e1846e;
  --color-barbecue-500: #c56751;
  --color-barbecue-600: #a64d38;
  --color-barbecue-700: #893826;
  --color-barbecue-800: #6f2818;
  --color-barbecue-900: #581c0e;
  --color-barbecue-950: #3a0f05;
  --color-ketchup: #9c302c;
  --color-ketchup-50: #fff2f0;
  --color-ketchup-100: #ffe4e1;
  --color-ketchup-200: #ffcac3;
  --color-ketchup-300: #ffa9a0;
  --color-ketchup-400: #ee8076;
  --color-ketchup-500: #d3635a;
  --color-ketchup-600: #b54942;
  --color-ketchup-700: #9c302c;
  --color-ketchup-800: #7d2320;
  --color-ketchup-900: #631615;
  --color-ketchup-950: #420909;
  --color-hellbound: #6f0003;
  --color-hellbound-50: #fff2f0;
  --color-hellbound-100: #ffe4e0;
  --color-hellbound-200: #ffc8c0;
  --color-hellbound-300: #ffa69a;
  --color-hellbound-400: #ea8073;
  --color-hellbound-500: #cf6357;
  --color-hellbound-600: #b1493f;
  --color-hellbound-700: #94352c;
  --color-hellbound-800: #7b251e;
  --color-hellbound-900: #6f0003;
  --color-hellbound-950: #440c09;
}