Dark Orchestra to Sugar Milk Color Palette

About this palette

Dark Orchestra to Sugar Milk is a 5-color muted, warm, gradient palette: #281D1A (Dark Orchestra), #71535D (Hibernation), #A37E81 (Opium), #D9BCA3 (Dune), #FFF6F4 (Sugar Milk). It mixes gray, red, orange, white tones and feels warm overall. The strongest text pairing is #281D1A on #FFF6F4 with a contrast ratio of 15.41:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Orchestra	rgb(40, 29, 26)	hsl(13, 21%, 13%)
Hibernation	rgb(113, 83, 93)	hsl(340, 15%, 38%)
Opium	rgb(163, 126, 129)	hsl(355, 17%, 57%)
Dune	rgb(217, 188, 163)	hsl(28, 42%, 75%)
Sugar Milk	rgb(255, 246, 244)	hsl(11, 100%, 98%)

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.

Aa15.41:1 Super#281D1A on #FFF6F4
Aa15.41:1 Super#FFF6F4 on #281D1A
Aa9.11:1 Very good#281D1A on #D9BCA3
Aa9.11:1 Very good#D9BCA3 on #281D1A
Aa6.37:1 Good#71535D on #FFF6F4
Aa6.37:1 Good#FFF6F4 on #71535D
Aa4.57:1 Good#281D1A on #A37E81
Aa4.57:1 Good#A37E81 on #281D1A

Color blindness preview

CSS variables

/* Dark Orchestra to Sugar Milk — https://swatchly.xyz/palette/281d1a-71535d-a37e81-d9bca3-fff6f4 */
:root {
  --dark-orchestra: #281d1a;
  --hibernation: #71535d;
  --opium: #a37e81;
  --dune: #d9bca3;
  --sugar-milk: #fff6f4;
}

Tailwind CSS v4

/* Dark Orchestra to Sugar Milk — https://swatchly.xyz/palette/281d1a-71535d-a37e81-d9bca3-fff6f4 */
@theme {
  --color-dark-orchestra: #281d1a;
  --color-dark-orchestra-50: #fcf3f0;
  --color-dark-orchestra-100: #f3e9e6;
  --color-dark-orchestra-200: #e0d5d1;
  --color-dark-orchestra-300: #cbbeba;
  --color-dark-orchestra-400: #ac9e9a;
  --color-dark-orchestra-500: #91837f;
  --color-dark-orchestra-600: #766965;
  --color-dark-orchestra-700: #5f534f;
  --color-dark-orchestra-800: #4b403d;
  --color-dark-orchestra-900: #3a312f;
  --color-dark-orchestra-950: #281d1a;
  --color-hibernation: #71535d;
  --color-hibernation-50: #fff1f5;
  --color-hibernation-100: #fbe4eb;
  --color-hibernation-200: #ebd1d9;
  --color-hibernation-300: #d8bbc4;
  --color-hibernation-400: #bc9ca6;
  --color-hibernation-500: #a2818c;
  --color-hibernation-600: #876873;
  --color-hibernation-700: #71535d;
  --color-hibernation-800: #594049;
  --color-hibernation-900: #463038;
  --color-hibernation-950: #2d1d23;
  --color-opium: #a37e81;
  --color-opium-50: #fff2f3;
  --color-opium-100: #ffe5e7;
  --color-opium-200: #efd1d3;
  --color-opium-300: #dbb9bc;
  --color-opium-400: #be999c;
  --color-opium-500: #a37e81;
  --color-opium-600: #866366;
  --color-opium-700: #6d4d50;
  --color-opium-800: #573b3e;
  --color-opium-900: #442c2f;
  --color-opium-950: #2b1a1c;
  --color-dune: #d9bca3;
  --color-dune-50: #fff3ea;
  --color-dune-100: #fbe8d9;
  --color-dune-200: #ead4c1;
  --color-dune-300: #d9bca3;
  --color-dune-400: #b89d86;
  --color-dune-500: #9c8169;
  --color-dune-600: #806750;
  --color-dune-700: #67503c;
  --color-dune-800: #523e2c;
  --color-dune-900: #402f20;
  --color-dune-950: #291c12;
  --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;
}