Bakery Brown to Cactus Color Palette

About this palette

Bakery Brown to Cactus is a 4-color muted palette: #AC8D73 (Bakery Brown), #3C3D53 (Dark & Stormy), #C0C0D6 (Stardust Evening), #616F5C (Cactus). It mixes orange, purple, gray tones and feels balanced overall. The strongest text pairing is #3C3D53 on #C0C0D6 with a contrast ratio of 5.92:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bakery Brown	rgb(172, 141, 115)	hsl(27, 26%, 56%)
Dark & Stormy	rgb(60, 61, 83)	hsl(237, 16%, 28%)
Stardust Evening	rgb(192, 192, 214)	hsl(240, 21%, 80%)
Cactus	rgb(97, 111, 92)	hsl(104, 9%, 40%)

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.

Aa5.92:1 Good#3C3D53 on #C0C0D6
Aa5.92:1 Good#C0C0D6 on #3C3D53
Aa3.43:1 Poor#AC8D73 on #3C3D53
Aa3.43:1 Poor#3C3D53 on #AC8D73

Color blindness preview

CSS variables

/* Bakery Brown to Cactus — https://swatchly.xyz/palette/ac8d73-3c3d53-c0c0d6-616f5c */
:root {
  --bakery-brown: #ac8d73;
  --dark-stormy: #3c3d53;
  --stardust-evening: #c0c0d6;
  --cactus: #616f5c;
}

Tailwind CSS v4

/* Bakery Brown to Cactus — https://swatchly.xyz/palette/ac8d73-3c3d53-c0c0d6-616f5c */
@theme {
  --color-bakery-brown: #ac8d73;
  --color-bakery-brown-50: #ffecdd;
  --color-bakery-brown-100: #f6dfcd;
  --color-bakery-brown-200: #e3c8b3;
  --color-bakery-brown-300: #ccaf97;
  --color-bakery-brown-400: #ac8d73;
  --color-bakery-brown-500: #92745b;
  --color-bakery-brown-600: #795d45;
  --color-bakery-brown-700: #624934;
  --color-bakery-brown-800: #4f3926;
  --color-bakery-brown-900: #3f2d1c;
  --color-bakery-brown-950: #2a1c10;
  --color-dark-stormy: #3c3d53;
  --color-dark-stormy-50: #f3f4ff;
  --color-dark-stormy-100: #e8eafb;
  --color-dark-stormy-200: #d4d6ea;
  --color-dark-stormy-300: #bdbed5;
  --color-dark-stormy-400: #9c9eb7;
  --color-dark-stormy-500: #80829b;
  --color-dark-stormy-600: #66677f;
  --color-dark-stormy-700: #4f5166;
  --color-dark-stormy-800: #3c3d53;
  --color-dark-stormy-900: #2e2f3e;
  --color-dark-stormy-950: #1c1c27;
  --color-stardust-evening: #c0c0d6;
  --color-stardust-evening-50: #f5f5ff;
  --color-stardust-evening-100: #ebebf9;
  --color-stardust-evening-200: #d7d7e7;
  --color-stardust-evening-300: #c0c0d6;
  --color-stardust-evening-400: #a0a0b5;
  --color-stardust-evening-500: #858599;
  --color-stardust-evening-600: #6a6a7e;
  --color-stardust-evening-700: #545465;
  --color-stardust-evening-800: #414150;
  --color-stardust-evening-900: #32313e;
  --color-stardust-evening-950: #1e1e27;
  --color-cactus: #616f5c;
  --color-cactus-50: #eff8ec;
  --color-cactus-100: #e4eee1;
  --color-cactus-200: #cfdbcb;
  --color-cactus-300: #b7c5b3;
  --color-cactus-400: #97a592;
  --color-cactus-500: #7b8a76;
  --color-cactus-600: #616f5c;
  --color-cactus-700: #4c5847;
  --color-cactus-800: #3a4536;
  --color-cactus-900: #2c3529;
  --color-cactus-950: #1a2118;
}