Secret Passage to Minotaurus Brown color palette

382700Secret Passage B2742BHamtaro Brown FFC380Buttery EA6C47Opulent Orange 8A1B0DMinotaurus Brown

About this palette

Secret Passage to Minotaurus Brown is a 5-color warm, earthy palette: #382700 (Secret Passage), #B2742B (Hamtaro Brown), #FFC380 (Buttery), #EA6C47 (Opulent Orange), #8A1B0D (Minotaurus Brown). It mixes brown, orange, red tones and feels warm overall. The strongest text pairing is #382700 on #FFC380 with a contrast ratio of 9.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(56, 39, 0)	hsl(42, 100%, 11%)
Hamtaro Brown	rgb(178, 116, 43)	hsl(32, 61%, 43%)
Buttery	rgb(255, 195, 128)	hsl(32, 100%, 75%)
Opulent Orange	rgb(234, 108, 71)	hsl(14, 80%, 60%)
Minotaurus Brown	rgb(138, 27, 13)	hsl(7, 83%, 30%)

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.17:1 Very good#382700 on #FFC380
Aa9.17:1 Very good#FFC380 on #382700
Aa5.96:1 Good#FFC380 on #8A1B0D
Aa5.96:1 Good#8A1B0D on #FFC380
Aa4.62:1 Good#382700 on #EA6C47
Aa4.62:1 Good#EA6C47 on #382700
Aa3.72:1 Poor#382700 on #B2742B
Aa3.72:1 Poor#B2742B on #382700

Color blindness preview

CSS variables

/* Secret Passage to Minotaurus Brown — https://swatchly.xyz/palette/382700-b2742b-ffc380-ea6c47-8a1b0d */
:root {
  --secret-passage: #382700;
  --hamtaro-brown: #b2742b;
  --buttery: #ffc380;
  --opulent-orange: #ea6c47;
  --minotaurus-brown: #8a1b0d;
}

Tailwind CSS v4

/* Secret Passage to Minotaurus Brown — https://swatchly.xyz/palette/382700-b2742b-ffc380-ea6c47-8a1b0d */
@theme {
  --color-secret-passage: #382700;
  --color-secret-passage-50: #fff4df;
  --color-secret-passage-100: #f7ead0;
  --color-secret-passage-200: #e5d6b8;
  --color-secret-passage-300: #d1bf9d;
  --color-secret-passage-400: #b19d78;
  --color-secret-passage-500: #94805a;
  --color-secret-passage-600: #776440;
  --color-secret-passage-700: #5d4c2c;
  --color-secret-passage-800: #47391d;
  --color-secret-passage-900: #382700;
  --color-secret-passage-950: #1f1708;
  --color-hamtaro-brown: #b2742b;
  --color-hamtaro-brown-50: #fff2e6;
  --color-hamtaro-brown-100: #ffe5cc;
  --color-hamtaro-brown-200: #fecb99;
  --color-hamtaro-brown-300: #ebb278;
  --color-hamtaro-brown-400: #ce914e;
  --color-hamtaro-brown-500: #b2742b;
  --color-hamtaro-brown-600: #955a06;
  --color-hamtaro-brown-700: #784700;
  --color-hamtaro-brown-800: #5e3700;
  --color-hamtaro-brown-900: #4a2900;
  --color-hamtaro-brown-950: #301900;
  --color-buttery: #ffc380;
  --color-buttery-50: #ffedda;
  --color-buttery-100: #ffdfbc;
  --color-buttery-200: #ffc380;
  --color-buttery-300: #e3b076;
  --color-buttery-400: #c89050;
  --color-buttery-500: #ad7531;
  --color-buttery-600: #915c14;
  --color-buttery-700: #774800;
  --color-buttery-800: #5f3900;
  --color-buttery-900: #4a2b00;
  --color-buttery-950: #2f1a00;
  --color-opulent-orange: #ea6c47;
  --color-opulent-orange-50: #ffede8;
  --color-opulent-orange-100: #ffddd3;
  --color-opulent-orange-200: #ffbfac;
  --color-opulent-orange-300: #ff997b;
  --color-opulent-orange-400: #ea6c47;
  --color-opulent-orange-500: #cc512c;
  --color-opulent-orange-600: #ad380f;
  --color-opulent-orange-700: #8f2700;
  --color-opulent-orange-800: #721d00;
  --color-opulent-orange-900: #5b1500;
  --color-opulent-orange-950: #3d0b00;
  --color-minotaurus-brown: #8a1b0d;
  --color-minotaurus-brown-50: #fff2ef;
  --color-minotaurus-brown-100: #ffe4df;
  --color-minotaurus-brown-200: #ffc9be;
  --color-minotaurus-brown-300: #ffa999;
  --color-minotaurus-brown-400: #f0806d;
  --color-minotaurus-brown-500: #d66451;
  --color-minotaurus-brown-600: #b84a39;
  --color-minotaurus-brown-700: #9d3526;
  --color-minotaurus-brown-800: #8a1b0d;
  --color-minotaurus-brown-900: #6a180d;
  --color-minotaurus-brown-950: #480a04;
}