Start generating

Lion’s Roar to Chocolate Rain color palette

F8DBB1Lion’s RoarCFB281FawnAE7600FalafelCD9741Mayan Treasure422F00Secret Passage70511CChocolate Rain
Open in generator Export PNG, PDF, ASE…

About this palette

Lion’s Roar to Chocolate Rain is a 6-color warm, earthy, vintage, monochromatic palette: #F8DBB1 (Lion’s Roar), #CFB281 (Fawn), #AE7600 (Falafel), #CD9741 (Mayan Treasure), #422F00 (Secret Passage), #70511C (Chocolate Rain). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #F8DBB1 on #422F00 with a contrast ratio of 9.62:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Lion’s Roarrgb(248, 219, 177)hsl(35, 84%, 83%)
Fawnrgb(207, 178, 129)hsl(38, 45%, 66%)
Falafelrgb(174, 118, 0)hsl(41, 100%, 34%)
Mayan Treasurergb(205, 151, 65)hsl(37, 58%, 53%)
Secret Passagergb(66, 47, 0)hsl(43, 100%, 13%)
Chocolate Rainrgb(112, 81, 28)hsl(38, 60%, 27%)

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.62:1 Very good#F8DBB1 on #422F00
  • Aa9.62:1 Very good#422F00 on #F8DBB1
  • Aa6.31:1 Good#CFB281 on #422F00
  • Aa6.31:1 Good#422F00 on #CFB281
  • Aa5.47:1 Good#F8DBB1 on #70511C
  • Aa5.47:1 Good#70511C on #F8DBB1
  • Aa4.94:1 Good#CD9741 on #422F00
  • Aa4.94:1 Good#422F00 on #CD9741

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Lion’s Roar to Chocolate Rain — https://swatchly.xyz/palette/f8dbb1-cfb281-ae7600-cd9741-422f00-70511c */
:root {
  --lion-s-roar: #f8dbb1;
  --fawn: #cfb281;
  --falafel: #ae7600;
  --mayan-treasure: #cd9741;
  --secret-passage: #422f00;
  --chocolate-rain: #70511c;
}

Tailwind CSS v4

/* Lion’s Roar to Chocolate Rain — https://swatchly.xyz/palette/f8dbb1-cfb281-ae7600-cd9741-422f00-70511c */
@theme {
  --color-lion-s-roar: #f8dbb1;
  --color-lion-s-roar-50: #fffaf3;
  --color-lion-s-roar-100: #fff0da;
  --color-lion-s-roar-200: #f8dbb1;
  --color-lion-s-roar-300: #dbc4a2;
  --color-lion-s-roar-400: #bca27c;
  --color-lion-s-roar-500: #a0855e;
  --color-lion-s-roar-600: #836a44;
  --color-lion-s-roar-700: #69522f;
  --color-lion-s-roar-800: #523f20;
  --color-lion-s-roar-900: #403015;
  --color-lion-s-roar-950: #291d0a;
  --color-fawn: #cfb281;
  --color-fawn-50: #ffedd0;
  --color-fawn-100: #f5e1c0;
  --color-fawn-200: #e3cba5;
  --color-fawn-300: #cfb281;
  --color-fawn-400: #b09566;
  --color-fawn-500: #967b4c;
  --color-fawn-600: #7c6335;
  --color-fawn-700: #654e24;
  --color-fawn-800: #523d17;
  --color-fawn-900: #41300e;
  --color-fawn-950: #291d05;
  --color-falafel: #ae7600;
  --color-falafel-50: #fff3e2;
  --color-falafel-100: #ffe6c3;
  --color-falafel-200: #facd8d;
  --color-falafel-300: #e8b469;
  --color-falafel-400: #ca9339;
  --color-falafel-500: #ae7600;
  --color-falafel-600: #8d5f00;
  --color-falafel-700: #704b00;
  --color-falafel-800: #583a00;
  --color-falafel-900: #452c00;
  --color-falafel-950: #2c1b00;
  --color-mayan-treasure: #cd9741;
  --color-mayan-treasure-50: #fff4e4;
  --color-mayan-treasure-100: #ffe8c8;
  --color-mayan-treasure-200: #fad195;
  --color-mayan-treasure-300: #e8b973;
  --color-mayan-treasure-400: #cd9741;
  --color-mayan-treasure-500: #b07b1f;
  --color-mayan-treasure-600: #916200;
  --color-mayan-treasure-700: #734d00;
  --color-mayan-treasure-800: #5b3c00;
  --color-mayan-treasure-900: #462d00;
  --color-mayan-treasure-950: #2d1b00;
  --color-secret-passage: #422f00;
  --color-secret-passage-50: #fff4de;
  --color-secret-passage-100: #f8eacd;
  --color-secret-passage-200: #e7d6b4;
  --color-secret-passage-300: #d2bf98;
  --color-secret-passage-400: #b49f74;
  --color-secret-passage-500: #998358;
  --color-secret-passage-600: #7d693f;
  --color-secret-passage-700: #65522c;
  --color-secret-passage-800: #50401d;
  --color-secret-passage-900: #422f00;
  --color-secret-passage-950: #271d08;
  --color-chocolate-rain: #70511c;
  --color-chocolate-rain-50: #fff3e3;
  --color-chocolate-rain-100: #fee8c7;
  --color-chocolate-rain-200: #eed4ad;
  --color-chocolate-rain-300: #dbbd90;
  --color-chocolate-rain-400: #be9d6b;
  --color-chocolate-rain-500: #a3824e;
  --color-chocolate-rain-600: #876735;
  --color-chocolate-rain-700: #70511c;
  --color-chocolate-rain-800: #583f14;
  --color-chocolate-rain-900: #45300a;
  --color-chocolate-rain-950: #2c1d03;
}

Similar palettes